标签：doctype 进阶 query w3c css3 icon 垂直居中 完整 btn
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 教程</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>
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 /*width: 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 }
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 }
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 }
标签：doctype 进阶 query w3c css3 icon 垂直居中 完整 btn
原文地址：https://www.cnblogs.com/xuqidong/p/12299866.html
