步骤
一、观察设计稿
设计稿大致分为两部分：body背景、article包含header
二、创建工程，index.html+index.css+reset(样式重置)
1.创建工程
2.链接css
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/index.css">三、自下而上，先html后css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <article class="container"> <header> <h1>ZMN的第一个博客</h1> <div class="address-link"> 网站地址：<a href="https://www.cnblogs.com/zmngo/" >http://www.cnblogs.com/zmngo</a> </div> </header> <section> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia tempora exercitationem dolores libero laboriosam, similique dolorem itaque alias! Rerum suscipit consequuntur quae nostrum tempora numquam earum, reprehenderit ipsum vero ipsam. </section> <section> <h2>章节1</h2> <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, autem! Voluptatem sapiente sequi architecto praesentium repellat quam dolorum tempore ad est totam temporibus fugiat aliquid id provident consectetur, dolores illo?</span><span>Praesentium, sint quisquam, ad id atque ullam rerum aperiam nobis dolorum exercitationem labore repellat libero quam quae? Numquam delectus tempore aliquam nisi deleniti eligendi dolores laboriosam. Optio, quidem! Rem, minima?</span></p> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia exercitationem magni aspernatur ipsa ipsam voluptas dolores quibusdam asperiores amet ad quod expedita, vitae blanditiis sed reprehenderit nesciunt dicta veritatis aliquid.</span><span>Culpa, accusamus omnis dolorem cupiditate voluptates reiciendis non laudantium accusantium labore. Sed cupiditate placeat sit minima rem dolor distinctio labore dolorum. Maxime harum, aperiam officiis nisi molestias nesciunt illum voluptatibus.</span></p> <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quia aspernatur laboriosam officiis sapiente animi aliquam porro id fuga eligendi nemo omnis beatae quisquam ipsa praesentium voluptatum, doloribus laudantium? Saepe.</span><span>Tenetur dolor quibusdam et nisi maxime repellat reiciendis eaque expedita reprehenderit assumenda ipsum doloribus exercitationem, quae illo quod voluptas maiores rem explicabo ad, corporis dolorem quos. Pariatur quidem asperiores nobis?</span></p> </section> <section> <h2>章节2</h2> <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ex molestias exercitationem fuga harum sequi animi tempore magni perferendis, reiciendis neque est ducimus necessitatibus officia qui adipisci, molestiae, accusamus impedit?</span><span>Accusantium, quisquam eum nostrum necessitatibus animi nam soluta odit aliquam delectus dicta voluptatibus ad doloremque iusto sapiente, quam, sint ut optio inventore. Sequi, iusto? Iure aliquam voluptas sapiente officiis minima.</span></p> <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo alias atque non cum adipisci rem fugit magnam nemo exercitationem, fugiat ratione fuga ipsam consequatur doloremque mollitia. Saepe, dignissimos at? Iste.</span><span>Quae a similique qui, deserunt, inventore maiores reprehenderit asperiores consectetur minima expedita minus quasi voluptates temporibus omnis ipsam. Quae expedita asperiores libero dolor iure mollitia cumque eligendi veniam temporibus fugit.</span></p> <p><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, tempora cumque nihil delectus iusto soluta nostrum omnis cupiditate, molestiae, laudantium eveniet necessitatibus nam eligendi vero facilis perferendis praesentium perspiciatis sed?</span><span>Eius eveniet voluptatum cumque voluptatem doloremque doloribus veniam tenetur cupiditate nobis a libero recusandae, in, quasi laboriosam. Magnam a quis voluptates nemo expedita, est aut tempora sed, cupiditate veritatis illum.</span></p> </section> <section> <h2>章节3</h2> <p><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus culpa, sed deleniti laborum expedita aut id similique earum nam magnam dignissimos vitae tempore doloribus dolor exercitationem. Repellat provident sed numquam.</span><span>Incidunt reprehenderit assumenda ipsam commodi autem odio quas atque consectetur rem aperiam recusandae dolorem harum neque fuga perferendis reiciendis facilis error non eius quasi pariatur, quibusdam quo iusto. Et, quibusdam.</span></p> <p><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque, voluptates iusto soluta nam quia omnis quos odio, qui nisi sed a ipsam eveniet dolores iure ullam facilis eum tenetur eius?</span><span>Porro debitis omnis suscipit aliquam, atque eveniet illum libero facere laudantium harum similique assumenda, adipisci sapiente, iste molestias non? Dicta quaerat reiciendis repudiandae, labore itaque iusto dolorum eaque provident commodi.</span></p> <p><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae officiis aliquid vel accusamus asperiores modi sit, explicabo labore sunt, neque ducimus saepe reprehenderit iusto quod ipsum? Dolorum quas nihil explicabo?</span><span>Ullam eaque et cumque aliquid velit doloribus obcaecati quisquam maiores asperiores, illo rem ab vitae, eligendi, culpa molestiae aperiam dolores? Modi ex aliquid officiis labore neque quod et accusamus vel?</span></p> </section> </article> </body> </html> body{ background-color: #4d4a40; line-height: 2; padding: 20px 0; min-width: 1000px;//网页最小尺寸 } .container{ background-color: #fff; width: 90%; padding: 30px 0; margin: 0 auto; } .container header{ background-color: #267890; border: 5px solid; color: #fff; text-align: center; font-weight: bold; border-color: #14414e; margin: 0 -34px; } .container header h1{ font-size: 42px; } .container header .address-link{ color: #dbdbdb; padding-bottom: 20px; } .container header .address-link a{ text-decoration: underline; } .container header .address-link a:hover{ color: #fff; } .container section{ width: 90%; margin: auto; } .container section h2{ font-size: 32px; border-top: 1px dotted; border-bottom: 1px dotted; } 标签：ipsum,网页,第一个,sit,练习,consectetur,elit,dolor,amet From： https://www.cnblogs.com/zmngo/p/16727311.html