css常用属性2
1 浮动和清除浮动
在上篇的第十一节--定位中说道：
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
普通流和绝对定位已经说完，接下来就是浮动了。
什么是浮动？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
我的理解是：浮动将元素‘上浮’一层，并保留元素在上层对下层的投影的位置。
请注意：
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
浮动： float = left
right
none
inherit
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img {
float:left;
}
</style>
</head> <body>
<h1>hello world</h1>
<img src="l.jpg"/>
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
</body>
</html>
浮动实例
我们可以通过clear属性清除元素周围的浮动
clear = left/right/both/none/inherit
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head> <body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
清除浮动实例
2 css伪类/伪元素
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：伪类的名称不区分大小写。
selector.class:pseudo-class {property:value;}
以上就是css中的所有伪类。
其中专门针对链接的有四个：
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标划过链接 */ （这个hover伪类对其他块元素像<p>也是生效的，感兴趣的可以试试）
:active /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
:focus很有意思
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input:focus{
background-color: aquamarine; }
</style>
</head> <body> <h1>hello world</h1>
<form>
name:<input type="text" name="name"/>
job:<input type="text" name="job"/>
</form> </body>
</html>
:focus实例
浏览器显示结果：
:first-letter
该伪类仅适用于块级元素。也就是说<p> <h1> 列表 表格 表单等块级元素都适用。（不清楚什么是块级元素？请点这里）
<!DOCTYPE html>
<html>
<head>
<style>
li:first-letter
{
font-size:200%;
color:#8A2BE2;
}
p:first-letter{
font-size:200%;
color:#8A2BE2;
}
</style>
</head>
<body> <ul>
<li>hello</li>
</ul>
<p>hello world</p>
</body>
</html>
first-letter实例
:first-line
该伪元素也仅适用于块元素。
:first-child
匹配父元素中第一个子元素
:before和:after
:before 选择器向选定的元素前插入内容。使用content属性（content详解）指定要插入的内容
<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"Read this -";
}
</style>
</head> <body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p> <p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p> </body>
</html>
:before实例
3 导航栏
绝大多数网页都会有导航栏，导航栏的重要性就不需要我说了。
导航栏大多是用列表来实现的。
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin:0;
padding:5px; }
a{
font-size: 28px;
color:white;
text-decoration: none;
text-transform: uppercase; }
a:hover{
color:gainsboro;
background-color:darkgrey;
}
li{
float: left;
width:10%;
background-color: grey;
}
</style>
</head>
<body>
<ul>
<li><a href="http://baidu.com" target="_blank">first</a></li>
<li><a href="http://baidu.com">second</a></li>
<li><a href="http://baidu.com">third</a></li>
<li><a href="http://baidu.com">fourth</a></li>
</ul>
</body>
</html>
不算丑的横向导航栏实例
css常用属性2的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css常用属性1
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- css常用属性总结：颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...
- javascript之css常用属性
1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed : 生成绝对定位的元素,相对于浏览 ...
随机推荐
- 虚拟机下安装VMware Tools
使用虚拟机安装第二操作系统,是我们经常使用到的一种方法,但是为了能够在虚拟机与本地操作系统间进行文件共享,我们可以借助一款非常实用的工具VMware Tools.下面我们就来说一下怎样安装VMware ...
- redis集群搭建及注意事项
上一篇:redis的安装及注意事项 这里,在一个Linux虚拟机上搭建6个节点的redis伪集群,思路很简单,一台虚拟机上开启6个redis实例,每个redis实例有自己的端口.这样的话,相当于模拟出 ...
- Varnsih调用多台后端主机
author:JevonWei 版权声明:原创作品 Varnsih调用多个后端主机 环境 Varnish 192.168.198.139 图片服务端 192.168.198.120 程序服务端 192 ...
- 使用nfs作为根文件系统启动，(3)
通过设置u-boot的bootargs来更改开机自动进入nfs远端服务器,不需要mount指令,实现虚拟机编译程序后直接通过u-boot烧写程序 1 使用nfs作为根文件系统启动 1.1 pr ...
- Mac上好用的视频播放器有哪些？
首页发现话题 提问 登录加入知乎 Mac 上好用的视频播放器有哪些? 关注问题写回答 OS X 应用 多媒体播放器(软件) Mac 上好用的视频播放器有哪些? 关注者 2680 被浏览 981770 ...
- Mac 下如何使用sed -i命令
今天在学习Linux的过程中发现了sed这一项指令 首先,sed的全称是:Stream Editor 调用sed命令有两种形式: sed [options] 'command' file(s) sed ...
- 201521123095 《Java程序设计》第7周学习总结
1. 本章学习总结 **2. 书面作业* 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 该源代码验证该ArrayList中是否包含某个对象,contains的 ...
- 201521123035《Java程序设计》第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123037 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 接口与抽象类 ...
- 201521123050 《Java程序设计》第6周学习总结
1. 本周学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 答:(1)x.clone ...