常规流练习

最新推荐文章于 2022-03-19 14:40:41 发布

081&33

最新推荐文章于 2022-03-19 14:40:41 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/weixin_51398691/article/details/113834190

版权

快捷方式
section*5>(h2>{章节$})+(p*3>lorem)

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="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <article class="container">
        <!-- 此时白色部分被遮住，article不设置height,为auto,为适应内容的高度 -->
        <header>
            <h1 >css中不为人知的部分</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. Pariatur, maiores odit quod dolorum cupiditate dolore id porro reprehenderit minima debitis in praesentium cum nam ad ducimus culpa, eligendi tenetur. Quibusdam.</p>
            <p>Ducimus minima laborum dolore facilis in quo nesciunt itaque. Quidem deleniti perferendis tempora velit rerum reiciendis eius consequuntur ab tempore pariatur? Et natus cupiditate mollitia a sapiente. Odio, repellat qui?</p>
            <p>Odit ex, autem doloribus quisquam vitae, ullam, temporibus in dolore deleniti facilis dolores dolorum perspiciatis nesciunt! Qui dolorem incidunt sapiente voluptates ipsa officiis fugit placeat tempora. Harum sed ex laboriosam!</p>
        </section>
        <section>
            <h2>章节2</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nisi, incidunt vitae itaque ad architecto repellendus libero nostrum, cum distinctio non natus, hic asperiores veniam iste nesciunt reiciendis quisquam recusandae?</p>
            <p>Eos expedita labore beatae accusamus possimus rerum mollitia deleniti maiores veniam quidem! Sequi quas illum impedit nobis, veritatis consequuntur culpa saepe laborum, aspernatur quam facilis ducimus, maxime distinctio! Culpa, accusamus.</p>
            <p>Harum itaque ullam temporibus culpa, nulla beatae aspernatur facere neque commodi, corrupti ex quidem sunt. Quo voluptatibus eos consectetur? Nisi sapiente possimus dignissimos architecto perspiciatis rerum distinctio magni labore recusandae.</p>
        </section>
        <section>
            <h2>章节3</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel velit quis quisquam aliquid officia ad. Totam, itaque dicta adipisci accusamus amet molestiae rerum vel officia iure modi non? Ipsa, necessitatibus.</p>
            <p>Eveniet adipisci necessitatibus vitae voluptatem veniam voluptates excepturi, hic accusantium aspernatur exercitationem delectus eum tempora ab inventore! Alias nobis quibusdam fugiat cumque? Voluptas, rerum consequuntur voluptatibus odio ipsum iste culpa.</p>
            <p>Deleniti accusantium doloremque, ducimus nobis placeat tempora ratione numquam, harum architecto suscipit consectetur in non. Maxime velit cumque, a illum aliquam, ipsa ea consequuntur, nulla ab aliquid beatae similique sunt.</p>
        </section>
        <section>
            <h2>章节4</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nesciunt delectus, vel cum expedita consequuntur ut unde nihil magni deleniti, nobis placeat, commodi assumenda? Molestias rem corrupti aut quam nostrum!</p>
            <p>Veritatis laborum nam non labore deserunt corrupti quod quaerat doloremque animi iusto eos cumque voluptas, facilis quibusdam cum quasi id! Enim impedit dicta incidunt nam autem nulla. Facilis, suscipit mollitia.</p>
            <p>Est dicta, quod eaque tempore sunt fuga autem corporis omnis delectus eveniet adipisci reprehenderit recusandae! Sunt eos voluptate dolor! Sapiente nulla delectus illo distinctio impedit similique nam neque labore ex.</p>
        </section>
        <section>
            <h2>章节5</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam modi dolores totam atque iure placeat quidem soluta. Ab optio iste hic ex recusandae, est ipsa facilis, placeat corporis eaque aliquid.</p>
            <p>Voluptas veritatis quia dicta, in eligendi magnam perspiciatis architecto aliquam facilis porro aliquid cumque, unde, distinctio nulla possimus recusandae commodi cupiditate sit vel a. Culpa reiciendis minus officiis molestiae cum.</p>
            <p>Accusamus nulla asperiores iste quisquam nobis eligendi cumque architecto nam amet qui dolorum ullam, officia repudiandae! Obcaecati illo ratione, vitae in non aspernatur eum perspiciatis eaque autem odit, exercitationem deleniti.</p>
        </section>      
    </article>
</body>
</html>

重置样式表
/* 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;
}

样式
body{
    background: #4a4d40;
    padding: 20px 0; 
    /* width: 1902px; 太宽，出现滚动条，商量，按比例缩放*/
    /* 此时不设置宽高， */
    /* 子标签活动范围是父标签的内容区，但不是子标签的内容区是父标签的内容区 */
    /* 可以设置body标签的上下内边距，也可以设置article标签的上下外边距 */
    line-height: 2;
    /* 行高可以继承，所有行高都为2 */
    min-width: 1000px;
    /* 最小宽度，当小于1000px就会出现滚动条，避免影响视觉效果 */
    /* max-width: ;最大宽度 */
}
/* 标签选择器 */
.container{
    background: #fff;
    width: 90%;
    margin: 0 auto;
    /* margin设置为0，与header合并，所以看不到白色 */
    /* border: 2px red solid ;加边框解决 */
    padding: 30px 0;
}
/* 类选择器 */
.container header{
    background: #267890;
    color: #fff;
    text-align: center;
    /* margin: 30px 0;不注释这个变成60px */
    border: 5px solid #14414e;
    margin: 0 -34px;
}
.container header h1{
    font-size:42px;
    font-weight: 700;
    /* bol或700,表示加粗 */
}
.container header .original-link{
    color: #dbdbdb;
    margin-bottom:27px;
    /* 此时不合并，因为有边框 */
}
.container header .original-link a{
    text-decoration: underline;
}
.container header .original-link a:hover{
    color:rgb(255, 255, 255);
}
.container section{
    width: 90%;
    margin: 0 auto;
}
.container section p{
    margin:1em 0;
}
.container section h2{
    font-size:32px ;
    font-weight: bold;
    border-top: khaki 1px dashed;
    border-bottom: deeppink 1px dotted;
}

成果图
在这里插入图片描述

081&33

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
常规流练习

快捷方式section*5>(h2>{章节$})+(p*3>lorem)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=devi
复制链接

扫一扫