html部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="fontawesome-4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="main-wrapper"> <header><!--页头开始--> <nav> <div class="logo"><a href="">王小窝</a></li></div> <ul> <li><a href="" class="active">首页</a></li> <li><a href="">链接3</a></li> <li><a href="">链接4</a></li> </ul> </nav> <div id="banner"> <div class="inner"> <h1>王小窝</h1> <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam numquam in, qui. Ex, tempora velit dolor molestias rerum, ipsum praesentium. Excepturi, commodi. Accusantium praesentium provident, assumenda commodi odit, delectus facilis! </p> <button>了解我</button> <div class="more"> 更多 </div> </div> </div> </header><!--页头结束--> <div class="content"><!--内容开始--> <section class="green-section"> <div class="wrapper"> <div> <h2>标题</h2> <div class="hr"></div> <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum culpa rerum doloremque beatae, molestiae totam, ea atque rem corporis sed fuga nesciunt, impedit ab et, fugiat ipsa! Id, autem?</p> </div> <div class="icon-grop"> <span class="icon">items2</span> <span class="icon">items2</span> <span class="icon">items3</span> </div> </div> </section> <section class="gray-section"> <div class="article-preview clearfix"> <div class="text-section"> <h2>又一个标题</h2> <div class="sub-heading">我是副标题</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sunt praesentium, magni, architecto numquam nam id quis eaque quidem, adipisci porro hic beatae reprehenderit! Ab eum natus, similique in ut.</p> </div> <div class="img-section"> <img src="img/pic01.jpg" alt=""> </div> </div> <div class="article-preview clearfix"> <div class="img-section"> <img src="img/pic02.jpg" alt=""> </div> <div class="text-section"> <h2>又一个标题</h2> <div class="sub-heading">我是副标题</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam, rem sed fugiat quia impedit reprehenderit dolorem voluptate aperiam alias harum saepe! Molestiae, repellendus! Magni mollitia neque, dicta similique amet.</p> </div> </div> <div class="article-preview clearfix"> <div class="text-section"> <h2>又一个标题</h2> <div class="sub-heading">我是副标题</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis illum blanditiis possimus unde aperiam at praesentium sapiente, nemo iste? Placeat quidem libero similique architecto cupiditate dolorum expedita temporibus harum asperiores.</p> </div> <div class="img-section"> <img src="img/pic03.jpg" alt=""> </div> </div> </section> <section class="purple-section"> <div class="wrapper"> <div class="heading-wrapper"> <h2>又一个标题</h2> <div class="hr"></div> <div class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tenetur corporis iste sit nesciunt reprehenderit sed neque recusandae ducimus, laudantium, assumenda totam architecto, blanditiis est veritatis aspernatur perferendis nulla qui.</div> </div> <div class="card-group clearfix"> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fugiat repellendus, harum aliquam provident aut commodi. Nam, cumque veritatis magni sapiente earum! Excepturi necessitatibus soluta modi. Ut rerum eveniet veniam.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ratione atque, dolores odio, eligendi totam eveniet quo minus fugiat obcaecati, labore delectus? Officiis vitae aliquid sequi culpa, sunt rem odio.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic at, vitae veniam labore, quis fugit, sequi enim error tempora, nulla ipsam quae harum praesentium fuga tenetur tempore. Dolore, molestiae, repellat?</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi deleniti nobis perferendis nostrum. Natus molestiae magnam eligendi totam, aperiam fugiat earum quisquam ratione, tempore expedita aliquam sequi culpa delectus doloremque.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ad consectetur voluptatem explicabo rerum perferendis quae alias, dicta tenetur. Quis, eius, voluptates. Incidunt molestiae saepe voluptates odio alias et quam.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore harum dolorum at molestiae iure, quisquam officiis suscipit laudantium voluptatum inventore similique, consectetur nobis totam, dicta veritatis tenetur quasi expedita ad.</p> </div> </div> </div> </section> </div><!--内容结束--> <footer><!--页脚开始--> <ul class="share-group"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> <div class="copy"> © 王小窝 - 2017 </div> </footer><!--页脚结束--> </div> </body> </html>
css部分:
.clearfix:after { content: ''; display: block; clear: both; } ul { margin: 0; } nav { background-color: transparent; height: 50px; } a { text-decoration: none; } header { background-color: rgba(0,0,0,0.4); } #banner { background-color: rgba(0,0,0,0.2); height: 700px; } nav ul { list-style: none; margin:0; float: right; } nav ul li,nav .logo { display: inline-block; line-height: 50px; margin-right: 20px; } nav ul li a { line-height: inherit; text-decoration: none; display: inline-block; height: inherit; color: #fff; } nav ul li.logo { float: left; padding: 10px; } #banner .inner { max-width: 300px; text-align: center; margin: 0 auto; position: relative; top:160px; } #banner .inner h1{ margin: 0; } button { border: none; background-color: #333; color: #eee; padding: 10px; border-radius: 5px; } #banner button { padding: 14px 60px; } #banner .inner .more { margin-top: 280px; color: #fff; font-size: 12px; } .sub-heading{ line-height: 30px; margin: 30px 0; /*font-size: 18px;*/ } .logo { font-size: 20px; font-weight: 700; letter-spacing: 1px; } .logo a{ color: #fff; } h1 { padding: 12px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; } h2{ font-size: 30px; } h3 { font-size: 24px; } p { font-size: 18px; letter-spacing: 1px; } .hr{ width: 100px; height: 2px; margin: 20px auto; } .green-section { background-color: #089DB0; text-align: center; color: #fff; padding: 100px 0; } .green-section .hr { background-color: #028e94; width: 60%; } .green-section .icon-grop .icon{ display: inline-block;width: 80px; height: 80px; border: 1px solid #0D6F74; transform: rotate(45deg); margin: 20px; } .icon-grop { margin-top: 60px; } .wrapper { max-width: 1080px; margin: 0 auto; } .gray-section { background-color: #252F34; } .gray-section .img-section{ width: 45%; } .img-section img { width: 100% } .gray-section .text-section{ width: 55%; } .article-preview > div { float: left; font-size: 0; } .article-preview:nth-child(odd){ background-color:rgba(255,25,255,0.05); } .text-section{ position: relative; top:68px; left:50px; } .text-section > * { max-width: 90%; color: #fff; } .text-section h2 { margin-bottom: 20px; } .text-section .sub-heading { font-size: 22px; } .text-section p { font-size: 18px; letter-spacing: 1px; } .purple-section { padding: 80px; background-color: #3F3965; color: #fff; } .purple-section .heading-wrapper { text-align: center; } .purple-section .hr { background: #373259; width: 60%; } .card{ float: left; width: 50%; min-height: 300px; padding: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card:first-child{ background : rgba(0,0,0,0.04); } .card:nth-child(2){ background: rgba(0,0,0,0.08); } .card:nth-child(3){ background: rgba(0,0,0,0.12); } .card:nth-child(4){ background: rgba(0,0,0,0.16); } .card:nth-child(5){ background: rgba(0,0,0,0.20); } .card:nth-child(6){ background: rgba(0,0,0,0.24); } footer{ background: #333; color: #fff; min-height: 200px; text-align: center; } ul.share-group { display: block; width: 1080px; margin: 0 auto; padding: 50px; } .share-group li { display: inline-block; padding: 10px; } .copy{ padding: 20px; } .main-wrapper { background: #444 url(../img/banner.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center; }
浏览器默认设置reset.css,一开始我用的是它,但使用后h1的标题大小失效,有点暴力。用normalize.css还是比较温和的,如果前端了解很深的可以,自己写默认设置。
选择器:nth-child()和nth-of-type()选择器匹配属于其父元素的第n个元素,n可以是数字和关键字或公式。odd和even是比较常见的。
本人初学者,如有错误请勿怪。