CSS也要语义化

2020-05-11 08:30:50易采站长站整理

改变表现的时候必须动到html,一次美观上面的修改要动到三条工作线,极大的人力资源耗费。

会出现排在第五个的叫做“first”的框

会出现实际为240宽的叫做“180宽”的框

会出现实际为三列的叫做“四列”的布局

会出现实际为红色的叫做“blue”的字

这些也就是相当于现在很多人流行的“left_box”和“right_box”,快速改版以后变成了在左边的“right_box”。这不就是相当于歪曲事实的真理么?但其实最重要的是第一点,这样的工作方式和我们以往的table布局工作方式有差别么?你提个改个样式需求,全公司(设计、页面、开发、功能测试、CE数据监测)都跟着你去跑,这是很不智的。

写到这里回看下,顺带改了改标题变成《这将是一场革命》系列的第二篇关于CSS的文章算了。上面说完不对的,下面给大家看看一个我最近刚接手的一个新版项目代码段:

HTML片断

<div id="index_news" class="mode">

<h3 class="title">公益新闻</h3>

<div class="content">

<ul>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

<li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li>

</ul>

</div>

<a class="more" href="#">更多</a> </div>

CSS片断

.mode{

position:relative;

float:left;

font-size:12px;

}

.mode h3.title,

.mode h4.title{

color:#234C00;

padding:5px 10px;

font-size:14px;

}

.mode .more{

top:5px;

right:10px;

font-size:12px;

color:#4282ab;

position:absolute;

}

.mode .content{

clear:both;

}

.mode .content:after {

content:"";

display:block;

height:0;