0702 CSS新特性（后续用到添加）、【页面布局模板】

1 CSS3选择器

　　1.1 孩子选择器（一般不用）

　　　　first-child

　　　　last-child

　　　　nth-child(x)

　　1.2 hover

　　　　鼠标划上去时选中

 

 

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <!-- <script type="text/javascript" src="../js/test.js"></script> -->
17 
18     <link rel="shortcut icon" href="../img/study02.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         #header{
25             height: 100px;
26             background-color: skyblue;
27         }
28         #div{
29             height: 100px;
30             width: 1000px;
31             background-color: blue;
32             margin: 0 auto;
33         }
34 
35         #body_in{
36             height: 700px;
37             width: 1000px;
38             overflow: hidden;
39 
40             margin: 0 auto;
41         }
42         #index{
43             height: 700px;
44             width: 220px;
45             background-color: #89A5D6;
46 
47             float: left;
48         }
49         #content{
50             height: 700px;
51             width: 770px;
52             background-color: #33507C;
53 
54             float:right;
55         }
56 
57         #footer{
58             height: 80px;
59             background-color: skyblue;
60         }
61         #copy{
62             height: 80px;
63             width: 1000px;
64             background-color: blue;
65             margin: 0 auto;
66         }
67         
68     </style>
69 </head>
70 
71 <body>
72     <div id="header">
73         <div id="div"></div>
74     </div>
75 
76     <div id="body">
77         <div id="body_in">
78             <div id="index"></div>
79             <div id="content"></div>
80         </div>
81     </div>
82 
83     <div id="footer">
84         <div id="copy"></div>
85     </div>
86 </body>
87 </html>
页面布局模板

 

posted @ 2017-05-14 20:12  寻渝记  阅读(127)  评论(0)    收藏  举报