CSS-10常规流练习-csdn博客

最新推荐文章于 2024-06-01 21:24:45 发布

薄荷叶汁

最新推荐文章于 2024-06-01 21:24:45 发布

阅读量172

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/duzishivip/article/details/103162929

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/test.css">
</head>
<body>
    <article class="container">
        <header>
            <h1>这是博客的标题</h1>
            <div class="original-link">
                <p>Lorem ipsum dolor sit.</p>

            </div>
        </header>
        <section>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas libero ab animi ipsum recusandae, eius ducimus quidem sed voluptatibus amet modi delectus nisi, distinctio doloribus voluptatem quo inventore officia et.</p>
            <p>Laboriosam, doloremque libero? Consequuntur blanditiis, iure minima doloremque quis suscipit expedita enim, facilis exercitationem nam corporis. Iste explicabo, consectetur eligendi fugiat in iure autem debitis placeat veritatis eius maxime cumque.</p>
            <p>Mollitia omnis dignissimos, aut magnam quos, officia at adipisci rem laudantium, accusamus nesciunt harum odit facere unde. Explicabo provident vitae eligendi ipsum architecto autem, aut laboriosam eveniet, minus, cupiditate saepe!</p>
        </section>
        <section>
            <h2>章节1</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perspiciatis nisi numquam laborum. Dolor ducimus quos totam fugiat distinctio, ex libero sed reprehenderit aspernatur, incidunt non eos dolores. Fuga, quisquam?</p>
            <p>Dolor, sunt sequi? Dolorum atque quas nisi aliquam quos sint eius ducimus sunt autem nobis commodi quae placeat reiciendis ad, velit qui ea mollitia. Corporis non eveniet cum dolore cumque.</p>
            <p>Rerum veritatis, consectetur earum esse eum ad velit aliquid accusamus nemo laudantium blanditiis odio sed illo vitae inventore eaque neque ducimus consequuntur perspiciatis incidunt? In porro perferendis ipsam fuga nostrum!</p>
        </section>
        <section>
            <h2>章节2</h2>
            <p>Tempora, aut est! Reprehenderit, consequuntur doloremque fuga asperiores nulla omnis perspiciatis esse. Quibusdam sed eos sapiente inventore in nisi eum natus accusamus omnis. Corrupti ut repudiandae optio quibusdam, libero dolorem.</p>
            <p>Repellat corporis non minima quod nobis! Illo officia tenetur ab corrupti tempore eum! Necessitatibus doloribus vitae officiis officia perferendis, molestiae unde quas. Non blanditiis culpa odit ipsum voluptatem quos eius.</p>
            <p>Deserunt neque ratione earum eligendi dolorum corrupti natus itaque fugiat, tenetur amet veniam rerum laborum officiis, animi sapiente laboriosam ab perspiciatis sunt autem quam ipsa quasi ut? Nam, ratione eum.</p>
        </section>
        <section>
            <h2>章节3</h2>
            <p>Consequuntur itaque doloribus ipsa reprehenderit mollitia. Modi iste officiis porro quisquam voluptatum atque laboriosam sunt repellat ipsam molestias commodi facere tenetur autem fuga dolor, vel soluta voluptatem ipsa laudantium! Libero.</p>
            <p>Totam consequuntur, velit quibusdam temporibus possimus voluptatibus animi ratione voluptatem porro deleniti cumque corrupti voluptatum, necessitatibus nemo minima quos a omnis quaerat. Unde mollitia quasi deserunt perspiciatis sit hic repudiandae?</p>
            <p>Perspiciatis in facere placeat! Cum, totam. Recusandae iusto ab voluptas enim quas, deserunt laborum minus accusantium dolorem perspiciatis dolor dolorum vitae, voluptates aut voluptatibus error. Eligendi accusantium eos porro at!</p>
        </section>
        <section>
            <h2>章节4</h2>
            <p>Natus pariatur adipisci reiciendis, recusandae deleniti eligendi provident odio eum consequuntur minus amet alias ducimus id nobis at accusantium consectetur quae obcaecati. Harum tenetur numquam quisquam rerum corrupti. Aspernatur, nihil?</p>
            <p>Neque dignissimos architecto culpa tenetur numquam deserunt id a quos aliquid iusto veniam voluptatibus hic, ea est facilis mollitia quam assumenda? Omnis eos voluptatem odio ipsum nulla ratione minus amet.</p>
            <p>Repellendus numquam distinctio, saepe velit veritatis facere esse reprehenderit vel quibusdam laudantium ratione eveniet iure beatae odio iste ipsam sed itaque harum! Nostrum totam quibusdam pariatur possimus. Nulla, amet excepturi!</p>
        </section>
        <section>
            <h2>章节5</h2>
            <p>Libero, nostrum. Iure libero reprehenderit optio pariatur ullam tenetur? Minus assumenda nisi, tempore necessitatibus aut ratione incidunt explicabo. Beatae, sequi! Distinctio, saepe. Itaque adipisci sed doloribus repellendus tempore nihil debitis.</p>
            <p>Sed, neque, cupiditate nisi inventore sapiente in recusandae rem unde molestiae dolor vero soluta? Debitis, repellendus excepturi, et cupiditate iure vitae obcaecati velit consequuntur explicabo, ipsam reprehenderit blanditiis sed ducimus.</p>
            <p>Unde sint repellendus eos quaerat aliquid ab necessitatibus, est impedit praesentium numquam fugiat debitis reprehenderit, quo alias saepe. Asperiores hic laborum assumenda accusantium officia nesciunt aut, iste totam repudiandae consequatur!</p>
        </section>
    </article>
</body>
</html>

css代码

body{
    background-color: #f5f6f7;
}
section {
    margin-right: 0px;
    margin-left: auto;
    margin-top: 1px;
    margin-bottom: 1px;
    display: block;
    width: 760px;
    padding: 12px 24px;
    background-color: #fff;
    word-wrap: break-word
    /* border: 400px; */
}
header{
    height: 100px;
    width: 100%;
    display: block;
    margin: 0px;
    padding-top: 24px;
    background-color: rgba(13, 7, 92, 0.973);
}
h1{
    width: 252px;
    height: 37px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
header div{
    display: block;
    width: 252px;
    height: 22px;
    color: #7b705e;
}
h2{
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
    color: #3d3d3d;
    display: inline-block;
    word-wrap: break-word;
    font-weight: bold;
}
section p{
    font-size: 14px;
    line-height: 22px;
    
    color: #6b6b6b;
    width: 712px;
    height: 22px;
    display: block;
    /* 断词隐藏空白。。。四件套 */
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

薄荷叶汁

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS-10常规流练习-csdn博客

HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫