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 : 生成绝对定位的元素,相对于浏览 ...
随机推荐
- Python | 多种编码文件（中文）乱码问题解决
问题线索 1 可以知道的是,文本文件的默认编码并不是utf8. 我们打开一个文本文件,并点击另存为 2 我们在新窗口的编码一栏看到默认编码是ANSI.先不管这个编码是什么编码,但是通过下拉列表我们 ...
- angular验证表单
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>a ...
- java快速排序详解
快速排序 public class QuickSort { public static void main(String[] args) { int[] a = { 0, 3, 6, 8, 2, 4, ...
- 用最简单的方法判断JavaScript中this的指向
目录 * 一个特例 * 开始判断 * 法则一:对象方法中的this指向对象本身(箭头函数形式的除外) * 法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this ...
- [2014-02-19]ConfigurationSection：让web.config配置更有条理
本文针对新手 使用Web.config的配置信息,一般都习惯于使用 ConfigurationManager.AppSettings["ConfigKey"] 当程序不断迭代,开发 ...
- java对象与json对象之间的转换
jar包:import net.sf.json.JSONObject; 1.解析json字符串 将json字符串转换为json对象,然后再解析json对象:.JSONObjectjsonObject ...
- c++ new 的相关
首先是一个链接 这里 说的很详细了 http://www.cnblogs.com/alephsoul-alephsoul/archive/2012/10/17/2728019.html 关于c++ ...
- SQL优化工具
SQL优化工具 什么是索引? 打个比方,我们在使用MySQL用作查询的时候就好比查字典,索引就好比字典的偏旁部首页.如果没有索引我们查询一个文字就需要一页页的翻,显然这种方式效率很低.如果我们对某一字 ...
- java面向对象（二）之继承
继承 介绍 继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性和行为,并能扩展新的能力.继承即常说的is-a关系.子类继承父类的特征和行为,使得子类具有父类的各种属性和方法.或子类从父类继承 ...
- Spring-MVC请求参数值和向页面传值
读取请求参数值 方式一:通过HttpServletRequest req做参数 DispatcherServlet在调用处理的方法之前,利用Java反射分析方法的结构,通过分析,将req对象传过来 方 ...