第一个网页练习

步骤

一、观察设计稿

设计稿大致分为两部分：body背景、article包含header

二、创建工程，index.html+index.css+reset(样式重置)

1.创建工程

2.链接css

三、自下而上，先html后css

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>ZMN的第一个博客</h1>

网站地址：<a href="https://www.cnblogs.com/zmngo/" >http://www.cnblogs.com/zmngo</a>

</div>

</header>

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>

<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>

<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>

<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;

}

posted @ 2022-09-25 11:59 FTE 阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

第一个网页练习

公告