欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

正确分析结构使用正确的HTML标签。CSS样式写一起。

程序员文章站 2022-07-06 18:41:17
在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left。 2,把他们的宽度平分三份,33.3%。三份都一样,所以共同属性写在comment中。 3,再调整他们的内边框,外边框等等。调整好外面一层,再写里 ......

在内容中

一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用:

分析和解决如下步骤:

1,一行三块,先向左浮动成为一行float:left。

2,把他们的宽度平分三份,33.3%。三份都一样,所以共同属性写在comment中。

3,再调整他们的内边框,外边框等等。调整好外面一层,再写里面一层。从外面到里面敲代码。

4,因为下面三块的内容的样式基本都差不多,所以在写框架时,可以把它们重复的全部整理写到一起。

5,存在换行时,基本都使用块级元素div h1等等,如果不存在换行的话才使用span标签。

6,整理代码,把相同样式写到一起。

<style type="text.css">

  *{ margin:0; padding:0; font-size:16px; }  /*注释一定要记住*/

  .container{ width:100%; ...}/*注释一定要记住*/

  .main{ width:1200px;  .....}  千万记住一定要把边框的width先进行定义,一步一步向里面写,而且样式也的排列也一定是从外面到里面进行排列,不能混乱

  .common{ ....}/*注释一定要记住*/

  .one{ ... }/*注释一定要记住*/

另外:写css样式时,记住一定要标清楚是那一级下面的什么类的哪个标签。层级一定要明显,如:

.container .main  .common  .one{......} 一定记住这么写,不易出错,易于维护。

</style>

<div class="main">

  <h1>这是标题</h1>     这里的标题其实最好都使用<div class="title"></div>,因为浏览器样式都重置了,使用div比较好处理

  其实这里是图文混排,优先考虑 <dl></dl>自定义列表作为结构

  <div class="common one">   /*common:共同的  这个class是写三个块的共同样式,one:描述,这是写每个块自己独特的样式*/

    <img src=""/>

    <h1> </h1>

    <div> </div>

  </div>

  其实这里是图文混排,优先考虑 <dl></dl>自定义列表作为结构

  <div class="conmment two>   /*common:共同的  这个class是写三个块的共同样式,two:描述,这是写每个块自己独特的样式*/

    <img src=""/>  

    <h1> </h1>  

    <div> </div>

  </div>

  <div class="conmment two>   /*common:共同的  这个class是写三个块的共同样式,third:描述,这是写每个块自己独特的样式*/

    <img src=""/>

    <h1> </h1>

    <div> </div>

  </div>

</div>

=================