HTML css——常规流练习（附代码）

最新推荐文章于 2024-07-04 10:59:43 发布

33的史努比

最新推荐文章于 2024-07-04 10:59:43 发布

阅读量138

点赞数

分类专栏：前端入门学习文章标签： css html ruby

本文链接：https://blog.csdn.net/coising/article/details/122540827

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

练习

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

文章目录

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. 结果

页面部分截图

33的史努比

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML css——常规流练习（附代码）

练习学完常规流，跟着视频完成设计稿要求文章目录练习1. reset.css 添加关于a元素2. 新建css文件书写样式3. HTML文件4. 结果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,
复制链接

扫一扫