day 10 HTML CSS
什么是标签:
● 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
● 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
● 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
● 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
● 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
标签的属性:
● 通常是以键值对形式出现的. 例如 name="alex"
● 属性只能出现在开始标签 或 自闭和标签中.
● 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
● 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
<!DOCTYPE html>标签
head标签：
<meta>meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页 功能。
1 name属性主要用于描述网页，与之对应的属性值为content，content中的内容 主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">
<meta name="description"content="老男孩培训机构是由一个老的男孩创建的">
2 http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有 用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content 中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh"content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面，等待2秒，跳转到URL，)
<meta http-equiv="content-Type"content="text/html;charset=UTF8"> // 全写，声明编码的方式。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>老男孩</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
body标签：
一 基本标签 #块级标签可以内嵌内联标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. # 块级标签
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. # 块级标签
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div>配合css使用，div中可以添加任何样式，一个div中也可以应用多个样式，方便定位和布局 #块级标签
<span>同div标签没有效果 #内联标签
块级标签和内联标签
块级标签：<p><h1><table><ol><ul><form><div> 控制一行
内联标签：<a><input><img><sub><sup><textarea><span> # 随着文本和元素内容变化
<h2 style="background-color: darkorange">hello</h2> # 块级标签
<a style="background-color: gray">wwww</a> # 内联标签
block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素
inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下 :
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
特殊字符：
< > " © ®
二 图形标签: <img> :
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示信息
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
三 超链接标签(锚标签)<a>:
功能一：跳转到指定路径
href:要连接的资源路径 格式如下: href="http://www.baidu.com" ，也可以是本地的HTML文件路径
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
功能二：跳转到当前HTML页面的标签，需要加#号
用于跳转 href : （使用格式：#书签名称）. # 井号和id是对应的，告诉浏览器井号后面的内容是唯一定位一个id的
四 列表标签：
<ul>: 无序列表 Unordered List
<ol>: 有序列表 ordered List
<li>: 列表中的每一项. List Item
<dl> 定义列表 Definition List
<dt> 列表标题 Definition title
<dd> 列表项 Definition Description
五 表格标签: <table>:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 行合并，单元格竖跨多少行
colspan: 列合并，单元格横跨多少列（即合并单元格）
<thead> table head定义表格的标题
<tr>: table row 定义表格的行
<th>: table head cell 定义表格的标题
<td>: table data cell 定义表格单元
<tbody> table body 定义表格的主体部分
<th>: table header <tbody>(不常用): 为表格进行分区.
六 表单标签（django）<form>:
表单用于向服务器传输数据，要提交的数据必须写在form表单中，才会向服务器提交。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label 元素。
1.表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
enctype="multipart/form-data"：type="file" 时，上传文件要分段传输，要声明此项
method: 表单的提交方式 post/get 默认取值 就是 get（信封）
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
2.表单元素
<input> type: text 文本输入框 # input是内联标签 input标签必须包含在form表单之中，才能提交成功，是最重要的表单标签
password 密码输入框
radio 单选框 # name属性相同（设置使之相同）时，具有互斥性，只能选中一个
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别？
1 <input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。 2 <input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。 3 <button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称(前端专用)，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
value: 表单提交项的值.
对于不同的输入类型，value 属性的用法也不同：
○ type="button", "reset", "submit" - 定义按钮上的显示的文本
○ type="text", "password", "hidden" - 定义输入字段的默认初始值
例：<p>用户名:<input type="text" name="query" value="whisky"></p>
○ type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
<select> （属于input中的一个类型，和text，button，checkbox一个级别）下拉选标签属性：
name:表单提交项的键.
size：显示的选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中 selectedIndex:默认当前选中的索引，可以取值、赋值
<optgroup>为每一项加上分组
<textarea> 文本域，多行输入 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行
checkbox应用举例demo：
前台传过来的值后台要用get_arguments来取，取到一个列表, 如果用户名有勾选，则返回空列表
1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 4 import tornado.ioloop 5 import tornado.web 6 import re 7 8 9 class IndexHandler(tornado.web.RequestHandler): 10 def get(self): 11 self.render('home.html') 12 13 def post(self, *args, **kwargs): 14 val = self.get_arguments('favor') # 注意checkbox必须用get_arguments，加s的参数 15 print(val) # 输出 ['2', '3'] 16 17 18 settings = { 19 'template_path': 'views', 20 'static_path': 'statics', 21 'static_url_prefix': '/statics/' 22 } 23 24 application = tornado.web.Application([ 25 (r"/home", IndexHandler), 26 ], **settings) 27 28 if __name__ == "__main__": 29 application.listen(8001) 30 tornado.ioloop.IOLoop.instance().start()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="/home" method="POST"> 9 <input type="text" name="ip" placeholder="ip" /> 10 <input type="text" name="host" placeholder="host" /> 11 <p> 12 <input type="checkbox" name="favor" value="1" />篮球； 13 <input type="checkbox" name="favor" value="2" />足球； 14 <input type="checkbox" name="favor" value="3" />羽毛球； 15 </p> 16 17 <input type="submit" /> 18 </form> 19 </body> 20 </html>
两个了解的标签（和select是并列，同一级别的标签 ）：
<label>标签：
<label for="www">姓名</label> # 把文本和input标签做了一个关联，点击姓名标签，光标会自动在输入框中显示
<input id="www" type="text">
<fieldset>标签：
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>
附录：HTML标签中英文对照
|
<a> anchor 定义锚
<abbr> abbreviation 定义缩写
<acronym> 定义只取消首字母的缩写
<address> 定义地址元素
<area> 定义图像映射内部的区域
<b> bold 定义粗体字
<base> 定义页面当中的所有链接的基准链接
<bdo> bidirectional override 定义文字的显示方向
<big> 定义大号字
<blockquote> 定义长的引用
<body> 定义body元素
<br> break 插入一个回车
<button> 定义按钮
<caption> 定义表格标题
<cite> citation 定义引用
<code> computer code 定义计算机代码文本
<col> column 定义用于表格列的属性
<colgroup> column group 定义表格的列祖
<dd> definition description 定义定义的描述
<del> delete 定义被删除的文本
<div> division 定义文档中的节
<dfn> defining instance 定义定义的项目。
<dl> definition list 定义定义列表
<dt> definition term 定义定义的项目
<em> emphasized 定义强调文本
<fieldset> 定义域结构
<form> 定义表单
<frame> 定义框架的子窗口
<frameset> 定义框架集
<h1>to<h6> 定义标题1到标题6
<head> 定义关于文档的信息
<hr> horizontal 定义水平线
<html> hypertext markup language 定义html文档
<i> italic 定义斜体字
<iframe> inline frame 定义内联框架
<img> image 定义图像
<input> 定义输入域
<ins> inserted 定义被插入的文本
<kbd> keyboard 定义键盘文本
<label> 定义针对表单控件的标签
<legend> 定义框架集的标题
<li> list item 定义列表的项目
<link> 定义资源引用
<map> 定义图像映射
<meta> 定义元信息
<noframe> 定义无框架的节
<noscript> 定义无脚本的节
<object> 定义内嵌对象
<ol> ordered list 定义有序列表
<optgroup> option group 定义选项组
<option> 定义下拉列表的选项
<p> paragraph 定义段落
<param> 定义对象的参数
<pre> preformatted 定义预格式文本
<q> quotation 定义短的引用
<samp> sample 定义计算机代码样本
<script> 定义脚本
<select> 定义选择列表
<small> 定义小字体文本
<span> 定义文档中的节
<strong> stronger empasis定义强调文本
<style> 定义样式的定义
<sub> subscript 定义下标文本
<sup> superscript 定义上标文本
<table> 定义表格
<tbody> table body 定义表格的主体部分
<td> table data cell定义表格单元
<textarea> 定义文本区域
<tfoot> table foot定义表也的脚注
<th> table header cell定义表格的表头单元格
<thead> table head定义表格的标题
<title> 定义文档的标题
<tr> table row定义表格的行
<tt> teletype 定义打字机文本
<ul> unordered list 定义无序列表
<var> variable 定义变量
CSS：
CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。
一 css的四种引入方式
1.行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
<style type="text/css">
...此处写CSS样式
</style>
</head>
3.导入式 (import 方式有引入文件数量限制，link没有)
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
4.链接式，优于导入式
也是将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
1 rel是relationship的英文缩写 2 stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思 3 rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表
二 css的选择器（Selector）
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
1 基础选择器：
＊ ： 通用元素选择器，匹配任何元素 ，对所有标签进行操作 * { margin:0; padding:0; }
E ： 标签选择器，匹配所有使用E标签的元素p { color:green; }
.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
注意：id是唯一的，class是可重复的
练习：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /**{*/ 8 /*!*通用元素选择器*!*/ 9 /*background-color: lavender;*/ 10 /*color:red;*/ 11 /*font-size: 12px;*/ 12 /*}*/ 13 p{ 14 /*标签选择器*/ 15 /*color:yellowgreen;*/ 16 font-size: 50px; 17 } 18 19 #ssww{ 20 /*id选择器*/ 21 background-color: lavender; 22 color:red; 23 font-size: 12px; 24 } 25 26 .rr{ 27 /*class选择器*/ 28 font-size: 140px; 29 } 30 31 div.rr{ 32 /*class选择器*/ 33 font-size: 30px; 34 color: rebeccapurple; 35 } 36 37 38 </style> 39 </head> 40 <body> 41 42 <a>alex</a> 43 <p>ssssssss</p> 44 <p id="ssww">ssssssss</p> 45 <div>ooooo</div> 46 <p class="rr">ttttt</p> 47 <div class="rr">ttttt</div> 48 49 50 </body> 51 </html>
2 组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 Div,p { color:#f00; }
E F 后代元素选择器（所有的后代儿子孙子都包含），匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }
E > F 子元素选择器，只匹配所有E元素的子元素（不包括孙子元素） div > strong { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F（以及同级元素的子元素） p + p { color:#f00; }
注意：p标签不能嵌套块标签，例：p标签不能嵌套div标签
练习代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 9 /*div,p{*/ 10 /*!*多元素选择器,哪个标签有就渲染哪个*!*/ 11 /*font-size: 20px;*/ 12 /*color:red;*/ 13 14 /*}*/ 15 16 /*div p{*/ 17 /*!*后代元素选择器*!*/ 18 /*font-size: 30px;*/ 19 /*color: pink;*/ 20 /*}*/ 21 22 /*div>p{*/ 23 /*!*子元素选择器*!*/ 24 /*font-size: 30px;*/ 25 /*color: pink;*/ 26 /*}*/ 27 28 /*.r1>div{*/ 29 /*!*子元素选择器*!*/ 30 /*font-size: 30px;*/ 31 /*color: pink;*/ 32 /*}*/ 33 34 .r2+div{ 35 /*毗邻元素选择器,匹配所有紧随.r2元素之后的同级元素F */ 36 font-size: 30px; 37 color: pink; 38 } 39 40 </style> 41 </head> 42 <body> 43 44 <!--<a>alex</a>--> 45 <!--<p>ssssssss</p>--> 46 <!--<p id="ssww">ssssssss</p>--> 47 <!--<div>ooooo</div>--> 48 <p class="rr">ttttt</p> 49 50 <div class="r1">hello1 51 <div class="r2">hello2 52 <p>hello4</p> 53 </div> 54 <div>hello3 55 <p>AAAAA</p></div> 56 </div> 57 </body> 58 </html>
注意嵌套规则：
1.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
2.块级元素不能放在p里面。
3.有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
4.li内可以包含div
5.块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）
3 属性选择器
E[att] 匹配所有具有att属性的E标签元素，不考虑它的值。
（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，实际应用范围很窄，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
before和after，可以是p标签也可以是div等等其他标签
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 [ym="girl"]{ 8 font-size: 50px; 9 color: pink; 10 } 11 12 div:before{ 13 content: "start"; 14 background: green; 15 color: red; 16 } 17 div:after{ 18 content: "end"; 19 color: red; 20 } 21 </style> 22 </head> 23 <body> 24 25 <div ym="boy girl">whisky</div> 26 </body> 27 </html>
4 伪类选择器（顺序固定，否则会有冲突）：
伪类选择器： 专用于控制链接的显示效果，伪类选择器：
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <style type="text/css"> 5 a:link{ 6 color: red; 7 } 8 a:visited { 9 color: blue; 10 } 11 a:hover { 12 color: green; 13 } 14 a:active { 15 color: yellow; 16 } 17 </style> 18 </head> 19 <body> 20 <a href="http://www.baidu.com" target="_blank">www.baidu.com</a> 21 </body> 22 </html>
CSS 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
1 <p class="important warning"> 2 This paragraph is a very important warning. 3 </p>
这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
1 .important {font-weight:bold;} 2 .warning {font-style:italic;} 3 .important.warning {background:silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
三 CSS的常用属性
1 颜色属性：
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div> # rgb三原色
<div style="color:rgba(255,0,0,0.5)">ppppp</div> # a代表透明度
2 字体属性：
font-size: 20px/50%/larger
font-family:'Lucida Bright' # 字体
font-weight: lighter/bold/border/ # 字体粗细程度
<h1 style="font-style: oblique">老男孩</h1> # 字体倾斜
3 背景属性：
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;背景图片仅显示一次
background-repeat：repeat 默认属性，在水平和垂直方向平铺满
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意：如果讲背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个
width＝100px，你也看不出效果，除非你设置出html。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 html{ 8 background-color: antiquewhite; 9 10 } 11 body{ 12 height: 800px; 13 /*background-color: deeppink;*/ 14 /*background-image: url(1.jpg);*/ 15 /*background-repeat: no-repeat;*/ 16 /*background-position: center center;*/ 17 /*上面四行可简写为下面一行*/ 18 background: red url("1.jpg") no-repeat center; 19 } 20 </style> 21 </head> 22 <body> 23 <div></div> 24 25 </body> 26 </html>
4 文本属性：
font-size: 10px;
text-align: center;横向排列 # align 排列;成一条线
line-height: 200px;文本行高 通俗的讲，就是文字高度加上文字上下的空白区域的高度（相当于背景高度）， 50%:基于字体大小的百分比，作用：将文本内容居中
p
{ width: 200px;
height: 200px;
text-align: center;
background-color: aquamarine;
line-height: 200px; }
text-indent: 150px; # 首行缩进，50%：基于父元素（weight）的百分比
letter-spacing: 10px; # 每个字母之的距离
word-spacing: 20px; # 单词之间的距离
direction: rtl;
text-transform: capitalize; # 首字母大写
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 word-break: break-all; 9 background-color: aqua; 10 /*height: 50px;*/ 11 font-size: 40px; 12 /*text-align: center;*/ 13 /*line-height: 20px;*/ 14 text-indent: 30px; 15 } 16 </style> 17 </head> 18 <body> 19 <div>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div> 20 </body> 21 </html>
5 边框属性：
border-style: solid; # solid 实心的 ，添加实线边框
border-color: chartreuse;
border-width: 20px;
简写为一句代码：border: 30px rebeccapurple solid;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 background: rebeccapurple; 9 height: 300px; 10 width: 300px; 11 border: solid 6px red; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 18 </div> 19 </body> 20 </html>
6 列表属性
ul,ol{ list-style: decimal-leading-zero; # 列表前加数字
list-style: none; list-style: circle; # none去掉列表实心圆点 circle 空心圆
list-style: upper-alpha;
list-style: disc; }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 ul{ 9 /*none去掉列表实心圆点*/ 10 list-style: circle; 11 } 12 13 </style> 14 </head> 15 <body> 16 17 <ul> 18 <li>111</li> 19 <li>222</li> 20 <li>333</li> 21 </ul> 22 23 </body> 24 </html>
7 dispaly属性 # 内联标签，块级标签互转
none #隐藏加入的样式 非常非常常用，轮播图原理 bxslider插件原理
block # 块级标签
inline # 内联标签
1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。
2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。
3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 background-color: red; 9 display: inline; 10 } 11 span{ 12 background-color: aqua; 13 display: block; 14 } 15 16 </style> 17 </head> 18 <body> 19 20 <p>123</p> 21 <span>whisky</span> 22 23 </body> 24 </html>
display:inline-block是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
1 display:block就是将元素显示为块级元素. 2 3 block元素的特点是： 4 总是在新行上开始； 5 高度，行高以及顶和底边距都可控制； 6 宽度缺省是它的容器的100%，除非设定一个宽度 7 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。 8 9 display:inline就是将元素显示为行内元素. 10 11 inline元素的特点是： 12 和其他元素都在一行上； 13 高，行高及顶和底边距不可改变； 14 宽度就是它的文字或图片的宽度，不可改变。 15 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。 16 17 inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下： 18 19 让一个inline元素从新行开始； 20 让块元素和其他元素保持在一行上； 21 控制inline元素的宽度（对导航条特别有用）； 22 控制inline元素的高度； 23 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 24 25 display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 26 27 inline-block的元素特点： 28 29 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) 30 31 并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
CSS display:inline-block的应用
https://www.cnblogs.com/lrzw32/p/4927570.html
8 盒子模型
padding:用于控制内容与边框之间的距离，即content和border之间的距离；
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
内边距会影响盒子的大小，外边距不会影响盒子的大小,需要设置 练习： 300px*300px的盒子装着100px*100px的盒子，分别通过margin和padding设置将小盒 子 移到大盒子的中间
通过内层盒子的margin来设置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 border: 1px solid transparent; 9 /*让body和HTML之间的距离为0*/ 10 margin: 0; 11 } 12 .div1{ 13 background-color: aqua; 14 width: 300px; 15 height: 300px; 16 /*外层必须有边界border属性，内层盒子才能找到边界，他的margin属性才能真正显示正常*/ 17 border: 1px solid transparent; 18 } 19 .div2{ 20 background-color: blueviolet; 21 width: 100px; 22 height: 100px; 23 margin: 100px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="div1"> 29 <div class="div2"></div> 30 </div> 31 </body> 32 </html>
通过外层盒子的padding来设置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 border: 1px solid transparent; 9 /*让body和HTML之间的距离为0*/ 10 margin: 0; 11 } 12 .div1{ 13 background-color: aqua; 14 width: 100px; 15 height: 100px; 16 /*下面padding的作用：在原来外层盒子的基础上，上下左右都扩张了100px*/ 17 padding: 100px; 18 } 19 .div2{ 20 background-color: blueviolet; 21 width: 100px; 22 height: 100px; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="div1"> 28 <div class="div2"></div> 29 </div> 30 </body> 31 </html>
注意1：
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上
body{
border: 1px solid;
background-color: cadetblue;
}
>>>>解决方法：
body{
margin: 0;
}
注意2：margin collapse（边界塌陷或者说边界重叠）
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场
1兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2父子div
if 父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content 中的其中一个，然后按此div 进行margin ；
解决方法：
1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden;
练习代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 border: 1px solid transparent; 9 /*让body和HTML之间的距离为0*/ 10 margin: 0; 11 } 12 .outer{ 13 background-color: aqua; 14 width: 600px; 15 height: 600px; 16 /*小盒子找边界的依据：大盒子有没有边界(没有文本、padding、border等属性)，注释掉border属性：*/ 17 /*border: 1px solid transparent;*/ 18 } 19 .inner{ 20 /*inner无法在outer中确定边界（因为注释了outer中的border属性，如果加上border属性则为边界），向上找到html层为边界*/ 21 background-color: blueviolet; 22 width: 100px; 23 height: 100px; 24 margin: 20px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="outer"> 30 <div class="inner"></div> 31 <div class="inner"></div> 32 </div> 33 </body> 34 </html>
9 float
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。
可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。注意，以上这些理论，是指标准流中的div。
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：
从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了
这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。
如果我们把div2采用右浮动，会是如下效果：
此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。
目前为止我们只浮动了一个div元素，多个呢？
下面我们把div2和div3都加上左浮动，效果如图：
同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。
咳咳，到重点了，当同时对div2、div3设置浮动之后，div3会跟随在div2之后，不知道读者有没有发现，一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
为了帮助理解，再举几个例子。
假如我们把div2、div3、div4都设置成左浮动，效果如下：
根据上边的结论，跟着小菜理解一遍：先从div4开始分析，它发现上边的元素div3是浮动的，所以div4会跟随在div3之后；div3发现上边的元素div2也是浮动的，所以div3会跟随在div2之后；而div2发现上边的元素div1是标准流中的元素，因此div2的相对垂直位置不变，顶部仍然和div1元素的底部对齐。由于是左浮动，左边靠近页面边缘，所以左边是前，因此div2在最左边。
假如把div2、div3、div4都设置成右浮动，效果如下：
道理和左浮动基本一样，只不过需要注意一下前后对应关系。由于是右浮动，因此右边靠近页面边缘，所以右边是前，因此div2在最右边。
假如我们把div2、div4左浮动，效果图如下：
依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。
至此，恭喜读者已经掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。
经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
清除浮动可以理解为打破横向排列。
清除浮动的关键字是clear，官方定义如下：
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
定义非常容易理解，但是读者实际使用时可能会发现不是这么回事。
定义没有错，只不过它描述的太模糊，让我们不知所措。
根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：
此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。
这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。
其实这种理解是不正确的，这样做没有任何效果。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。
根据小菜定论，要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。
那么假如页面中只有两个元素div1、div2，它们都是右浮动呢？读者此时应该已经能自己推测场景，如下：
此时如果要让div2下移到div1下边，要如何做呢？
同样根据小菜定论，我们希望移动的是div2，就必须在div2的CSS样式中调用浮动，因为浮动只能影响调用它的元素。
可以看出div2的右边有一个浮动元素div1，那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素，这样div2就被迫下移一行，排到div1下边。
练习代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .d1{ 11 background: red; 12 height: 50px; 13 width: 100px; 14 } 15 16 .d2{ 17 background: greenyellow; 18 height: 30px; 19 width: 600px; 20 float:left; 21 } 22 23 .d3{ 24 background: black; 25 height: 100px; 26 width: 200px; 27 float: left; 28 clear: left; 29 } 30 31 .d4{ 32 background: blue; 33 height: 200px; 34 width: 120px; 35 float:left; 36 clear: left; 37 } 38 39 /*.father{*/ 40 /*position: relative;*/ 41 /*}*/ 42 </style> 43 </head> 44 <body> 45 <div class="father"> 46 <div class="d1"></div> 47 <div class="d2"></div> 48 <div class="d3"></div> 49 <div class="d4"></div> 50 </div> 51 52 53 </body> 54 </html>
浮动对象小结:
1. 脱离文档流
2. 不管设置的对象是向左还是向右浮动，它都要找到上一个标签，看上一个标签是否为浮动对象，如果是浮动对象，则紧贴上一个标签；如果不是浮动对象，则
直接找到上一个标签的末尾，对于块级标签，末尾就是另起一行来浮动
3. clear：他只控制自己的标签，只能控制使用了clear的对象，而不能控制其它的对象
10 position：
1 static，默认值 static：无特殊定位，对象遵循正常文档流。
top，right，bottom，left等属性不 会被应用。 说到这里我们不得不提一下一个定义——文档流，文档流其实就是文档的输出顺序， 也就是我们通常看到的由左 到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就 是让元素继续按照文档流显示，不作出任何改变。
2 position:relative
relative：对象遵循正常文档流，但将依据top（距离上面多少像素），right（距离右面多少像素），bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 如果设定 position:relative，就可以使用 top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档 中的原有位置，只是视觉上相对于它在文档中的原有位置移动了] 当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]，可以准确的按照设置的 top,bottom,left 和 right 来定位了。 如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素， 一直找到html为止。
一句话：子绝父相
3 position:fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。因为这是两个不同的流，一个是浮动流， 另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
1 <!-- 需求：根据元素自身定位，并且脱离文档流(位置变化后原来的位置不保留),位置变化根据父级标签的定位变化--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .d1{ 12 background: red; 13 height: 50px; 14 width: 100px; 15 position: absolute; 16 top: 50px; 17 } 18 19 .d2{ 20 background: greenyellow; 21 height: 30px; 22 width: 60px; 23 } 24 .d3{ 25 background: black; 26 height: 100px; 27 width: 200px; 28 } 29 .d4{ 30 background: blue; 31 height: 1000px; 32 width: 120px; 33 } 34 /*.father{*/ 35 /*position: relative;*/ 36 /*top: 20px;*/ 37 /*}*/ 38 /*.d5{*/ 39 /*background: pink;*/ 40 /*width: 600px;*/ 41 /*height: 500px;*/ 42 /*}*/ 43 </style> 44 </head> 45 <body> 46 <div class="d5"></div> 47 <div class="father"> 48 <div class="d1"></div> 49 <div class="d2"></div> 50 <div class="d3"></div> 51 <div class="d4"></div> 52 </div> 53 54 55 </body> 56 </html>
小结：
1. relative不脱离文档流，位置变化后保留原来的位置，且位置变化根据之前对象所在的位置变化
2. absolute 脱离文档流，位置变化后原来的位置不保留，位置变化根据父级标签的定位变化
fixed：定位之后，即使滚动滑轮，在窗口的位置依然不变，元素跟随滑轮移动
absolute：定位之后，滚动滑轮，元素仍在初始定位的位置，不再跟随滑轮
relative：单独使用无意义
一般用法：
外层标签使用relative，内层标签absolute，
relative和absolute搭配使用。且absolute定位是根据父标签的relative来定位的，如果父标签没有relative属性，则根据body定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .pg-header{ 11 background-color: #2459a2; 12 height: 44px; 13 } 14 .w{ 15 width: 1200px; 16 /*让div居中的常用方法*/ 17 margin: 0 auto; 18 } 19 ul{ 20 list-style: none; 21 margin: 0; 22 } 23 ul li{ 24 /*一般来讲，从左到右的布局都用float*/ 25 float: left; 26 } 27 .pg-header .logo{ 28 float: left; 29 margin-top: 11px; 30 } 31 .pg-header .menu{ 32 float: left; 33 line-height: 44px; 34 font-size: 12px; 35 } 36 .pg-header .menu ul li:hover{ 37 color: #fff; 38 background-color: #204982; 39 } 40 .pg-header .w .menu ul li a{ 41 color: white; 42 padding: 0 20px; 43 /*margin: 20px;*/ 44 text-decoration: none; 45 } 46 .pg-header .account{ 47 float: right; 48 font-size: 12px; 49 } 50 .pg-header .account ul li a{ 51 line-height: 44px; 52 color: white; 53 text-decoration: none; 54 /*margin: 20px;*/ 55 padding: 13px 20px; 56 57 } 58 .pg-header .account ul li a:hover{ 59 /*background-color: #204982;*/ 60 background-color: cornflowerblue; 61 } 62 63 .pg-header .search{ 64 float: right; 65 } 66 67 .pg-body{ 68 /*height: 500px;*/ 69 background-color: #ededed; 70 } 71 .pg-body .l-body{ 72 /*padding: 6px 28px 60px;*/ 73 /*background-color: #fff;*/ 74 width: 800px; 75 float: left; 76 /*background-color: white;*/ 77 } 78 .pg-body .r-body { 79 width: 400px; 80 float: left; 81 /*background-color: white;*/ 82 } 83 .pg-body .test{ 84 background-color: white; 85 } 86 87 88 .pg-footer{ 89 background-color: green; 90 } 91 92 </style> 93 </head> 94 95 <body> 96 <div class="pg-header"> 97 <div class="w"> 98 <div class="logo"> 99 <img src="http://dig.chouti.com/images/logo.png"> 100 </div> 101 <div class="menu"> 102 <ul> 103 <li><a href="http://dig.chouti.com/all/hot/recent/1">全部</a></li> 104 <li><a href="http://dig.chouti.com/all/hot/recent/1">42区</a></li> 105 <li><a href="http://dig.chouti.com/all/hot/recent/1">段子</a></li> 106 <li><a href="http://dig.chouti.com/all/hot/recent/1">图片</a></li> 107 </ul> 108 </div> 109 <div class="search"> 110 <input type="text"/> 111 </div> 112 <div class="account"> 113 <ul> 114 <li><a href="http://dig.chouti.com/all/hot/recent/1">注册</a></li> 115 <li><a href="http://dig.chouti.com/all/hot/recent/1">登录</a></li> 116 </ul> 117 </div> 118 </div> 119 </div> 120 121 <div class="pg-body"> 122 <!--一个div加多个样式--> 123 <div class="w test"> 124 <div class="l-body">左侧 125 <p>1</p> 126 <p>1</p> 127 <p>1</p> 128 <p>1</p> 129 <p>1</p> 130 <p>1</p> 131 <p>1</p> 132 <p>1</p> 133 <p>1</p> 134 <p>1</p> 135 <p>1</p> 136 <p>1</p> 137 <p>1</p> 138 <p>1</p> 139 <p>1</p> 140 <p>1</p> 141 <p>1</p> 142 </div> 143 <div class="r-body">右侧 144 <p>1</p> 145 <p>1</p> 146 <p>1</p> 147 <p>1</p> 148 <p>1</p> 149 <p>1</p> 150 <p>1</p> 151 </div> 152 <div style="clear: both">2222222222222222</div> 153 </div> 154 </div> 155 <div class="pg-footer"> 156 <div class="w"> 157 <p style="display: inline">aaa</p> 158 aaa 159 </div> 160 </div> 161 </body> 162 </html> 163 164 165 <!--最常用的标签就是div+css，其他标签都是辅助-->
html,css知识点补充：
写HTML步骤：
<!--最常用的标签就是div+css，其他标签都是辅助-->
大多数网站页面分为3个部分，顶部菜单、中间内容、底部内容,对应3个标签
<div></div> 头部内容
<div></div> 中间内容
<div></div> 底部内容
1.
/*让div居中的常用方法*/
先设置一个宽度盒子：width: 980px;
margin: 0 auto; auto表示自动两侧距离相同，
2.
line-height:可用于将文本、文字内容居中：
前提：设置外层标签（大盒子）的高度和line-height高度相同
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 <div style="height: 50px; background-color: red; line-height: 50px;">文字居中</div> 12 </body> 13 </html>
3.background-position参数说明：
移动 孔洞 后面图片的位置，以便于显示不同的图标
简写：
0和 -58px分别代表x，y轴的位置
注意：
ul标签自己有一个固定样式：margin-top
padding参数：
padding: 0 20px; 表示上下为0 左右20
padding-top: 0; 顺时针记忆：上0 右20 下0 左20
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
4.z-index 参数
z-index ： 两个同一位置重叠的元素，z-index的值大的在上面
应用：登录窗口弹出到最上面一层
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="position: fixed;left: 100px;right:0;height: 100px;background-color: red;z-index:2"></div> 9 <div style="position: fixed;left: 0;right:0;height: 80px;background-color: green;z-index: 1"></div> 10 </body> 11 </html>
5.公共样式和私有样式：不推荐写公共样式（容易发生样式重复定义，覆盖），要写私有样式（即样式的多层包含，全路径），这样样式不容易重叠，对于公共插件，不需要写多层的包含，只需要写在最外层就可以了，即写一个公共样式
6.一个元素标签被float之后，则他的父标签没有高度了
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c{ 8 background-color: red; 9 } 10 .c .item{ 11 float:left; 12 width: 30px; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="c"> 18 <div class="item">123</div> 19 <div class="item">456</div> 20 </div> 21 </body> 22 </html>
方法1：style="clear: both"
<body>
<div class="c">
<div class="item">123</div>
<div class="item">456</div>
<div style="clear: both"></div>
</div>
</body>
方法2：利用after和公共样式完成
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c, .d, .e{ 8 background-color: red; 9 } 10 .c .item, .d .item, .e .item{ 11 float: left; 12 width: 30px; 13 height: 70px; 14 background-color: green; 15 } 16 /*公共样式，作用相当于clear：both。即：在div下面再增加一个标签，把父标签拽起来，拉起来父标签的高度*/ 17 .clear:after{ 18 content: '111'; 19 display: block; 20 clear: both; 21 visibility: hidden; 22 height:0; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="c clear"> 28 <div class="item">123</div> 29 <div class="item">456</div> 30 <!--<div style="clear: both"></div>--> 31 </div> 32 33 <div class="d clear"> 34 <div class="item">123</div> 35 <div class="item">456</div> 36 <!--<div style="clear: both"></div>--> 37 </div> 38 39 <div class="e clear"> 40 <div class="item">123</div> 41 <div class="item">456</div> 42 <!--<div style="clear: both"></div>--> 43 </div> 44 45 </body> 46 </html>
注意：隐藏标签的几种方式
display：none 隐藏且不占高度
visibility：hidden； 隐藏占高度
7.hover的应用：
1）hover后加选择器，hover的同时，让hover的内容同时也有想要的变化，如变色：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .ele{ 8 background-color: #8a8a8a; 9 /*先设置好边框，鼠标移动上去hover的效果更自然平滑*/ 10 /*border: 2px solid transparent;*/ 11 } 12 .ele:hover{ 13 border: 12px solid red; 14 } 15 .ele:hover .ele-item{ 16 color: red; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="ele"> 22 <div>123</div> 23 <div class="ele-item">123</div> 24 25 </div> 26 </body> 27 </html>
2）对于一张图片，当鼠标悬停时，在图片上层显示其他内容，涉及的知识点：overflow hover position（absolute relative）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .touch{ 8 width: 200px; 9 height: 200px; 10 overflow: hidden; 11 position: relative; 12 } 13 .touch .content{ 14 position: absolute; 15 top: 0; 16 left:0; 17 right:0; 18 bottom: 0; 19 background-color: #8a8a8a; 20 /*透明度*/ 21 opacity: 0.6; 22 text-align: center; 23 visibility: hidden; 24 } 25 .touch .content .c1{ 26 font-size:32px; 27 padding: 30px 0; 28 } 29 .touch:hover .content{ 30 visibility: visible; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="touch"> 36 <div><img src="1.png"></div> 37 <div class="content"> 38 <div class="c1">WHISKY</div> 39 <div class="c2">1000-5000</div> 40 </div> 41 </div> 42 </body> 43 </html>
8.position：
fixed：单独使用， 固定在整个屏幕的某个位置, 应用：页面中的返回顶部按钮
relative和absolute搭配使用。且absolute定位是根据父标签的relative来定位的，如果父标签没有relative属性，则根据body定位
示例代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="height: 2000px; background-color: gray;"> 9 <div style="background-color: green; width: 150px; height: 150px; margin: 0 auto;position: relative;"> 10 <!--利用position,在大绿框中放置一个小粉框--> 11 <div style="background-color: pink;width: 50px;height: 50px;position: absolute; left: 0;bottom: 0;"></div> 12 </div> 13 14 </div> 15 <!--模仿页面中右下角返回顶部按钮--> 16 <div style="position: fixed;right: 10px; bottom: 10px; width: 140px; height: 140px; background-color: pink"></div> 17 </body> 18 </html>
9.通过border相互覆盖的特性实现尖角图标
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .up{ 8 border-top:30px solid transparent; 9 border-right: 30px solid transparent; 10 border-bottom: 30px solid green; 11 border-left: 30px solid transparent; 12 display: inline-block; 13 } 14 .down{ 15 border-top:30px solid green; 16 border-right: 30px solid transparent; 17 border-bottom: 30px solid transparent; 18 border-left: 30px solid transparent; 19 display: inline-block; 20 } 21 .c1{ 22 border:30px solid transparent; 23 display: inline-block; 24 border-top:30px solid green; 25 } 26 .c1:hover{ 27 border:30px solid transparent; 28 border-bottom:30px solid green; 29 margin-top: -30px; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="up"></div> 35 <div class="down"></div> 36 <div style="height: 50px; background-color: red"> 37 <div class="c1"> 38 </div> 39 </div> 40 </body> 41 </html>
注意：display：inline-block ，不允许margin-top为负值，没有效果，inline属性可以让margin-top为负值。
10.图标
可以用font awesome插件来完成小图标
http://fontawesome.io/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.css"/> 7 </head> 8 <body> 9 <div class="fa fa-cut"></div> 10 </body> 11 </html>
11.目录规范：
- app
- s1.html
- s2.html
- css # 公共样式
- commons.css
- script
- commons.js
- plugin # 插件
- bootstrap
- bxslider
- ...
12. img标签默认自带边框，IE浏览器会显示出来,解决在style中设置img{ border:0 }
13.样式加载顺序：就近原则，最后写的样式属性，覆盖前面的相同的样式属性，但是当有参数 important时, 加了important的属性最终生效：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c2{ 8 /*当有参数 important时, 加了important的属性最终生效：*/ 9 color: pink !important; 10 } 11 .c1{ 12 color: green; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="c1 c2">666</div> 18 </body> 19 </html>
应用：当需要修改别人的代码时，想让自己写的某个属性永远生效，需要加important
实例：
1.管理后台的页面：
利用overflow实现内容下拉滚动，菜单固定的布局例子：（菜单同理也可以实现滚动）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin:0; 9 } 10 .pg-header{ 11 height: 48px; 12 background-color: #dddddd; 13 } 14 .pg-body .body-menu{ 15 position: absolute; 16 width: 180px; 17 background-color: antiquewhite; 18 left: 0; 19 } 20 .pg-body .body-content{ 21 position: absolute; 22 top: 48px; 23 left: 182px; 24 right: 0; 25 bottom: 0; 26 background-color: blueviolet; 27 overflow: auto; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="pg-header">whisky supervisor system</div> 33 <div class="pg-body"> 34 <div class="body-menu"> 35 <ul> 36 <li>11</li> 37 <li>11</li> 38 <li>11</li> 39 <li>11</li> 40 <li>11</li> 41 <li>11</li> 42 <li>11</li> 43 <li>11</li> 44 <li>11</li> 45 <li>11</li> 46 <li>11</li> 47 <li>11</li> 48 <li>11</li> 49 <li>11</li> 50 <li>11</li> 51 <li>11</li> 52 <li>11</li> 53 <li>11</li> 54 <li>11</li> 55 </ul> 56 </div> 57 <div class="body-content"> 58 <h1>123</h1><h1>123</h1> 59 <h1>123</h1><h1>123</h1> 60 <h1>123</h1><h1>123</h1> 61 <h1>123</h1><h1>123</h1> 62 <h1>123</h1><h1>123</h1> 63 <h1>123</h1><h1>123</h1> 64 <h1>123</h1><h1>123</h1> 65 <h1>123</h1><h1>123</h1> 66 <h1>123</h1><h1>123</h1> 67 <h1>123</h1><h1>123</h1> 68 <h1>123</h1><h1>123</h1> 69 <h1>123</h1><h1>123</h1> 70 <h1>123</h1><h1>123</h1> 71 <h1>123</h1> 72 <h1>123</h1><h1>123</h1> 73 <h1>123</h1><h1>123</h1> 74 <h1>123</h1><h1>123</h1> 75 </div> 76 </div> 77 </body> 78 </html>
布局方式二：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin:0; 9 } 10 .pg-header{ 11 height: 48px; 12 background-color: #dddddd; 13 } 14 .pg-body .body-menu{ 15 position: absolute; 16 width: 180px; 17 background-color: antiquewhite; 18 left: 0; 19 } 20 .pg-body .body-content{ 21 position: absolute; 22 top: 48px; 23 left: 182px; 24 right: 0; 25 bottom: 0; 26 background-color: blueviolet; 27 /*可以注释overflow实现两种不同的布局方式*/ 28 overflow: auto; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="pg-header">whisky supervisor system</div> 34 <div class="pg-body"> 35 <div class="body-menu"> 36 <ul> 37 <li>11</li> 38 <li>11</li> 39 <li>11</li> 40 <li>11</li> 41 <li>11</li> 42 <li>11</li> 43 <li>11</li> 44 <li>11</li> 45 <li>11</li> 46 <li>11</li> 47 <li>11</li> 48 <li>11</li> 49 <li>11</li> 50 <li>11</li> 51 <li>11</li> 52 <li>11</li> 53 <li>11</li> 54 <li>11</li> 55 <li>11</li> 56 </ul> 57 </div> 58 <div class="body-content"> 59 <h1>123</h1><h1>123</h1> 60 <h1>123</h1><h1>123</h1> 61 <h1>123</h1><h1>123</h1> 62 <h1>123</h1><h1>123</h1> 63 <h1>123</h1><h1>123</h1> 64 <h1>123</h1><h1>123</h1> 65 <h1>123</h1><h1>123</h1> 66 <h1>123</h1><h1>123</h1> 67 <h1>123</h1><h1>123</h1> 68 <h1>123</h1><h1>123</h1> 69 <h1>123</h1><h1>123</h1> 70 <h1>123</h1><h1>123</h1> 71 <h1>123</h1><h1>123</h1> 72 <h1>123</h1> 73 <h1>123</h1><h1>123</h1> 74 <h1>123</h1><h1>123</h1> 75 <h1>123</h1><h1>123</h1> 76 </div> 77 </div> 78 </body> 79 </html> 80 81 管理后台
注意： overflow的css中必须加上bottom：0 top：npx 等属性，才会生效
2.写提示框，边缘标签的时候用absolute relative（当想让某一个东西在另外一个东西旁边的时候使用）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table> 9 <tr> 10 <td>第一</td> 11 <td>第二</td> 12 <td> 13 <div style="position: relative"> 14 <a>删除</a> 15 <div style="position: absolute; left: 38px;top: -2px;"> 16 <input type="button" value="确定"/> 17 <input type="button" value="取消"/> 18 </div> 19 </div> 20 </td> 21 </tr> 22 <tr> 23 <td>第一</td> 24 <td>第二</td> 25 <td>删除</td> 26 </tr> 27 <tr> 28 <td>第一</td> 29 <td>第二</td> 30 <td>删除</td> 31 </tr> 32 </table> 33 </body> 34 </html>
3.登录注册框右侧的小图标
实现：利用relative+absolute+padding
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .user{ 8 position: relative; 9 width: 250px; 10 /*background-color: pink;*/ 11 } 12 .user input{ 13 height: 30px; 14 width: 170px; 15 padding-right: 30px; 16 } 17 .user .ren{ 18 position: absolute; 19 top: 8px; 20 left: 190px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="user"> 26 <input type="text"> 27 <span class="ren">R</span> 28 29 </div> 30 </body> 31 </html>
4.多层div实现叠加样式。模态对话框，重要（用的很多，登录注册弹出框）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .model{ 11 /*遮罩层*/ 12 position: fixed; 13 top: 0; 14 bottom:0; 15 left:0; 16 right:0; 17 background-color: black; 18 opacity: 0.6; 19 z-index: 2; 20 } 21 .content{ 22 height: 300px; 23 width: 400px; 24 background-color: white; 25 position: fixed; 26 top: 50%; 27 left: 50%; 28 z-index: 3; 29 margin-left: 200px; 30 margin-top: -150px; 31 } 32 </style> 33 </head> 34 <body> 35 <div style="height: 2000px; background-color: red"> 36 <h1>11a</h1> 37 <h1>11a</h1> 38 <h1>11a</h1> 39 <h1>11a</h1> 40 </div> 41 <div class="model"></div> 42 <div class="content"></div> 43 </body> 44 </html>
5.小图标之加减号
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .left{ 8 float: left; 9 } 10 .wrap{ 11 height: 22px; 12 width: 150px; 13 border: 1px solid #ddd; 14 } 15 .wrap .minus{ 16 height: 22px; 17 width: 22px; 18 line-height: 22px; 19 text-align: center; 20 } 21 .wrap .plus{ 22 height: 22px; 23 width: 22px; 24 line-height: 22px; 25 text-align: center; 26 } 27 .wrap .count input{ 28 /*padding: 0;*/ 29 border: 0; 30 width: 104px; 31 height: 21px; 32 border-left: 1px solid #dddddd; 33 border-right: 1px solid #dddddd; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="wrap left"> 39 <div class="minus left">-</div> 40 <div class="count left"> 41 <input id="count" type="text" value="123"/> 42 </div> 43 <div class="plus left" onclick="Plus();">+</div> 44 <script type="text/javascript"> 45 function Plus() { 46 var old_str = document.getElementById('count').value; 47 var old_int = parseInt(old_str); 48 var new_int = old_int + 1; 49 document.getElementById('count').value = new_int; 50 } 51 </script> 52 </div> 53 </body> 54 </html>
浙公网安备 33010602011771号