HTML5&CSS3——常规流实战开发训练

最新推荐文章于 2022-02-19 18:13:57 发布

原创最新推荐文章于 2022-02-19 18:13:57 发布 · 315 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #css #css3 #web

本文介绍了一个使用CSS重置样式表和常规流布局的实际案例，详细展示了如何通过CSS实现网页元素的精确控制，包括重置默认样式、设置响应式布局及段落和标题的样式。

部分地方有改动，仅供参考！

设计稿

在这里插入图片描述

CSS重置样式表reset

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
h1,h2,h3,h4,h5,h6,em,i {
    font-weight: 100;
    font-style: normal
}
ul,ol,li {
    list-style-type: none
}
a {
    color: #666;
    text-decoration: none;
    outline: 0
}
a:hover {
    text-decoration: none;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常规流开发练习</title>
    <link rel="stylesheet" href="./Reset.css">
    <link rel="stylesheet" href="./常规流实战开发.css">
</head>
<body>
    <article class="container">
        <header class="top">
            <h1>常规流开发练习</h1>
            皮皮晗的小屋:<a href="http://pipihan.club/Login%20in.html">http://pipihan.club/Login%20in.html</a>
        </header>
        <section class="first">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, dicta?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ab quaerat amet ad explicabo aliquid sit tempora, eius dolores sunt rerum, perspiciatis facere, cupiditate minima laudantium culpa atque maxime sequi? Iure nesciunt officia amet error reprehenderit, harum eaque et ipsum velit incidunt consectetur alias quidem magni aut placeat atque pariatur iusto nihil deleniti odit est. Iure, aliquam! Neque eligendi corporis qui officiis, debitis commodi modi nulla amet odit dolorum, fuga soluta. In magnam nulla, officia aspernatur aperiam quaerat quisquam expedita cupiditate, molestiae suscipit fuga molestias delectus veritatis, doloremque consequatur? Impedit, numquam? Magni dignissimos consequuntur necessitatibus id fuga veritatis quasi perspiciatis!</p>
        </section>
        <section>
        <h1>
            渲染过程概述
        </h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus iure consequatur assumenda optio totam quae voluptate, iusto ab enim delectus!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad autem nisi quia omnis nostrum laboriosam mollitia explicabo sapiente doloremque, consequuntur nihil quas hic dolores rem maxime iusto cupiditate dicta quis. Quas perferendis, obcaecati commodi est at reiciendis asperiores enim neque eum cum iusto culpa, laboriosam, illo eligendi vitae repudiandae sequi sit fuga. Cupiditate eius atque culpa voluptate officiis pariatur incidunt deleniti praesentium eos ullam sequi porro quaerat numquam ipsa iure nemo doloribus nihil delectus, eveniet tempore ducimus laborum nam? Esse illum ut modi cumque doloremque quia optio ea tenetur quam. Culpa ex voluptas iste quibusdam laudantium nisi facilis, tenetur quis!</p>
        </section>
        <section>
            <h1>
                层叠
            </h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias sed reprehenderit error sunt impedit at, quaerat explicabo voluptas similique blanditiis?</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate vel repellendus facilis totam eveniet ea quibusdam, natus, et corporis ipsam accusamus aspernatur. Dolorum illum illo culpa sequi maiores repellat molestias. Velit asperiores repellendus aperiam quibusdam fugiat cupiditate facilis nemo consequuntur ut. Reprehenderit maxime perferendis et. Laborum, inventore. Odio earum suscipit nihil recusandae vel doloremque iste modi cumque cupiditate ut quos minima dolore nostrum, veniam corrupti, soluta sequi atque accusantium! Nostrum rerum odio esse, necessitatibus a provident perferendis suscipit officia ab iusto, assumenda aperiam veniam eligendi veritatis natus nisi alias sit minus voluptate atque eius, ratione ad? In eos amet labore.</p>
        </section>
    </article>
</body>
</html>

CSS代码

body{
    background-color: #4d4a40;
    line-height: 2;
    padding:20px 0;
    min-width: 1000px;/*页面最小宽度为1000像素*/
}
.container{
    background-color: white;
    width: 90%;
    padding-top: 30px;
    margin:auto;
}
.container .top{
    background-color: #267890;
    border: 5px solid #14414e;
    margin-left: -34px;
    margin-right: -34px;
    padding-bottom: 30px;
    text-align: center;
}
.container .top h1{
    font-size: 42px;
    color: #fff;
    font-weight: bold;
}
.container .top a{
    text-decoration: underline;
    color: #dbdbdb;
}
.container .top a:hover{
    color: #fff;
}
.first{
    margin-top: 30px;
}
section{
    width: 90%;
    margin:0 auto;
}
article section h1{
    font-size: 32px;
    text-align: left;
    font-weight: bold;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
}
.container section p{
    margin: 1em 0;
}