【前端学习之HTML&CSS】-- 视觉格式化模型之一常规流练习

文章目录

【前端学习之HTML&CSS】-- 视觉格式化模型之一常规流练习
- 常规流练习

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

lc own

常规流练习

1. 注意事项

先书写一部分HTML，然后写CSS，不要完全分离，否则一直看不到样式可能会导致错误；

2. 具体流程（个人特色）

这里给出一个简单的设计稿作为参考进行设计：

(1) 先写一个div/article,然后写上一点内容，先观察样式；
(2) 设置网页背景：

1 背景颜色（整个网页） – HTML/body上；
2 主体部分的背景 – article；
(3) 设置主体部分大小：

1 主体部分离网页边缘的距离：body的padding或者article的margin；
2 主体部分居中，且左右两边里网页距离；
主体部分width: 最好写成百分比，防止出现滚动条；居中: margin-0 auto；
【重点：要去和设计师沟通，确定网页的具体尺寸（宽度），涉及到设备问题】
3 行高：尽量往上提，body，利用继承；
(4) 文章头部：

1 在article里书写header：（可以先把lorem去掉）
2 标题、超链接等文本: 先写出来文本，再改样式；
【注意：外边距相邻合并、上下边距的设定，最好写成art的padding】
3 样式：背景颜色、字体样色、居中、上下边距、边框、两端突出；
4 单独书写里面h1和div的样式；
【注意：在书写样式选择器时尽量书写完整，从父元素到下，div尽量用class等选择器】
(5) 文章大体：

1 先判断总体章节数，及内部内容规律性；
2 直接创造多个section，里面有1个h2和3个段落；
3 设置section样式：宽度、居中；
4 设置段落格式: 段落之间差一行；
5 设置标题格式：字体大小、加粗、上下边框；
【设置最小宽度】

3. 代码展示

 <article class="art">
 <header>
    <h1>这是文章的标题</h1>
    <div class="ori-link">
         原文地址: <a href="https://www.baidu.com/">https://www.baidu.com/</a>
    </div>
 </header>
 <section>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus corrupti incidunt minus doloribus debitis corporis qui quo, dolor sequi consectetur unde nobis officiis facilis voluptatum rerum consequuntur reiciendis adipisci! Tempora!</p>
      <p>Harum, natus! Mollitia eaque adipisci dicta excepturi dolores accusamus sequi nesciunt maiores beatae perferendis. Possimus, laboriosam! Laborum odit praesentium deserunt facere, animi sequi perferendis ipsum architecto suscipit molestiae sunt debitis?</p>
      <p>Adipisci nostrum commodi ipsum eveniet voluptate nobis officiis earum molestias doloribus, consectetur, dolor, debitis voluptates ad rem. Placeat, autem iure corporis deleniti culpa delectus illum eum quam totam facilis animi.</p>
 </section>
 <!-- section*5>(h2>{章节$})+p*3>lorem ，略-->
 </article>

body{
    background-color: #4d4a40;
    padding: 20px 0;
    line-height: 2;
    /* 最小最大宽度 */
    min-width: 1000px;
}
.art{
    background-color: #fff;
    width: 90%;
    /* 居中 */
    margin: 0 auto;
    padding: 30px 0;
}
/* 可能之后会加入菜单、导航栏等其他header元素 */
.art header{
    background-color: #267890;
    color: #fff;
    text-align: center;
    /* 上下边距30px,margin由于存在合并，最后选择在art写padding */
    /* margin: 30px 0px; */
    border: 5px solid #14414e;
    /* 两端突出 */
    margin: 0 -34px;
}
.art header h1{
    font-size: 42px;
    font-weight: bold;
} 
.art header .ori-link{
    color: #dbdbdb;
    /* 此处不合并，由于header有边框，隔开了 */
    margin-bottom: 27px;
    /* 由于此处存在行高，导致边距增大，故可以自行调节margin */
}
.art header .ori-link a{
    text-decoration: underline;
}
.art header .ori-link a:hover{
    color: #fff;
}
.art section{
    /* 相对于article */
    width: 90%;
    /* 居中 */
    margin: 0 auto;
}
.art section p{
    /* 上下距离,段落之间空一行 */
    margin: 1em 0;
}
.art section h2{
    font-size: 32px;
    font-weight: bold;
    /* 上下边框 */
    border-top: 1px dotted;
    border-bottom: 1px dotted;
}