如何改良你的CSS代码编写结构(3)
作者:ximicc 来源:CSS Beauty 发布时间:2008-09-29 16:03:00
标签:结构,代码,经验,css
搭建你的页面结构
OK,现在你可以开始设计网站的结构了。如果网站的布局草稿已经准备好,那是可以很快就完成的。不管你选择那一种布局类型,流式或固定宽度,我建议你定义一个.container 类,并让它包含具有相同的宽度的CSS标签,在这种情况下,如果你想改变页面的宽度,只需修改.container 类的宽度就可以了,它所包含的元素的宽度会自动适应:
关于HTML代码
一旦站点的主要区块已经用CSS定义完毕,你就可以开始编写HTML代码。那没有什么复杂的,只需按正确的顺序添加正确的DIV即可:
<div class="container">
<!-- Header -->
<div id="logo"></div>
<div id="navbar"></div>
<div id="welcome-section"></div>
<!-- Main Content -->
<div id="column_left">
</div>
<div id="sidebar">
</div>
<!-- Footer -->
<div id="footer"></div>
</div>
如果在浏览器上测试正常,你就可以逐步为各个区块(navigation, sidebar, footer...)添加新的具体的CSS代码,即按结构的方式完成你的CSS并整合HTML代码。缩进所有依赖于同一个类的代码:
当你不得不在你的CSS代码中寻找一个具体的标签时,这点小聪明将起到意想不到的效果。
自定义类放在最后
通常,如果有些类多个区块都会用到,那我会以这样的方式把它们添加到CSS文件的末尾:
以能很快认出其主要属性的语义名字来命名每个类。
希望这些小窍门能帮助你简化编写和管理CSS代码的方式。
0
投稿
猜你喜欢
- 今天我们整理了ip地址和身份证的javascript验证方法。虽然ip地址和身份证的验证不是很经常会遇到,但是大家也可以研究一下js代码,里
- 一、概念 1. 数据库 (Database)什么是数据库?数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。这种数据集合具有如下
- 很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由
- 在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么?的文章,文中主要是提及了CSS的命名规则,仔细阅读后,我认为这
- 这是asp利用dictionary创建二维数组的例子,这样做的优点是:1、数组下标可以是字符串2、长度不是固定的<'% ’==
- 本书的作者Douglas Crockford是JavaScript开发社区最知名的权威,JavaScript的发明人Brendan Eich
- select for update 这个是行级锁 当 commit或者rollback时,锁释放 记得打开事务,比如jdbc里面 setAu
- UNIX时间戳转换为日期用函数FROM_UNIXTIME()select FROM_UNIXTIME(1156219870);日期
- 在CSS样式中,dl部分只是简单的把内外边距设置为0,dd部分有一个clear属性需要特别注意。当某个元素的属性设置float浮动时,它所在
- 问题:关于如何生成随机记录(二)如何从指定表中随机抽取一定量的记录?sql server 中 select top 10 * fr
- MySQL的命令行提示符及其表达的意思mysql> 准备好接受新命令。 &n
- SQL Server数据库涉及到的数据仓库概念:1.多维数据集:多维数据集是联机分析处理 (OLAP) 中的主要对象,是一项可对数据仓库中的
- 从大的发展来看,网站就是一块试验田,一块在错误中成长、在错误中变强变大的试验田。这决定了互联网产品的成长路线,一定是一个反复修正和迭代的曲线
- 在印刷排版中“point”是一个绝对的单位,它等于 1/72 英寸。可以用尺子丈量的,物理的英寸。但在CSS中pt的含义
- 当元素设置浮动(float)后会被移出文档流,相信大家都会经常遇到这样的问题。这问题的解决办法有N种之多,因为每种浏览器对CSS的解析各异,
- 1. 不使用全局变量,适当封装2. 兼容性还行~~3. 代码短,可读性凑合~~呵呵~~~~~a. 拖动效果,16行JS<!DOCTYP
- ASP里两种常用的生成文件的方式是:利用ADODB.Stream生成文件和利用Scripting.FileSystemObject生成文件1
- 先看几个数据。。一大堆文字滴,不管人家是不是故意的,字数还是这样:news.163.cn:14px,39个中文字符 news.sina.co
- SQLSRV驱动程序允许您创建一个结果集,其中包含可以根据游标类型以任何顺序访问的行。本主题将讨论客户端(缓冲)和服务器端(非缓冲)游标及其
- 去过新浪或者搜狐吗?虽然我们都不愿意看广告,但是它们做广告的技术我们却应该学到手,这不,又一种很流行的做法儿,做成那种两边对称的对联式的广告