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

在内容中

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

分析和解决如下步骤：

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>

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

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10668801.html