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. find the Nth highest salary（寻找第N高薪水）

    Suppose that you are given the following simple database table called Employee that has 2 columns na ...

  2. cmder修改默认打开路径

    win + alt + p //打开设置 选择Startup-Task,修改{cmd::Cmder}项,把: *cmd /k "%ConEmuDir%\..\init.bat" - ...

  3. javaSE基础之 ArrayList的底层简单实现

    最近就是想扒一扒存在硬盘里面的学习资料(突然想到什么),把以前写过的一些东西整理一下分享出来. 这边是ArrayList 的简单实现,当然只实现了部分方法 package com.yck.collec ...

  4. Python学习笔记6

    raw_input 与 input 使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 当输入为纯数字时 input返回的是数值类型,如 ...

  5. python 小技巧 防止SSL报错信息

    代码里面 只需要添加如下2行: import ssl ssl._create_default_https_context = ssl._create_unverified_context

  6. 自己动手写java 字节流输入输出流

    数据流是一串连续不断的数据的集合,就象水管里的水流,在水管的一端一点一点地供水,而在水管的另一端看到的是一股连续不断的水流.   "流是磁盘或其它外围设备中存储的数据的源点或终点." ...

  7. 单表ORM框架

    基本描述 1.首先是一个单表的ORM框架,多表连接查询请使用视图或者使用SqlHelper查询,然后转换成实体集合. 2.目前仅完成基本结构和MySQL部分. 3.目前欠缺Lambda表达式解析,所以 ...

  8. SQL Server 的锁定和阻塞

    本帖提供两种做法,可避免在 SQL Server 事务锁定时产生的不正常或长时间阻塞,让用户和程序也无限期等待,甚至引起 connection pooling 连接数超过容量. 所谓的「阻塞」,是指当 ...

  9. 学习js函数--函数定义

    函数的定义方法有三种 1.函数表达式 2.函数声明 3,new function构造函数 这边主要看下函数表达式和函数声明 函数表达式(未省略标志的) var alertName = function ...

  10. Httprequest 获取url 常用方法

    HttpServletRequest常用获取URL的方法         1.request.getRequestURL() 返回的是完整的url,包括Http协议,端口号,servlet名字和映射路 ...