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 : 生成绝对定位的元素,相对于浏览 ...
随机推荐
- 关闭Excel提示文件格式和扩展名不匹配的警告框
打开某些excel表时,Excel会提示: "a.xls"的文件格式和扩展名不匹配.文件可能已损坏或不安全.除非您信任其来源,否则请勿打开.是否仍要打开它? 在编辑大量的xls ...
- 关于aop的两种方式-基于注解和基于aspectj
spring的aop确实好用,能够在不影响业务功能的情况下,实现一些低耦合的功能. 而aop又有两种常用的实现方式,一种是用aspectj表达式去匹配,实现全局的配置,表达式还可以使用与或非符号去连接 ...
- 模仿Spring实现注解注入
写这个极其蛋疼,我一直在想我们用SSM写项目时,写Service和Controller的时候,会给Service和Controller私有属性,比如Service需要dao,Controller需要S ...
- WCF（二）三种通信模式
WCF在通信过程中有三种模式:请求与答复.单向.双工通信 请求与答复模式 客户端发送请求,然后一直等待服务端的响应答复(异步调用除外),期间处于假死状态,直到服务端有了答复后才能继续执行其他程序 请求 ...
- [自制操作系统] 连续页分配释放&kmalloc/kfree
本文将在JOS上实现连续内存.释放,提供内核的kmalloc与kfree,并在分配frambuffer的时候进行测试. Github : https://github.com/He11oLiu/JOS ...
- 关于SCSI/SATA/IDE硬盘的比较
看linux的书时,发现许多地方提到SCSI/SATA/IDE这几种硬盘接口,对这些硬盘的概念和区别感到很模糊.所以特意查了一些资料,基本上算是弄懂了他们的区别. 目前硬盘最要分为3种.也即:IDE. ...
- 对eigrp默认网络的理解！
EIGRP 默认网络设置的个人总结 (了解即可) //该机制同rip和ospf的default-informationoriginate,原理相同,只是配置格式不同. //!!(唯一作用)该命令起到减 ...
- python--用户登录验证
目标要求: 1.最多输入3次用户名密码, 2.如果是被锁用户,则一次即退出程序, 3.如果输入正确的用户名密码,则提示登陆成功,程序结束, 4.3次输入不对,会将用户写入被锁用户列表,当然,该用户名需 ...
- 个人作业2 — 英语学习APP的案例分析
一.调研准备: 1.软件:必应词典 2.平台:安卓 3.bug定义:(引用自<构建之法>13.1节) Bug:软件的缺陷 Bug可以分解为:症状(Symptom). ...
- 201521123024《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 注意conve ...