项目1：常规流练习

最新推荐文章于 2024-06-12 20:49:37 发布

guai_guai_guai

最新推荐文章于 2024-06-12 20:49:37 发布

阅读量51

点赞数

分类专栏： # 前端知识总结文章标签： html5 css

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134233797

版权

前端知识总结专栏收录该内容

24 篇文章 1 订阅

订阅专栏

常规流中常见效果制作方法

今天我想分享一下关于以下图片样式的制作方法：

首先创建一个html文件和css文件夹，css文件夹中存放重置样式（reset.css）和自己设置的样式，并将其链接到html文件中，记得先重置再引用！

<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">

先将设计稿分为几个区域，分别对每个区域进行html和样式的设计，先看整个深色区域，

在body上设置背景颜色，表示整个网页的背景

将白色区域用article元素设计，并设置属性方便进行css设计,网页中article与body元素有上下边距，可以通过设置body的上下内边距或article的上下外边距，在这里我就用body的上下内边距吧

用百分比设置宽度的方法

设计稿中也有对body和article宽度的设定，为了增强用户的体验感，这时就不能直接设置其宽度，而应设置article相对于其包含块即父元素的内容区（即body的内容区）的百分比，按比例简单计算得为90%

定宽时居中的方法

而article又在body中居中，此时article中已定宽，则设置其外边距左右为auto

网页中所有文字行高为2em，这是我们可以通过设置body的行高来控制整个网页的行高（元素之间有继承）

body{
    background-color: #4d4a40;
    padding:20px 0 ;
    line-height: 2;
   
}
.containter{
    background-color: #fff;
    width: 90%;
    margin:0 auto;
  
}

接下来是文章头部，文章头部整体可用header元素包括

头部分为大标题（h1）和类似于超链接的一小行文字组成（用div包含）

      <header>
            <h1>这是文章的标题</h1>
            <div class="original-link">
                原文地址：<a href="">https://www.baidu.com</a>
            </div>
        </header>

高度自适应时常见问题

之后为头部设置样式，背景颜色，文字颜色，文字居中（可继承，子元素最终会继承该样式），设置完背景颜色之后会发现原本的白色已然被覆盖，那是因为外部article的高度是自适应的，适应其内容，故白色背景会被覆盖

header上方与body仍有30px的距离，这里如果设置header的margin来实现，如下

.containter header{
    background-color: #267890;
    color:#fff ;
    text-align: center；
    margin: 30x 0;
}

上下外边距合并问题

此时并未出现header与article之间30px的间距，是因为header与article外边距相邻，会发生上下外边距合并，最后Margin会合并为两个元素最大值。结果如下：

要想解决这个问题，设置article（container）的padding 即可

body{
    background-color: #4d4a40;
    padding:20px 0 ;
    line-height: 2;
    min-width: 1000px;
}
.containter{
    background-color: #fff;
    width: 90%;
    margin:0 auto;
    padding: 30px 0;
}
.containter header{
    background-color: #267890;
    color:#fff ;
    text-align: center;
    border: 5px solid #14414e;
    margin: 30x 0;
    
}

左右突出效果

之后设置左右突出效果，即左右margin为负值。

.containter header{
    background-color: #267890;
    color:#fff ;
    text-align: center;
    border: 5px solid #14414e;
    margin: 30x 0;
    margin:0 -34px;
}

看看效果：

接着设置header字体及样式以及原文地址及链接的样式，设置原文地址样式时，最好别用元素选择器，项目中同种元素很多，为了避免混淆，最好使用类选择器，在这里就设置原文地址class为original-link。

行高影响字与边缘的距离问题

原文地址与header下方有三十个像素，但因为有行高，所以margin-bottom应适当的减小，或者设置该行字体行高为1

 <article class="containter">
        <header>
            <h1>这是文章的标题</h1>
            <div class="original-link">
                原文地址：<a href="">https://www.baidu.com</a>
            </div>
        </header>
 </article>
.containter header{
    background-color: #267890;
    color:#fff ;
    text-align: center;
    border: 5px solid #14414e;
    margin: 30x 0;
    margin:0 -34px;
}
.containter header h1{
    font-size: 42px;
    font-weight: bold;
}
.containter header .original-link{
    color: #dbdbdb;
    margin-bottom: 26px;
}

接着设置a元素样式，并且设置鼠标移入时链接字体颜色为白色

.containter header .original-link a{
    text-decoration: underline;
}
.containter header .original-link a:hover{
    color: #fff;
}

这一部分可以分为几个section，有些有标题，有些没标题，里面内容可以用p元素包含

 <section>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex incidunt ipsa alias autem, recusandae provident magnam suscipit dicta rem repellendus quae obcaecati sunt esse labore corrupti expedita voluptatibus quas nisi.</p>
  </section>
  <section>
                <p>Quisquam corporis est quaerat dicta exercitationem alias libero fugiat nisi perferendis voluptatem aliquid quas adipisci modi rerum, veritatis eius possimus reiciendis quis officia illum placeat necessitatibus ipsum? Cumque, dolores provident!</p>
  </section>
  <section>
                <p>Sit, nobis? Sapiente, fugit dignissimos nobis libero eveniet dolorem reiciendis, architecto distinctio sit tempore asperiores animi sed necessitatibus. Possimus architecto quos totam tempora iure quae sequi corrupti quod, ducimus id.</p>
  </section>
  <section>
           <h2>章节1</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad officiis vel possimus dolorem eaque quam, quasi numquam maxime facilis doloribus omnis sit laborum dolor vitae placeat! Quae modi eveniet non.</p>
            <p>Voluptate velit molestias sed, reprehenderit eum et, dolorum ipsam, provident quaerat mollitia temporibus! Ipsum vitae voluptate provident quasi alias incidunt autem dignissimos error aspernatur aut facilis eius, voluptatum laudantium quam.</p>
            <p>Porro odit et atque dolor quos repellendus a impedit dolore tempore quam delectus perferendis iure incidunt, est sunt repudiandae. Inventore libero magni quae eos quis a quo nam at distinctio.</p>
   </section>
   <section>
      <h2>章节2</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit suscipit, enim doloribus voluptates iste, at aspernatur incidunt beatae mollitia in libero, eum molestias qui. Assumenda nemo debitis odio labore laudantium!</p>
      <p>Tempore suscipit consequuntur deserunt alias voluptatem quae error animi sapiente non numquam rerum qui vitae, repellendus, recusandae, maxime ea? Reiciendis ad quis nisi aspernatur cumque id voluptatem minima est mollitia.</p>
     <p>Distinctio reiciendis suscipit rerum officia at nostrum amet earum. Modi itaque qui, obcaecati adipisci aperiam doloribus eos similique nesciunt fuga in ullam, sapiente laborum nemo necessitatibus. Neque asperiores perferendis recusandae!</p>
  </section>
  <section>
      <h2>章节3</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, cupiditate nam quidem fuga iste iusto quasi natus praesentium cumque, aut architecto aspernatur ullam dignissimos odio expedita nobis libero incidunt exercitationem.</p>
                <p>Error dignissimos voluptates quam veniam consequuntur quibusdam, eius mollitia quod rem necessitatibus assumenda id enim modi nisi aperiam earum accusamus pariatur quas! Molestiae neque, praesentium ea nihil exercitationem provident consequatur?</p>
                <p>Hic nam explicabo magnam harum non mollitia quos neque inventore distinctio sint! A quis assumenda amet sint, pariatur reprehenderit nihil molestias voluptates aliquam impedit neque explicabo architecto, at quae accusamus.</p>
            </section>
            <section>
                <h2>章节4</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur consequatur laudantium laborum provident sunt! Aut distinctio unde, dolorum molestias possimus neque, aliquam eum reprehenderit facilis, dignissimos animi veniam non eius!</p>
                <p>Nihil, pariatur natus? Similique nobis adipisci quibusdam fugiat totam cupiditate ab aliquid doloribus est delectus perferendis, vero obcaecati atque numquam explicabo laborum magni in, eos aut optio eveniet fugit tempora!</p>
                <p>Neque fuga vitae animi ducimus cupiditate voluptas quo! Ut ipsum ad explicabo sed eligendi quasi odio enim nihil. Possimus harum tempore incidunt iste nisi. Doloremque exercitationem dolorum quis voluptatum deserunt.</p>
            </section>
            <section>
                <h2>章节5</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nam provident dicta perferendis, quo asperiores repudiandae unde doloremque accusantium sit laudantium explicabo incidunt, dolores molestiae consequuntur laboriosam eaque placeat pariatur!</p>
                <p>Nostrum labore quas distinctio blanditiis ea similique, dicta nulla, exercitationem fugiat reprehenderit amet animi placeat nisi ad, voluptas quaerat natus! Reiciendis temporibus rerum saepe, officiis fugiat consequatur assumenda dolorum atque.</p>
                <p>Ipsa incidunt architecto perferendis, aspernatur praesentium vitae in sunt porro harum repudiandae ducimus nobis facilis dolorum perspiciatis aut! Et aut fugit officia ab praesentium culpa delectus? Cum animi harum doloribus.</p>
            </section>

section内容宽度不能直接写像素，要写百分比，section包含块为article，故要大概算一下百分比，1541/1713约为90%，且文字居中

段落与段落之间有空行，则设置section中p元素的margin

接着设置h2元素样式，字体大小，加粗，上下边框

border中没有写边框颜色的话，颜色默认为字体颜色。

.containter section{
    width: 90%;
    margin: 0 auto;
}
.containter section p{
    margin: 1em 0;
}
.containter section h2{
    font-size: 32px;
    font-weight: bold;
    border-top: 1px dotted;
    border-bottom: 1px dotted;

}

网页的最小宽度和最大宽度

完善：设置网页最小宽度或最大宽度

body{
    background-color: #4d4a40;
    padding:20px 0 ;
    line-height: 2;
    min-width: 1000px;
    /* 最大宽度 max-width */
}

代码就写完啦，下面是完整html代码和css代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="containter">
        <header>
            <h1>这是文章的标题</h1>
            <div class="original-link">
                原文地址：<a href="">https://www.baidu.com</a>
            </div>
        </header>
            <section>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex incidunt ipsa alias autem, recusandae provident magnam suscipit dicta rem repellendus quae obcaecati sunt esse labore corrupti expedita voluptatibus quas nisi.</p>
            </section>
            <section>
                <p>Quisquam corporis est quaerat dicta exercitationem alias libero fugiat nisi perferendis voluptatem aliquid quas adipisci modi rerum, veritatis eius possimus reiciendis quis officia illum placeat necessitatibus ipsum? Cumque, dolores provident!</p>
            </section>
            <section>
                <p>Sit, nobis? Sapiente, fugit dignissimos nobis libero eveniet dolorem reiciendis, architecto distinctio sit tempore asperiores animi sed necessitatibus. Possimus architecto quos totam tempora iure quae sequi corrupti quod, ducimus id.</p>
            </section>
            <section>
                <h2>章节1</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad officiis vel possimus dolorem eaque quam, quasi numquam maxime facilis doloribus omnis sit laborum dolor vitae placeat! Quae modi eveniet non.</p>
                <p>Voluptate velit molestias sed, reprehenderit eum et, dolorum ipsam, provident quaerat mollitia temporibus! Ipsum vitae voluptate provident quasi alias incidunt autem dignissimos error aspernatur aut facilis eius, voluptatum laudantium quam.</p>
                <p>Porro odit et atque dolor quos repellendus a impedit dolore tempore quam delectus perferendis iure incidunt, est sunt repudiandae. Inventore libero magni quae eos quis a quo nam at distinctio.</p>
            </section>
            <section>
                <h2>章节2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit suscipit, enim doloribus voluptates iste, at aspernatur incidunt beatae mollitia in libero, eum molestias qui. Assumenda nemo debitis odio labore laudantium!</p>
                <p>Tempore suscipit consequuntur deserunt alias voluptatem quae error animi sapiente non numquam rerum qui vitae, repellendus, recusandae, maxime ea? Reiciendis ad quis nisi aspernatur cumque id voluptatem minima est mollitia.</p>
                <p>Distinctio reiciendis suscipit rerum officia at nostrum amet earum. Modi itaque qui, obcaecati adipisci aperiam doloribus eos similique nesciunt fuga in ullam, sapiente laborum nemo necessitatibus. Neque asperiores perferendis recusandae!</p>
            </section>
            <section>
                <h2>章节3</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, cupiditate nam quidem fuga iste iusto quasi natus praesentium cumque, aut architecto aspernatur ullam dignissimos odio expedita nobis libero incidunt exercitationem.</p>
                <p>Error dignissimos voluptates quam veniam consequuntur quibusdam, eius mollitia quod rem necessitatibus assumenda id enim modi nisi aperiam earum accusamus pariatur quas! Molestiae neque, praesentium ea nihil exercitationem provident consequatur?</p>
                <p>Hic nam explicabo magnam harum non mollitia quos neque inventore distinctio sint! A quis assumenda amet sint, pariatur reprehenderit nihil molestias voluptates aliquam impedit neque explicabo architecto, at quae accusamus.</p>
            </section>
            <section>
                <h2>章节4</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur consequatur laudantium laborum provident sunt! Aut distinctio unde, dolorum molestias possimus neque, aliquam eum reprehenderit facilis, dignissimos animi veniam non eius!</p>
                <p>Nihil, pariatur natus? Similique nobis adipisci quibusdam fugiat totam cupiditate ab aliquid doloribus est delectus perferendis, vero obcaecati atque numquam explicabo laborum magni in, eos aut optio eveniet fugit tempora!</p>
                <p>Neque fuga vitae animi ducimus cupiditate voluptas quo! Ut ipsum ad explicabo sed eligendi quasi odio enim nihil. Possimus harum tempore incidunt iste nisi. Doloremque exercitationem dolorum quis voluptatum deserunt.</p>
            </section>
            <section>
                <h2>章节5</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nam provident dicta perferendis, quo asperiores repudiandae unde doloremque accusantium sit laudantium explicabo incidunt, dolores molestiae consequuntur laboriosam eaque placeat pariatur!</p>
                <p>Nostrum labore quas distinctio blanditiis ea similique, dicta nulla, exercitationem fugiat reprehenderit amet animi placeat nisi ad, voluptas quaerat natus! Reiciendis temporibus rerum saepe, officiis fugiat consequatur assumenda dolorum atque.</p>
                <p>Ipsa incidunt architecto perferendis, aspernatur praesentium vitae in sunt porro harum repudiandae ducimus nobis facilis dolorum perspiciatis aut! Et aut fugit officia ab praesentium culpa delectus? Cum animi harum doloribus.</p>
            </section>
        </header>
    </article>
</body>
</html>

body{
    background-color: #4d4a40;
    padding:20px 0 ;
    line-height: 2;
    min-width: 1000px;
    /* 最大宽度 max-width */
}
.containter{
    background-color: #fff;
    width: 90%;
    margin:0 auto;
    padding: 30px 0;
}
.containter header{
    background-color: #267890;
    color:#fff ;
    text-align: center;
    border: 5px solid #14414e;
    margin: 30x 0;
    margin:0 -34px;
}
.containter header h1{
    font-size: 42px;
    font-weight: bold;
}
.containter header .original-link{
    color: #dbdbdb;
    margin-bottom: 26px;
}
.containter header .original-link a{
    text-decoration: underline;
}
.containter header .original-link a:hover{
    color: #fff;
}
.containter section{
    width: 90%;
    margin: 0 auto;
}
.containter section p{
    margin: 1em 0;
}
.containter section h2{
    font-size: 32px;
    font-weight: bold;
    border-top: 1px dotted;
    border-bottom: 1px dotted;

}

以及制作出来的效果：

里面的汉字都用lorem代替喽！

guai_guai_guai

关注

0
点赞
踩
0

收藏

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

接着设置header字体及样式以及原文地址及链接的样式，设置原文地址样式时，最好别用元素选择器，项目中同种元素很多，为了避免混淆，最好使用类选择器，在这里就设置原文地址class为original-link。之后为头部设置样式，背景颜色，文字颜色，文字居中（可继承，子元素最终会继承该样式），设置完背景颜色之后会发现原本的白色已然被覆盖，那是因为外部article的高度是自适应的，适应其内容，故白色背景会被覆盖。先将设计稿分为几个区域，分别对每个区域进行html和样式的设计，先看整个深色区域，
复制链接

扫一扫