CSS也要语义化

网页制作 2024/11/15 佚名

3 2 1

其实想重提下那个话题，一直都在忙这忙那的没时间。好不容易到一个周末了，原定安排是去D2的但是因为时间安排不过来，所以能抽空写写。早前的讨论不了了之，其实这一点都不是Twinsen的风格。
其实想重提下那个话题，一直都在忙这忙那的没时间。好不容易到一个周末了，原定安排是去D2的但是因为时间安排不过来，所以能抽空写写。早前的讨论不了了之，其实这一点都不是Twinsen的风格。
名字，你看名字多重要，我不太清楚。我写书的话我的书被人改变名称去误导别人我是不喜欢的。这是我一直说的作为一个技术人员应当遵守的准则——互联网创作共享协议。我不能抄一个刚入门的小朋友Idea（因为他们思维没被禁锢），然后换一套名称和说法说是自己的。sorry，我做不到。
不过其实这片文章只是Twinsen的一个想法了，可以说比较的疯狂。另外顺带一提的是这里的是Twinsen的站点，并不是腾讯的站点。这里的东西并不是代表腾讯的观点和角度。

引用森林群的谈话内容
技术人员的争论就是技术人员争论，谈锤子政治和外交。要叼冲我来，我是非常乐意被叼的。是啊，我很犯贱；你叼我就是塞钱进我的袋子里面。正如我常说的那句话：“SB之所以继续为SB是因为他压根就从来没有意识到自己是一个SB。”粗俗？但是原话是心理学家弗洛伊德说的哦：“人总是先有自我认知才会再有自我超脱的。”我现在就是到了自我认知的瓶颈了，所以要创造这样的环境逼迫我自我认知。

另外说到网格的内容，为什么我反对这个思想的流传？首先声明的我不是反对关于设计的网格化，我是反对重构的网格化。这里应该特指是YUI方式的类名绑定式的网格化。大家可以看看下面的一段代码：





    <div id="yui-main"> 

    <div class="yui-b"> 

    <div class="yui-g"> 

    <div class="yui-u first"></div> 

    <div class="yui-u"></div> 

    </div> 

    </div> 

    </div>

大家可以很清晰的看到这里的yui-u，或者yui-g他的名称是并无意义的。还有与表现相关的first。不知道大家都看过的《网站重构》一书当时配同的PPT里面的一句话——“把页面中的外观标记去除以后，重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出，你只需要改动一下样式表就行了，而完全不必改动页面本身。”像上面的那段代码不能达到结构、表现、行为三者分离，如果强行改变会出现下面的一些问题：

改变表现的时候必须动到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; 

    line-height:0; 

    clear:both; 

    visibility:hidden; 

    } 

    #index_news.mode, 

    #index_bbs.mode, 

    #index_area.mode{ 

    background:url(small_gray_grid.png) repeat-y -400px bottom; 

    width:200px; 

    margin:5px 0 5px 5px; 

    } 

    #index_news.mode h3.title, 

    #index_bbs.mode h3.title{ 

    background:url(small_gray_grid.png) no-repeat -200px top; 

    } 

    #index_news.mode .content, 

    #index_bbs.mode .content, 

    #index_area.mode .content{ 

    background:url(small_gray_grid.png) no-repeat -600px bottom; 

    display:table; 

    }

大家可以看到模块化思想的优势在于哪：

可以半自动化的取用当前已有的模块来节省代码开发时间以及精力。可以高度自由化的适应任何产品经理、任何老板的不同变态需求。任何关于表现上面的修改不需要动用到开发人员，不需要功能测试。 CE数据监测绑定到id，不需要重新调整接口。每个人担任单个模块的快速迭代开发。
另外就代码而言。标题就是标题，内容就是内容；总不会那种歪曲事实、自己打自己嘴巴的状态。

引用内容
我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。就好像以前师傅招收学徒一样，能力和慧根属其次，人品首当其冲。
我以为，XHTML好比一个人的本质，CSS好比人的处事方式和态度，JS好比人做事的行为以及作风。三者的分离再加上些周边的SEO、人机交互也就是我们所说的网站重构，也就是一个很不错的人。之前总是有一部分人认为CSS就是网站的最主要的元素，其实自然而然的也就代表了一种人生观。的确，一个人没有好的处事方式和态度很难在现在的社会很好的存活；但是这个处事的方式和态度位置过于偏重了，就成了一个善于欺骗、做事不择手段的人。

这个是一直想说的，有了CSS你可以将左右顺序变成右左顺序，他就是一个网页中的魔术师。你总不能把他乱用，去成了一个善于欺骗、做事不择手段的人。

语义,<,新闻标题,",>,一个,/a>,#"

标签：

语义,<,新闻标题,",>,一个,/a>,#"

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

岱庙资源网 Copyright www.zgmyg.com

评论“CSS也要语义化”

CSS也要语义化

暂无“CSS也要语义化”评论...

www.zgmyg.com 岱庙资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

CSS也要语义化

语义,<,新闻标题,",>,一个,/a>,#"

CSS入门:XHTML文档结构树

一列固定宽度布局和背景图片绝对定位

评论“CSS也要语义化”

更新日志

友情链接