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

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

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

常规流练习

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;
}

4. 结果

我们在之前的博客就已提到，文章内容对于现阶段的学习意义并不大，我们更加追求的是样式的书写