css一些简单的例子

1.http协议

 1 一：HTTP协议：hypertext transport protocol(超文本传输协议)
 2     特点：
 3         1.请求与响应
 4         2.无状态的协议
 5     请求协议：
 6         请求首行：
 7         请求头信息：
 8                 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
 9                 Accept-Encoding:gzip, deflate, br
10                 Accept-Language:zh-CN,zh;q=0.9
11                 Connection:keep-alive
12                 Cookie:BAIDUID=47A6DD50BC3D91236FEE1906BD2DE0B6:FG=1; BIDUPSID=47A6DD50BC3D91236FEE1906BD2DE0B6; PSTM=1510046493; ispeed_lsm=10; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598
13                 Host:www.baidu.com
14                 Upgrade-Insecure-Requests:1
15                 User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36
16         空行：
17         请求体：
18         --如果是get方式提交，数据是存放在UTL后面；而post是放在请求体中。
19     响应：
20         Bdpagetype:1
21         Bdqid:0x8f6422cd00053969
22         Bduserid:0
23         Cache-Control:private
24         Connection:Keep-Alive
25         Content-Encoding:gzip
26         Content-Type:text/html; charset=utf-8
27         Cxy_all:baidu+10365439d71d1527700dadaf75cc64b2
28         Date:Wed, 08 Nov 2017 10:05:53 GMT
29         Expires:Wed, 08 Nov 2017 10:05:32 GMT
30         Server:BWS/1.1
31         Set-Cookie:BDSVRTM=0; path=/
32         Set-Cookie:BD_HOME=0; path=/
33         Set-Cookie:H_PS_PSSID=1424_24866_24558_21107_24879_22159; path=/; domain=.baidu.com
34         Strict-Transport-Security:max-age=172800
35         Transfer-Encoding:chunked
36         Vary:Accept-Encoding
37         X-Powered-By:HPHP
38         X-Ua-Compatible:IE=Edge,chrome=1

View Code

2.css选择器（标签名，id,类，属性，伪类）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css</title>
 6 
 7     <style>
 8         #div2{
 9             color:red;
10             background:gray
11         }
12         #div1{
13             color:green;
14             background:blue
15         }
16 
17     </style>
18     <!--注意这里必须加上rel='stylesheet'，外部文件才能生效，告诉浏览器是层叠样式表-->
19     <!--在css选择器中有一个加载顺序，简单说就是就近原则。作用域越小，优先级越高-->
20     <link type="text/css" rel="stylesheet" href="mycss.css" />
21 </head>
22 <body>
23     <div id="div2">hello world</div>
24     <div id="div1">nihao</div>
25     <div id="div3">hellllll</div>
26 </body>
27 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css选择器</title>
 6 <!--四种选择器：
 7     1.通用选择器
 8     2.标签名选择器
 9     3.id选择器（唯一值）
10     4.class类选择器(可以有多个，这多个成为一类)
11     5.基本组合选择器比如：#outer .c1{}---后代选择器
12                       #outer,.c1{}---并列选择器
13                       #outer>.c1>.c2{}---子代选择器
14                       #outer+.c1{}----相邻标签选择器（必须是紧挨着才有用）
15     6.属性选择器：
16 -->
17     <style>
18         *{
19             font-size:45px;
20         }
21         p{
22             background-color:yellow;
23         }
24         div{
25             color:green;
26         }
27         #p1{
28             color:red;
29         }
30         .c1{
31             color:gray;
32             background-color:#8ABCD8
33         }
34     </style>
35 </head>
36 <body>
37     <p >hello</p>
38     <div >hello div hello span</div>
39     <p id="p1">你好</p>
40     <div class="c1">我子啊</div>
41     <div class="c1" >你们</div>
42 </body>
43 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类选择器</title>
 6 
 7     <style >
 8         a:link{
 9             color:red;
10         }
11         a:hover{
12             color:yellow;
13         }
14         a:visited{
15             color:purple;
16         }
17         a:active{
18             color:green;
19         }
20     </style>
21 </head>
22 <body>
23     <a href="https://www.baidu.com">百度</a>
24 </body>
25 </html>

View Code

3.外边框和内边距

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>内外边距</title>
 6 
 7     <style>
 8         body{
 9             border:dashed 5px red;
10 
11         }
12         .div1{
13             border:dashed 2px black;
14             height:200px;
15             width:30%;
16             background-color:purple;
17             margin:10px;
18             padding:10px;
19         }
20         .div2{
21             border:dashed 2px black;
22             height:200px;
23             width:20%;
24             background-color:green;
25             margin:20px;
26             padding:20px
27         }
28         .div3{
29             border:dashed 2px black;
30             height:300px;
31             width:20%;
32             background-color:blue;
33             margin:30px;
34             padding:30px
35         }
36     </style>
37 </head>
38 <body>
39 <!--在css中一切都是盒子模型-->
40 <div class="div1">div1</div>
41 <div class="div2">div2</div>
42 <div class="div3">div3</div>
43 </body>
44 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>练习</title>
 6     <style>
 7         body{
 8             margin:0px;
 9             border:solid 2px
10         }
11         .div1{
12             height:300px;
13             width:300px;
14             background-color:green;
15             border:1px solid black;
16             padding:20px;
17         }
18         .div2{
19             height:100px;
20             width:100px;
21             background-color:red;
22             margin:100px
23         }
24     </style>
25 </head>
26 <body>
27 <!--练习：300px*300px的盒子装着100px*100px的盒子，通过margin和padding设置小盒子移动到大盒子的中间-->
28 
29     <div class="div1">11
30             <div class="div2">
31 
32             </div>
33     </div>
34 
35 </body>
36 </html>

View Code