Html 1：html

Python 14：html

1、概述

2、head标签

3、body标签

4、css

一、概述

1、一套规则

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

2、开发者

学习Html规则

开发后台程序：写Html文件（充当模板的作用）；数据库获取数据，然后替换到html文件的指定位置（Web框架）

3、本地测试

找到文件路径，直接浏览器打开、pycharm打开测试

4、编写Html文件

doctype对应关系
html标签，标签内部可以写属性 ====> 只能有一个
注释：

 1 <!DOCTYPE html>
 2 <!-- 类似html这种格式,标签，html标签 <html>fasdfasdf</html>
 3 # 标签内部的属性-->
 4 <html lang="en">
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>title</title>
 8 </head>
 9 <body>
10     <div></div>
11     <a href="http://www.baidu.com">老百度</a>
12 </body>
13 </html>

示例

5、标签分类

自闭和标签：<meta charset="UTF-8">
主动闭合标签：<title>Title</title>

二、head标签

1、Meta(metadata information)：提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1.1、页面编码（告诉浏览器是什么编码）：< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

1.2、刷新和跳转：

< meta http-equiv=“Refresh” Content=“30″> （页面30s刷新一次）

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> （页面5s后跳转到url）

1.3、关键词：< meta name="keywords" content="此网站被搜素时搜索的关键字" >

1.4、描述：描述网站是做什么用的

1.5、X-UA-Compatible：IE兼容

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。

<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7" />

 1 <!DOCTYPE html>
 2 <!-- 类似html这种格式,标签，html标签 <html>fasdfasdf</html>
 3 # 标签内部的属性-->
 4 <html lang="en">
 5 <head>
 6     <meta charset="UTF-8">
 7     <!--<meta http-equiv="Refresh" Content="3">-->
 8     <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">-->
 9     <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>
10     <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>
11     <title>tittle</title>
12 
13 </head>
14 <body>
15 
16 </body>
17 </html>

head

2、title标签

网页的标题

3、link

3.1、css：< link rel="stylesheet" type="text/css" href="css/common.css" >

3.2、icon：< link rel="shortcut icon" href="image/favicon.ico"> 网站的图标

4、style

在页面中写样式

例如：

< style type="text/css" > .bb{ } < /style>

5、script

5.1、引进文件< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

5.2、写js代码

< script type="text/javascript" > ... </script >

三、body标签

标签一般分为两种：块级标签（div、h1、p 等）；行内标签又称：内联标签（a、span、select 等）

1、各种符号

&nbsp(空格)，&gt（>），&lt（<）

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

2、p标签、br标签、span标签、div标签、h标签

p表示段落，默认段落之间是有间隔的！

br 是换行

span行内白板标签，没有格式

div块级白板标签

h标题格式标签，h1-h6由大到小

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
 9     <p>123</p>
10 
11     <h1>zzz</h1>
12     <h2>zzz</h2>
13     <h3>zzz</h3>
14     <h4>zzz</h4>
15     <h5>zzz</h5>
16     <h6>zzz</h6>
17 
18     <span>hello</span>
19     <span>hello</span>
20     <span>hello</span>
21     <span>hello</span>
22 
23     <div>1</div>
24     <div>2</div>
25     <div>3</div>
26 
27     <!--<a href="http://www.oldboyedu.com">李&nbsp;&nbsp;&nbsp;&nbsp;&gt;&lt;a&gt;杰</a>-->
28 </body>
29 </html>

简单标签

ps：标签之间可以嵌套

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     asdfasdf
 9     <div>
10         <div id="i1" style="position:fixed;bottom:0;right:0;">asdf</div>
11         <div></div>
12         <span></span>
13     </div>
14 </body>
15 </html>

嵌套

标签存在的意义：定位操作，js操作，css操作

chorme审查元素的使用：定位、查看样式

3、form

提交表单到指定的url，提交表单用submit

action属性：将表单提交到哪里

method属性：默认以get属性发送后台，也可设置POST，

GET形式提交数据的时候，会把你提交的数据全部拼接到url上，在发送

POST方式提交数据时。会把数据放在内容当中提交到指定服务器

 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="http://192.168.16.35:8888/index" method="POST">
 9         <input type="text" name="user" />
10         <input type="text" name="email"/>
11         <input type="password" name="pwd"/>
12         <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }-->
13         <input type="button"  value="登录1"/>
14         <input type="submit"  value="登录2"/>
15     </form>
16     <br/>
17     <form>
18         <input type="text" />
19         <input type="password" />
20         <input type="button"  value="登录1"/>
21         <input type="submit"  value="登录2"/>
22     </form>
23 </body>
24 </html>

form

4、input系列

4.1、text

input type='text' -name属性（用于后台拿数据）

input type='password' -name属性

4.2、butten

input type='butten' -value'登陆’ 按钮

input type='submit' -value='提交' 提交按钮，将当前表单提交表单

 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="http://192.168.16.35:8888/index" method="POST">
 9         <input type="text" name="user" />
10         <input type="text" name="email"/>
11         <input type="password" name="pwd"/>
12         <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }-->
13         <input type="button"  value="登录1"/>
14         <input type="submit"  value="登录2"/>
15     </form>
16     <br/>
17     <form>
18         <input type="text" />
19         <input type="password" />
20         <input type="button"  value="登录1"/>
21         <input type="submit"  value="登录2"/>
22     </form>
23 </body>
24 </html>

input

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--提交表单到其他服务器的url-->
 9     <form action="https://www.sogou.com/web">
10         <input type="text" name="query" value="赵凡" />
11         <input type="submit" value="搜索" />
12     </form>
13 </body>
14 </html>

提交到其他服务器url

4.3、单选框

input type='radio' -单选框value,name属性（name相同则互斥） checked='checked'（设置默认值）

4.4、复选框

input type='checkbox' -复选框value,name属性（name批量获取数据）

4.5、提交文件

input type='file' 依赖form表单的一个属性enctype="multipart/form-data"

4.6、重置

input type='reset' -重置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form enctype="multipart/form-data">
 9         <div>
10             <input type="text" name="user" />
11             <p>请选择性别：</p>
12             男：<input type="radio" name="gender" value="1"  />
13             女：<input type="radio" name="gender" value="2" checked="checked"/>
14             Alex：<input type="radio" name="gender" value="3"/>
15             <p>爱好</p>
16             篮球：<input type="checkbox" name="favor"  value="1" />
17             足球：<input type="checkbox" name="favor"  value="2" checked="checked" />
18             皮球：<input type="checkbox" name="favor"  value="3" />
19             台球：<input type="checkbox" name="favor"  value="4" checked="checked"/>
20             网球：<input type="checkbox" name="favor"  value="5" />
21             <p>技能</p>
22             撩妹：<input type="checkbox" name="skill" checked="checked" />
23             写代码：<input type="checkbox" name="skill"/>
24             <p>上传文件</p>
25             <input type="file" name="fname"/>
26         </div>
27         <input type="submit" value="提交" />
28         <input type="reset" value="重置" />
29     </form>
30 </body>
31 </html>

选择，提交

5、多行文本输入

<textarea>默认值</textarea> -name属性（多行文本输入）

6、select

select标签 -name，内部option，value，提交到后台，size，multiple
<option value="3" selected="selected">南京</option>

7、a标签

跳转：target属性，_black表示在新的页面打开

锚 href='某个标签的id’ 标签的id不允许重复

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <!--超链接-->
 9     <a href="http://www.baidu.com">百度</a>
10     <!--锚-->
11     <a href="#i3">第一章</a>
12     <a href="#i3">第二章</a>
13     <a href="#i3">第三章</a>
14     <a href="#i3">第四章</a>
15     <div id="i1" style="height:300px">第一章的内容</div>
16     <div id="i2" style="height:300px">第二章的内容</div>
17     <div id="i3" style="height:300px">第三章的内容</div>
18     <div id="i4" style="height:300px">第四章的内容</div>
19     
20     <a> href="http://www.oldboyedu.com">
21         <img src="1.png" title="大美女" style="height: 200px; 200px;" alt="美女">
22     </a>
23 </body>
24 </html>

a标签

8、列表

ul li
ol li
dl dt dd

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>abc</li>
10         <li>abc</li>
11         <li>abc</li>
12     </ul>
13     <ol>
14         <li>abc</li>
15         <li>abc</li>
16         <li>abc</li>
17     </ol>
18     <dl>
19         <dt>abc</dt>
20         <dd>abc</dd>
21         <dt>abc</dt>
22         <dd>abc</dd>
23     </dl>
24 </body>
25 </html>

列表

9、表格

table
　　thead
　　　　tr
　　　　　　th
　　tbody
　　　　tr
　　　　　　td
colspan
rowspan

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <!--简单版-->
 9 <table border="1">
10     <tr>
11         <td>主机名</td>
12         <td>端口</td>
13         <td>操作</td>
14     </tr>
15     <tr>
16         <td>1.1.1.1</td>
17         <td>80</td>
18         <td>
19             <a href="a标签.html">查看详细</a>
20         </td>
21     </tr>
22 </table>
23 <!--规范版-->
24 <table border="1">
25     <thead>
26         <tr>
27             <th>表头1</th>
28             <th>表头2</th>
29             <th>表头3</th>
30         </tr>
31     </thead>
32     <tbody>
33         <tr>
34             <td rowspan="2">1</td>  <!--纵向合并单元格-->
35             <td colspan="2">2</td>  <!--横向合并单元格-->
36         </tr>
37         <tr>
38             <td>2</td>
39             <td>3</td>
40         </tr>
41     </tbody>
42 </table>
43 </body>
44 </html>

表格

10、lable

用于点击文字，使得关联的标签获取光标

点击用户名可以获取文本框输入光标

11、fieldset

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <!--通过for与input的id进行关联-->
 9     <label for="username">用户名：</label>
10     <input id="username" type="text" name="user"/>
11     <fieldset>
12         <legend>登录</legend>
13         <label for="user">用户名：</label>
14         <input id="user" type="text" name="user"/>
15     </fieldset>
16 </body>
17 </html>

lable、fieldset

四、css

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

1、css样式

1.1、写在标签的style属性里

1.2、写在head里

id选择器
　　#i1{background-color: #2459a2;height: 48px;}

class选择器（常用）

　　.c1{background-color: aqua;height: 40px;}

　　<标签 class='名称'></标签>

标签选择器（必须会）
　　div{...}
　　所有div设置上此样式
层级选择器（空格）（常用）
　　.c1 .c2 div{}
组合选择器（逗号）（会）
　　.c1,.c2,div{}
属性选择器（必须会）
　　对选择到的标签在通过属性在进行一次筛选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #i1{
 8             background-color: #2459a2;
 9             height: 48px;
10         }
11         #i2{
12             background-color: #2459a2;
13             height: 48px;
14         }
15         .c1{
16             background-color: aqua;
17             height: 40px;
18         }
19         /*注释内容*/
20         /*选择器*/
21         div{
22             background-color: blue;
23             color: crimson;
24         }
25         /*层级选择器*/
26         span div{
27             background-color: blue;
28             color: crimson;
29         }
30         /*组合选择器*/
31         #i1,#i2,#i3{
32             background-color: #2459a2;
33             height: 48px;
34         }
35         /*属性选择器*/
36         input[type="text"]{width: 100px;
37             height: 200px;}
38 
39     </style>
40 </head>
41 <body>
42     <div style="background-color: #2459a2;height: 48px;" >双方各省份</div>
43     <div id="i1">2</div>
44     <div id="i2">2</div>
45     <div class="c1">2</div>
46     <div class="c1">2</div>
47     <input type="text" />
48     <input type="password"/>
49 </body>
50 </html>

选择器

优先级

　　标签上的style优先，编写顺序，就近原则，越靠下越优先

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .c1{
 8             background-color: red;
 9             color: white;
10         }
11         .c2{
12             font-size: 28px;
13             color: black;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="c1 c2" style="color: blue">asdf</div>
19 </body>
20 </html>

优先级

1.3、写在单独文件中
　　引入操作：<link rel="stylesheet" href="commons.css"/>

1 .c1{
2     background-color: red;
3     color: white;
4 }
5 .c2 {
6     font-size: 28px;
7     color: black;
8 }

commons.css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <!--引入公用css-->
 7     <link rel="stylesheet" href="css/commons.css"/>
 8 
 9 </head>
10 <body>
11     <div class="c1 c2" style="color: blue">asdf</div>
12 </body>
13 </html>

引用

2、注释

/* 注释内容 */

3、边框

宽度，样式，颜色：border: 1px solid red

-border-left

4、字体属性

height、（高度）
width、（宽度：像素、百分比）
text-align：center （水平方向居中）
line-height（垂直方向根据标签高度居中）、
color（字体颜色）、
font-size（字体大小）、
font-weight（字体加粗）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="border: 1px solid red">adsfsdg</div>
 9     <div style="height: 48px;
10      80%;
11     border: 1px solid red;
12     font-size: 30px;
13     text-align: center;
14     line-height: 48px;
15     font-weight:bold ">asd</div>
16 </body>
17 </html>

边框字体属性

5、float

让标签浮动起来，块级标签也可以堆叠
div内部加
<div style="clear: both;"></div>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style=" 20%;background-color: red;float: left">1</div>
 9     <div style=" 80%;background-color: black;float:left">2</div>
10 </body>
11 </html>

float

6、display

display：none -让标签消失
display：inline 块级标签变行内标签
display：block 行内标签便块级标签
display:inline-block
具有inline属性，默认自己有多少占用多少
具有block属性，可以设置高度，宽度，边距（padding margin）
（重点）
行内标签无法设置高度，宽度，边距（padding margin）
块级标签：可以设置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="background-color:red;display:inline;">asdf</div>
 9     <span style="background-color:red;display:block">asdf</span>
10     <span style="display: inline-block;
11     background-color:red;
12     height: 50px;
13     70px;">zz</span>
14     <a style="background-color:red;"></a>
15 
16 </body>
17 </html>

display

7、边距

外边距：margin

内边距：padding

8、去除ie浏览器图片边框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         img{
 8             /*去除ie浏览器上图片自带的边框*/
 9             border: 0;
10         }
11     </style>
12 </head>
13 <body>
14     <a href="http://www.baidu.com" >asdf</a>
15     <a href="http://www.baidu.com">
16         <img src="1.jpg" style=" 200px;height: 300px;">
17     </a>
18 </body>
19 </html>

去除边框

9、position

a、fiexd => 固定在页面的某个位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 48px;
 9             background-color: black;
10             color: #dddddd;
11             position: fixed;
12             top:0;
13             right: 0;
14             left: 0;
15         }
16         .pg-body{
17             background-color: #dddddd;
18             height: 5000px;
19             margin-top: 50px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="pg-header">头部</div>
25     <div class="pg-body">内容</div>
26 </body>
27 </html>

fiexd

b、absolute => 固定在当前页面的某个位置

 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=" 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div>
 9     <div style="height: 5000px;background-color: #dddddd;">
10         asdfasdf
11     </div>
12 </body>
13 </html>

absolute

c、relative + absolute => 固定在模块的某个位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
10         <div style="position: absolute;left:0;bottom:0; 50px;height: 50px;background-color: black;"></div>
11     </div>
12     <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
13 
14         <div style="position: absolute;right:0;bottom:0; 50px;height: 50px;background-color: black;"></div>
15     </div>
16     <div style="position: relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
17 
18         <div style="position: absolute;right:0;top:0; 50px;height: 50px;background-color: black;"></div>
19     </div>
20 </body>
21 </html>

relative + absolute

d、opacity: 透明度（0-1）、z-index: 层级顺序、display:none：隐藏页面

 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="
 9     /*隐藏页面*/
10     display:none;
11     z-index:10;
12     position: fixed;top: 50%;left:50%;
13     /*让模块左移宽度的一般，上移高度的一般，正好就居中了*/
14     margin-left: -250px;margin-top: -200px;
15     background-color:white;height: 400px;500px; ">
16 
17         <input type="text" />
18         <input type="text" />
19         <input type="text" />
20 
21     </div>
22 
23     <div style="
24     /*隐藏页面*/
25     display:none;
26     z-index:9;
27     position: fixed;background-color: black;
28     top:0;
29     bottom: 0;
30     right: 0;
31     left: 0;
32     /*opacity：设置当前透明度，的值从0-1颜色逐渐加深*/
33     opacity: 0.5;
34     "></div>
35 
36     <div style="height: 5000px;background-color: green;">
37         asdfasdf
38     </div>
39 </body>
40 </html>

三层页面

10、overflow: hidden（隐藏）auto（出现滚动条）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--超过设定高度宽度，出现滚动条-->
 9     <div style="height: 200px; 300px;overflow: auto">
10         <img src="1.jpg">
11     </div>
12     <!--超过设定高度宽度，隐藏-->
13     <div style="height: 200px; 300px;overflow: hidden">
14         <img src="1.jpg">
15     </div>
16 </body>
17 </html>

overflow

11、hover：

当鼠标移动到当前标签上时，一下css属性才生效

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             position: fixed;
 9             right: 0;
10             left: 0;
11             top: 0;
12             height: 48px;
13             background-color: #2459a2;
14             line-height: 48px;
15         }
16         .pg-body{
17             margin-top: 50px;
18         }
19         .w{
20             width: 980px;
21             margin: 0 auto;
22         }
23         .pg-header .menu{
24             display: inline-block;
25             padding: 0 10px 0 10px;
26             color: white;
27         }
28         /*当鼠标移动到当前标签上时，以下css属性才生效*/
29         .pg-header .menu:hover{
30             background-color: blue;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="pg-header">
36         <div class="w">
37             <a class="logo">LOGO</a>
38             <a class="menu">全部</a>
39             <a class="menu">42区</a>
40             <a class="menu">段子</a>
41             <a class="menu">1024</a>
42         </div>
43     </div>
44     <div class="pg-body">
45         <div class="w">a</div>
46     </div>
47 </body>
48 </html>

hover

12、background

background-image:url('image/4.gif'); # 默认，div大，图片重复放

background-repeat: repeat-y;图片竖向重复增加；repeat-y;图片横向重复

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>background-color</li>
10             <div style='background-color:red;'>&nbsp</div>
11         <li>background-image</li>
12             <div style="background-image:url('1.jpg'); height: 80px;"></div>
13         <li>background-repeat（no-repeat;repeat-x;repeat-y）</li>
14             <div style="background-image:url('1.jpg'); height: 80px;background-repeat:no-repeat"></div>
15         <li>background-position</li>
16             <div style="background-image:url('1.jpg'); height: 80px;background-repeat:no-repeat;background-position:-105px  -112px;"></div>
17 
18             <div style="background: #f8f8f8 url(1.jpg) -105px -212px no-repeat; height: 80px;"></div>
19     </ul>
20 
21 </body>
22 </html>

背景图片

background-position-x:
background-position-y:

 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: 100px;"></div>
 9     <div style="background-image: url(icon_18_118.png);
10     /*图片不在重复堆叠*/
11     background-repeat:no-repeat;
12     height: 20px;20px;
13     /*移动图片*/
14     background-position-x:1px ;
15     background-position-y:-58px ;
16     border: 1px solid red;"></div>
17 </body>
18 </html>

移动图片

13、示例：输入框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <div style="height: 35px; 400px;position: relative;">
10         <input type="text" style="height: 35px; 400px;" />
11         <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px; 16px;display: inline-block;"></span>
12     </div>
13 </body>
14 </html>

输入框

14、页面布局

a、主站布局

<div class='pg-header'>
    <div style='980px;margin 0 auto'>内容自动居中</div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .left{
11             float: left;
12         }
13         .right{
14             float: right;
15         }
16         .pg-header{
17             height: 48px;
18             background-color: royalblue;
19             color: white;
20         }
21         .pg-content .menu{
22             width: 20%;
23             background-color: red;
24             /*最小宽度*/
25             min-width: 200px;
26         }
27         .pg-content .content{
28             width: 80%;
29             background: green;
30         }
31     </style>
32 </head>
33 <body>
34     <div class='pg-header'></div>
35     <div class='pg-content'>
36         <div class="menu left">a</div>
37         <div class="content left">
38             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
39             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
40             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
41             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
42             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
43             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
44             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
45             <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
46         </div>
47     </div>
48     <div class='pg-footer'></div>
49 </body>
50 </html>

主站布局

b、后台管理布局

position:
    fiexd  --永远固定在窗口的某个位置
    relative  --单独无意义
    absolute  --第一次定位可以再指定位置，滚轮滚动时就不在了

a.左侧菜单跟随滚动条
b.左侧以及上下不动（用的最多）absolute + overflow: auto;
border-radius: 50%（图片由方变圆）也可以设置像素（10px）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: royalblue;
            color: white;
        }
        .pg-content .menu{
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            left: 200px;
            right: 0;
            bottom: 0;
            background-color: cadetblue;
            overflow: auto;

        }
    </style>
</head>
<body>
    <div class='pg-header'></div>
    <div class='pg-content'>
        <div class="menu left">a</div>
        <div class="content left">
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
            <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
        </div>
    </div>
    <div class='pg-footer'></div>
</body>
</html>

fixed布局（一般不这么用）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  7     <style>
  8         body{
  9             margin: 0;
 10         }
 11         .left{
 12             float: left;
 13         }
 14         .right{
 15             float: right;
 16         }
 17         .pg-header{
 18             height: 48px;
 19             background-color: royalblue;
 20             color: white;
 21             line-height: 48px;
 22         }
 23         .pg-header .logo{
 24             width: 200px;
 25             background: powderblue;
 26             text-align: center;
 27         }
 28         .pg-header .icons{
 29             padding: 0 20px;
 30         }
 31         .pg-header .icons:hover{
 32             background-color:#204982 ;
 33         }
 34 
 35         .pg-header .user{
 36             margin-right: 60px;
 37             padding: 0 20px;
 38             /*background-color: powderblue;*/
 39             height: 48px;
 40         }
 41         .pg-header .user:hover{
 42             background-color: #204982;
 43         }
 44         .pg-header .user .a img{
 45             height: 40px;
 46             width: 40px;
 47             margin-top: 4px;
 48             border-radius: 50%
 49         }
 50         .pg-header .user .b{
 51             z-index:20;
 52             position: absolute;
 53             top: 48px;
 54             left: 0;
 55             width: 160px;
 56             background-color: white;
 57             color: black;
 58             display: none;
 59         }
 60         .pg-header .user:hover .b{
 61             display: block;
 62         }
 63         .pg-header .user .b a{
 64             display: block;
 65         }
 66         .pg-content .menu{
 67             position: absolute;
 68             top: 48px;
 69             left: 0;
 70             bottom: 0;
 71             width: 200px;
 72             background-color: #dddddd;
 73         }
 74         .pg-content .content{
 75             position: absolute;
 76             top: 48px;
 77             left: 200px;
 78             right: 0;
 79             bottom: 0;
 80             /*background-color: cadetblue;*/
 81             overflow: auto;
 82             z-index: 9;
 83         }
 84     </style>
 85 </head>
 86 <body>
 87     <div class='pg-header'>
 88         <div class="logo left">
 89             LOGO
 90         </div>
 91 
 92 
 93         <div class="user right" style="position: relative">
 94             <a class="a" href="a">
 95                 <img src="zz.jpg" />
 96             </a>
 97             <div class="b">
 98                 <a>我的资料</a>
 99                 <a>注销</a>
100 
101             </div>
102         </div>
103         <div class="icons right">
104             <i class="fa fa-bell-o" aria-hidden="true"></i>
105             <span style="display: inline-block;padding: 3px 7px;line-height: 1;background-color: red;border-radius: 50%">5</span>
106         </div>
107         <div class="icons right">
108             <i class="fa fa-commenting-o" aria-hidden="true"></i>
109         </div>
110 
111     </div>
112     <div class='pg-content'>
113         <div class="menu left">a</div>
114         <div class="content left">
115             <div style="background-color: aqua">
116                 <P style="margin: 0">asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
117                 <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
118                 <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
119                 <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
120                 <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
121                 <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
122                 <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
123                 <P>asd</P><P>asd</P><P>asd</P><P>asd</P><P>asd</P>
124             </div>
125         </div>
126     </div>
127     <div class='pg-footer'></div>
128 </body>
129 </html>

absolute+auto（常用）