w3c

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>w3c</title>
 6     <link rel="stylesheet" type="text/css" href="css/reset.css">
 7     <link rel="stylesheet" type="text/css" href="css/top.css">
 8     <link rel="stylesheet" type="text/css" href="css/main.css">
 9 </head>
10 <body>
11     <div class="wrap">
12         <div class="top">
13             <div class="start">
14                 <h1 class="title"></h1>
15                 <div class="search">
16                     <div class="sc_position">
17                         <div class="s_p_border"></div>
18                         <div class="s_p_btn">GO</div>
19                     </div>
20                 </div>
21             </div>
22             <div class="nav">
23                 <ul class="nav_list">
24                     <li class="n_l_1"></li>
25                     <li class="n_l_2"></li>
26                     <li class="n_l_3"></li>
27                     <li class="n_l_4"></li>
28                     <li class="n_l_5"></li>
29                     <li class="n_l_6"></li>
30                     <li class="n_l_7"></li>
31                 </ul>
32             </div>
33         </div>
34         <div class="main">
35             <div class="m_left">
36                 <div class="nav_box">
37                     <h2>html&nbsp;教程</h2>
38                     <ul>
39                         <li>html</li>
40                         <li>html5</li>
41                         <li>xhtml</li>
42                         <li>css</li>
43                         <li>css3</li>
44                         <li>tcp/ip</li>
45                     </ul>
46                 </div>
47                 <div class="nav_box">
48                     <h2>浏览器脚本</h2>
49                     <ul>
50                         <li>javascript</li>
51                         <li>jQuery</li>
52                         <li>Ajax</li>
53                     </ul>
54                 </div>
55             </div>
56             <div class="m_center">
57                 <div class="ct_box ct_intr">
58                     <div class="ct_intr_box">
59                         <h2>领先的 Web 技术教程 - 全部免费</h2>
60                         <p>在w3school，你可以找到你所需要的所有的网站建设教程。</p>
61                         <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
62                         <p>从左侧的菜单选择你需要的教程！</p>
63                     </div>
64                 </div>
65                 <div class="ct_box">
66                     <div class="c_b_1">
67                         <div class="c_b_txt">
68                             <h2>完整的网站技术参考手册</h2>
69                             <p>我们的参考手册涵盖了网站技术的方方面面。</p>
70                             <p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
71                         </div>
72                     </div>
73                     <div class="c_b_2">
74                         <div class="c_b_txt">
75                             <h2>在线实例测试工具</h2>
76                             <p>在 w3school，我们提供上千个实例。</p>
77                             <p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
78                         </div>
79                     </div>
80                 </div>
81             </div>
82             <div class="m_right">
83                 
84             </div>
85         </div>
86         <div class="end"></div>
87     </div>
88 </body>
89 </html>

w3c.html

 1 .top {
 2     /*宽度找父级:wrap*/
 3     /*height: 148px;*/
 4     /*子级都设置高度后,反过来可以省略父级的高度*/
 5 
 6     background: red
 7 }
 8 .start {
 9     /*宽度找父级:wrap*/
10     /*height: 100px;*/
11     /*子级都设置高度后,反过来可以省略父级的高度*/
12 
13     /*统一颜色*/
14     background-color: #fdfcf8;
15 }
16 .title {
17     /*有明确显示宽度,自己设置*/
18     width: 500px;
19     height: 100px;
20     background: url('../img/w3c/bg.png') no-repeat 0 -150px;
21 }
22 .title:hover {
23     /*只修改精灵图定位*/
24     background-position: 0 -250px;
25 }
26 .search {
27     width: 300px;
28     /*height: 100px;*/
29     /*background-color: orange;*/
30     /*margin-left: auto;
31     margin-right: 0;
32     margin-top: -100px;*/
33     margin: -100px 0 0 auto;
34 }
35 .sc_position {
36     width: 280px;
37     height: 40px;
38     /*background-color: cyan;*/
39 }
40 /*实现sc_position在search垂直居中*/
41 .search {
42     /*宽度不变*/
43     /*高度为子级同高,自己不做设置*/
44     /*通过padding实现居中*/
45     padding: calc((100px - 40px) / 2) 0;
46 }
47 .s_p_border {
48     width: calc(100% - 50px);
49     /*height: 40px;*/
50     height: 36px;
51     /*background-color: yellow;*/
52     border: 2px solid #333;
53     border-radius: 5px;
54 }
55 .s_p_btn {
56     width: 40px;
57     height: 40px;
58     background-color: brown;
59     margin: -40px 0 0 auto;
60     font: 700 18px/40px "微软雅黑";
61     text-align: center;
62     color: #fff;
63     cursor: pointer;
64     border-radius: 4px;
65     /*不允许选中文本*/
66     user-select: none;
67 }
68 
69 .nav {
70     /*宽度找父级:wrap*/
71     height: 48px;
72     overflow: hidden;
73     /*统一颜色*/
74     background-color: #fdfcf8;
75 }
76 /*li的高度48 -> ul高度52 -> 设置nav高度,及overflow*/
77 .nav_list li {
78     display: inline-block;
79     /* 155px;*/
80     height: 48px;
81     /*background-color: orange;*/
82 }
83 .nav_list li:not(:first-child) {
84     margin-left: -4px;
85 }
86 .n_l_1 {
87     width: 155px;
88     background: url('../img/w3c/bg.png') no-repeat 0 0;
89 }
90 .n_l_1:hover {
91     background-position: 0 -48px;
92 }
93 .n_l_2 {
94     width: 157px;
95     background: url('../img/w3c/bg.png') no-repeat -155px 0;
96 }
97 .n_l_2:hover {
98     background-position: -155px -48px;
99 }

top.css

 1 .main {
 2 
 3 }
 4 .m_left, .m_center, .m_right {
 5     height: 1700px
 6 }
 7 .m_left {
 8     width: 180px;
 9     /*background: red;*/
10 }
11 .m_center {
12     width: 840px;
13     /*background: orange;*/
14     margin-left: 180px;
15     margin-top: -1700px;
16 }
17 .m_right {
18     width: 180px;
19     background: red;
20     margin: -1700px 0 0 auto;
21 }
22 
23 .nav_box {
24     padding-top: 10px;
25 }
26 .nav_box h2 {
27     font-size: 18px;
28     text-indent: 10px;
29     line-height: 38px;
30 }
31 .nav_box li {
32     font-size: 15px;
33     text-indent: 15px;
34     line-height: 22px;
35 }
36 .nav_box li:hover {
37     background-color: #222;
38     color: white;
39 }
40 
41 .ct_box {
42     width: 800px;
43     border-bottom: 1px solid #333;
44     margin: 0 auto;
45 }
46 .ct_intr {
47     padding: 50px 0 20px;
48 }
49 .ct_intr_box {
50     text-align: center;
51     /*字体(文本)相关标签的字体相关属性默认值一般都是 继承 (inherit)*/
52 }
53 .ct_intr_box p {
54     line-height: 30px;
55 }
56 /*first-child nth-child(1)*/
57 /*first-of-type nth-of-type(1)*/
58 .ct_intr_box p:first-of-type {
59     margin-top: 10px;
60 }
61 .ct_intr_box p:last-of-type {
62     font-weight: 700;
63 }
64 
65 .c_b_1 {
66     background: url('../img/w3c/icon2.png') no-repeat 0 30px;
67     padding-left: 120px;
68     padding-top: 30px;
69     padding-bottom: 20px
70 }
71 .c_b_txt h2 {
72     line-height: 50px;
73 }
74 .c_b_txt p {
75     font-size: 14px;
76     line-height: 30px;
77 }
78 
79 .c_b_2 {
80     background: url('../img/w3c/icon3.png') no-repeat 0 30px;
81     padding-left: 120px;
82     padding-top: 30px;
83     padding-bottom: 20px;
84     border-top: 1px solid #333;
85 }

main.css

 1 html, body {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 .wrap {
 6     width: 1200px;
 7     /*高度不设:由内容撑开*/
 8     /*水平居中*/
 9     margin: 0 auto;
10 }
11 h1 {
12     margin: 0;
13 }
14 ul {
15     margin: 0;
16     padding: 0;
17     list-style: none;
18 }
19 /*li {
20     text-align: none;
21     text-indent: -9999px;
22 }*/
23 h2 {
24     margin: 0;
25 }
26 p {
27     margin: 0;
28 }

reset.css