设计稿
重置样式.css
/* 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;
}先完成基本部分
html
<link rel="stylesheet" href="../css/重置样式.css">
<link rel="stylesheet" href="../css/index.css"><article class="article-container">
Lorem ipsum dolor 。。。。。。。。
</article>css
body {
/* 背景颜色 */
background: #4d4a40;
/* 内边距 */
padding: 20px 0;
/* 每行行高 */
line-height: 2;
}
.article-container {
background: #fff;
width: 90%;
/* 居中 */
margin: 0 auto;
padding: 30px 0;/*内边距*/
}运行
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">
<link rel="stylesheet" href="../css/重置样式.css.css">
<link rel="stylesheet" href="../css/index.css">
<title>Document</title>
</head>
<body>
<article class="article-container"><!--article 的高度时自动的 header的高度多高 他就多高-->
<!--lorem2000-->
<header>
<h1>文章的标题</h1>
<div class="original-link"><!--original-link 原文链接-->
原文地址：<a href="#">https://blog.csdn.net/weixin_58359043?spm=1000.2115.3001.5343</a>
</div>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam quisquam in. Vel repellendus ratione nihil libero sunt soluta reiciendis minus inventore eum vero voluptatum enim magni quisquam ex voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita repudiandae aliquid cum eius tenetur quaerat ad dolor sapiente maxime quos asperiores explicabo culpa non fugit doloribus ratione hic odio quasi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus eveniet aliquid deserunt deleniti saepe maxime totam odio fugit doloribus qui quibusdam eius esse non temporibus cupiditate consequuntur ratione itaque reprehenderit!</p>
</section>
<section>
<h2>章节1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis maiores vero recusandae suscipit sequi facere ad itaque deserunt numquam nihil impedit voluptas! Nesciunt animi fuga pariatur vitae sequi soluta voluptate.</p>
<p>Labore ipsa fugiat totam repellat adipisci deleniti illo nobis necessitatibus maiores natus fuga incidunt corrupti. Magnam architecto distinctio dignissimos minima optio odit aliquid illum sint aliquam quia voluptatum illo iste.</p>
<p>Suscipit eaque similique vel debitis itaque fugit ducimus quasi recusandae consequuntur adipisci aperiam quod iure dignissimos temporibus reiciendis dicta magni architecto veritatis. Reprehenderit ratione harum natus odit error quos inventore.</p>
</section>
<section>
<h2>章节2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis maiores vero recusandae suscipit sequi facere ad itaque deserunt numquam nihil impedit voluptas! Nesciunt animi fuga pariatur vitae sequi soluta voluptate.</p>
<p>Labore ipsa fugiat totam repellat adipisci deleniti illo nobis necessitatibus maiores natus fuga incidunt corrupti. Magnam architecto distinctio dignissimos minima optio odit aliquid illum sint aliquam quia voluptatum illo iste.</p>
<p>Suscipit eaque similique vel debitis itaque fugit ducimus quasi recusandae consequuntur adipisci aperiam quod iure dignissimos temporibus reiciendis dicta magni architecto veritatis. Reprehenderit ratione harum natus odit error quos inventore.</p>
</section>
<section>
<h2>章节3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis maiores vero recusandae suscipit sequi facere ad itaque deserunt numquam nihil impedit voluptas! Nesciunt animi fuga pariatur vitae sequi soluta voluptate.</p>
<p>Labore ipsa fugiat totam repellat adipisci deleniti illo nobis necessitatibus maiores natus fuga incidunt corrupti. Magnam architecto distinctio dignissimos minima optio odit aliquid illum sint aliquam quia voluptatum illo iste.</p>
<p>Suscipit eaque similique vel debitis itaque fugit ducimus quasi recusandae consequuntur adipisci aperiam quod iure dignissimos temporibus reiciendis dicta magni architecto veritatis. Reprehenderit ratione harum natus odit error quos inventore.</p>
</section>
</article>
</body>
</html>CSS:
body {
/* 背景颜色 */
background: #4d4a40;
/* 内边距 */
padding: 20px 0;
/* 每行行高 */
line-height: 2;
}
.article-container {
background: #fff;
width: 90%;
/* 居中 */
margin: 0 auto;
padding: 30px 0;/*内边距*/
}
.article-container header{
background: #267890;/*header的背景*/
color: #fff;
text-align: center;/*标题居中*/
border: 5px solid #14414e;
margin: 0 -34px; /*居中 左右两部分 多出来*/
}
.article-container h1{/*给h1设置样式*/
font-size: 42px;
font-weight: bold;/*字体加粗*/
}
.article-container header .original-link a{
text-decoration: underline;/*添加底线*/
}
.article-container header .original-link a:hover{/*鼠标移入的*/
color: red;
}
.article-container section{
width: 90%;
margin: 0 auto;
}
.article-container section p{
/*段落与段落之间隔开一行*/
margin: 1em 0;
}
.article-container section h2{
font-size: 30px;
font-weight: bold;
border-top: 1px double;/*双实线*/
border-bottom: 1px dotted;/*虚线*/
}
