css基础--常用css属性02

上篇地址：css基础--常用css属性01

本文参考菜鸟教程和w3school

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基础--常用css属性02的更多相关文章

css基础--常用css属性01
1 背景相关背景颜色 background-color = 颜色名称/rgb值/十六进制值背景图片 background-image = url('') 背景图片平铺方式 backgro ...
HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
HTML&CSS基础-标签的属性
HTML&CSS基础-标签的属性作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...
HTML&CSS基础-边框简写属性
HTML&CSS基础-边框简写属性作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...
CSS基础--常用样式
一.背景相关背景颜色 background-color :颜色名称/rgb值/十六进制值背景图片 background-image :url('') 背景图片平铺方式 background-rep ...
CSS基础-行快属性，hover
CSS基础 1.行快属性在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性. 块标签 div,ul,li,ol,h1~h6,p 可 ...
HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
Html+CSS基础之CSS样式
认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ fo ...
一、HTML和CSS基础--HTML+CSS基础课程--第2部分
第三章与浏览器交互,表单标签使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的 ...

随机推荐

js备忘录3
JavaScript也有类型转换 js中的获取指定位数的方法 +和-的转换方向不同在JavaScript中首先给变量赋值数字,然后再给变量赋值字符串是合法的这点和Java有些区别在函数体内声明变 ...
Java-URLEncoder.encode 什么时候才是必须的
当你希望把一段 URL 当成另一个 URL 的参数时,比如:当用户点击交易的按钮时你发现未登录就跳转到 login 页面同时带上一个参数记录在登录之前用户是希望访问的那个交易页面,这样在登录完成之后再 ...
20145214 《网络对抗技术》 MSF基础应用
20145214 <网络对抗技术> MSF基础应用 1.实验后回答问题--用自己的话解释什么是exploit,payload,encode 如果把MSF比作一把枪的话,payload应该是 ...
Task 9 从用户界面和体验分析“360极速浏览器”
我目前使用的浏览器是360极速浏览器,下面将针对用户界面.记住用户选择.短期刺激.长期使用的好处坏处.不要让用户犯简单的错误四个方面对其进行评估: 1.用户界面: 01 可视性原则--网络没有连接或者 ...
linux下使用pip在虚拟环境下安装tensorflow-gpu
1. 查看已安装包库 pip list 2. linux下下载虚拟环境 sudo apt-get install python-virtualenv 3.建立全新的virtualenv环境 virtu ...
vs2010调试-尝试调试dll源码。
第一步: 打开“调试”——“选项和设置”——点击调试下“常规”——设置启用“启用.NET Framework源代码单步执行 ” 第二步选择“符号”——选择Microsoft符号服务器——设置符号缓存 ...
【CSAPP笔记】12. 高速缓存存储器
高速缓存存储器在存储层次结构中,高速缓存存储器,也叫 cache 是最接近 CPU 寄存器的那一块. 更一般而言,缓存(caching)是一个无所不在的技术.缓存的意思是:对于每层的存储设备,位于 ...
BETA-1
前言我们居然又冲刺了·一团队代码管理github 站立会议队名:PMS 530雨勤(组长) 过去两天完成了哪些任务发现之前的代码居然已经有了陌生感,默默地复习一遍并做注释阅读关于基于视频的车 ...
团队作业5-Alpha版本测试报告
1.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? 修复的Bug: a. 修复的bug: 页面打开后比例改变: 出现中文乱码: 点击按钮时不能响应: 导航栏加入显示错误: 上传图片后 ...
第二章 Socket用法详解
构造Socket Socket构造方法如下: Socket() //Creates an unconnected socket, with the system-default type of Soc ...

css基础--常用css属性02

css基础--常用css属性02的更多相关文章

随机推荐

热门专题