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的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  4. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  5. css常用属性汇总

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. css常用属性1

    1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...

  8. css常用属性总结：颜色和单位

    在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...

  9. javascript之css常用属性

    1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed :   生成绝对定位的元素,相对于浏览 ...

随机推荐

  1. Spring框架——批处理（batch）和事务（Transaction）

    批处理(batch) 批处理(batch)------------>好比快递员[不能一件一件的送快递] - 批处理指的是一次操作中执行多条SQL语句 - 批处理相比于一次一次执行效率会提高很多 ...

  2. 匿名委托与Lambda表达式

    通过使用匿名委托(匿名方法),使编程变得更加灵活,有关委托与匿名委托请参考我的前一篇Blog<委托与匿名委托>. 继续之前示例,代码如下: static void Main(string[ ...

  3. java选择排序详解

    排序算法--选择排序 public class Selector implements ISortAble{ @Override public void sort(int[] a) { int n=a ...

  4. java异常—检查异常（checked exception）和未检查异常（unchecked exception）

    网易面试要我画异常的结构图,什么是检查异常,什么是非检查异常,我当时的表情是这样的,.我看过,忘了.没办法,继续看,写博客掌握. 先来看看异常的结构图,建议你结合JDK一起看. 可以看出异常的家族势力 ...

  5. STM32经典概述（干货 ）

    STM32经典概述(干货 ) 首先,在学习Cortex-M3时,我们必须要知道必要的缩略语.  在网上看的,觉得挺好的,分享过来了 整理如下: AMBA:先进单片机总线架构   ADK:AMBA设计套 ...

  6. 第一行代码_activity生命周期

    这类文章基本上已经是烂大街了,不过我今天仍然要给自己做一遍梳理,因为通过昨天的项目我发现自己还是不太懂activity的各个生命周期;各位看官勿喷; 七个生命周期及其作用 oncreat 完成初始化操 ...

  7. C++三种野指针及应对／内存泄露

     野指针,也就是指向不可用内存区域的指针.如果对野指针进行操作,将会使程序发生不可预知的错误,甚至可能直接引起崩溃.         野指针不是NULL指针,是指向"垃圾"内存的指 ...

  8. BZOJ 3379: [Usaco2004 Open]Turning in Homework 交作业

    Description     贝茜有C(1≤C≤1000)门科目的作业要上交,之后她要去坐巴士和奶牛同学回家． 每门科目的老师所在的教室排列在一条长为H(1≤H≤1000)的走廊上,他们只在课后接收 ...

  9. java开发3轮技术面+hr面 面经（MT）

    一直没打理博客园  发现博客园阅读量好大,就把前段时间写的一个面经也搬过来咯,大家一起加油.... 作者:小仇Eleven 链接:https://www.nowcoder.com/discuss/37 ...

  10. JavaScript学习日志（一）：变量，作用域和内存问题

    一,变量分为两种类型:基本类型值和引用类型值,基本类型包括:Undefined, String, Boolean, Null, Number,我们无法给基本类型值添加属性: 二,复制变量值的时候,如果 ...