练习
学完常规流,跟着视频完成设计稿要求
1. reset.css 添加关于a元素
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*添加的部分*/
a {
text-decoration: none;
color: inherit;
}
2. 新建css文件书写样式
body{
background-color: #4d4a40;
padding: 20px 0;
line-height: 2;
min-width: 1000px;
/* max-width */
}
.container{
background-color: white;
width: 90%;
/* body的内边距即包含块的margin 所以此处不用设置margin */
margin: 0 auto;
padding: 30px 0;
}
.container header{
background-color: #267890;
color: #fff;
text-align: center;
border: 5px solid #14414e;
margin: 0 -34px;
}
.container header h1{
font-size: 42px;
font-weight: bold;
}
.container header .original-link{
color: #dbdbdb;
margin-bottom: 26px;
}
.container header .original-link a{
text-decoration: underline;
}
.container header .original-link a:hover{
color: #fff;
}
.container section{
/* 算百分比是相对于其包含块即article */
width: 90%;
/* 居中 */
margin: 0 auto;
}
.container section p{
/* 段落之间空一行 */
margin: 1em 0;
}
.container section h2{
font-size: 32px;
font-weight: bold;
border-top: 1px dotted;
border-bottom: 1px dashed;
}
3. HTML文件
<!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="reset.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<article class="container">
<header>
<h1>
这是文字标题
</h1>
<div class="original-link">
原文地址:<a href="https://www.baidu.com">https://www.baidu.com</a>
</div>
</header>
<section>
<h2>章节1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure tenetur deserunt repellat vitae laudantium aliquam porro animi harum aspernatur reprehenderit, beatae dolorum totam culpa officiis facere pariatur consequatur maiores! Alias.</p>
<p>Suscipit deserunt ad quidem odio, vitae quisquam odit reprehenderit reiciendis nihil doloribus. Quaerat quos reprehenderit voluptatibus itaque error voluptatum eligendi quidem commodi vero, maiores labore at earum atque illum dicta?</p>
<p>Porro esse deleniti laboriosam eaque sint enim doloremque molestiae, nobis commodi optio aperiam fugit omnis vel nulla nemo atque corrupti ex obcaecati minus? Veritatis debitis minima, ratione sint quod nulla.</p>
</section>
<section>
<h2>章节2</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus quam, debitis voluptates ea cumque accusantium impedit expedita excepturi reprehenderit unde deleniti vero, nulla rem! Veritatis neque labore facilis mollitia repudiandae?</p>
<p>Optio eum aperiam id corporis? Dignissimos ducimus in minima, dolores nobis voluptates amet veritatis, aut delectus consectetur reiciendis praesentium ut expedita fuga animi. Mollitia incidunt exercitationem nesciunt molestiae illum fugiat!</p>
<p>Explicabo corporis dicta modi repudiandae animi quod illo maxime eveniet fuga esse facere veritatis numquam libero quo maiores eum dolorem accusamus, velit accusantium! Atque recusandae quis repellendus dolores eum quae?</p>
</section>
<section>
<h2>章节3</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto aspernatur quisquam nobis quas nesciunt, odit tempora eaque dolor quibusdam magni tenetur, optio harum quidem assumenda, expedita dolore maxime. Harum, sequi.</p>
<p>Error minima expedita provident numquam facilis unde similique non, et labore enim hic doloremque itaque perspiciatis culpa facere libero, aperiam distinctio dignissimos officiis, autem magnam. Quas minima nam blanditiis fuga!</p>
<p>Fugit accusantium nulla vitae adipisci officiis rem nisi qui iusto, a voluptatum soluta quisquam totam animi! Officiis doloribus vitae unde fuga numquam quam ipsam? Laudantium unde dignissimos incidunt magni ipsum.</p>
</section>
<section>
<h2>章节4</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa ex sequi mollitia dolores temporibus! Quisquam iste sequi aliquid quibusdam sed quae error voluptate repellat laborum ipsa, consequuntur cumque itaque natus?</p>
<p>Consequuntur labore delectus rem modi temporibus eos culpa, atque reiciendis illo cupiditate sint optio, dolorum sit vitae itaque perspiciatis. Asperiores recusandae cumque enim corporis labore neque harum consequuntur, ex accusantium?</p>
<p>Enim dignissimos beatae sed, facere nam, expedita alias natus, debitis ipsum dolores quam consequuntur perspiciatis suscipit temporibus veniam accusamus? Incidunt labore officiis veniam alias cupiditate eligendi ad repellendus. Amet, facere?</p>
</section>
<section>
<h2>章节5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolorum distinctio hic quidem laborum rerum sequi nulla repudiandae tempora, sapiente nihil harum sed neque voluptates pariatur placeat! Optio, temporibus nemo.</p>
<p>Ratione, doloribus a, quis laboriosam rerum minima pariatur accusamus repellat atque exercitationem facilis aut temporibus ea placeat odio aliquam. A assumenda veniam laudantium error similique amet vel sed, soluta architecto?</p>
<p>Ex, delectus commodi possimus qui inventore necessitatibus officiis, eligendi repellat exercitationem iusto impedit repudiandae. Obcaecati unde, modi consequuntur recusandae voluptatem minima ex nostrum mollitia odio quos enim distinctio facilis possimus?</p>
</section>
</article>
</body>
</html>