HTML css——常规流练习(附代码)

练习

学完常规流,跟着视频完成设计稿要求

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>

4. 结果

页面部分截图

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值