风讯官方论坛FoosunCMS交流区模板风格[分享]WEB设计、DIV+CSS入门 (3-19,33楼更新书籍)

2  /  4  页   1234 跳转 查看:35393

标题: [分享]WEB设计、DIV+CSS入门 (3-19,33楼更新书籍)

盒模型bug的解决方法

我们定义一个最基本的层:

boxtest

div.boxtest{

border:20px   solid #60A179;

padding: 30px;

background :  #ffc;

width : 400px;

}

标准情况下,这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中,对盒模型的宽度解释有个bug,它认为300 px是整个盒的总宽度,内容的宽度变成:300-20-30-20-30=200px。

为了弥补这个bug,采用一个技巧:即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读,认为宽就是400px,但而其他符合标准的浏览器会继续阅读,并执行第二个真实值300px。

content

div.content{

border:20px solid #60A179;;

padding:30px;

background: #ffc;

width :400px;

voice-family :   "\"}\"";

voice-family :inherit;

width :  300px;

}

同样,在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值,有更简单的办法解决这个问题: html>body .content { width :300; }


新野视窗 专业网站设计服务!设计定做QQ:612189 群号:2693538
服务理念:做生意,要讲规矩;做服务,要讲热情;做人,要讲厚道!总之,两个字“信誉”!
引用
 

div+css命名参考 

常用的CSS命名规则:

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center 

命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如user-list

常用代码结构:

div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,例如

<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果

h1-h6:标题
h1-h6 根据重要性依次递减
h1位最重要的标题

label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:
<label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />

fildset & legend:fildset套在表单外,legend用于描述表单内容。例如:
<form>
<fildset>
<legend>title</legend>
<label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>

dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签,例如
<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。<dd>
<dt>什么是XHTML?</dt>
<dd>XHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似HTML的角色的XML。 本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。</dd>
</dl>

C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构,c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名:
根据w3c网站上给出的,最好是用意义命名
比如:是重要的新闻高亮显示(像红色)
有两种
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字


[此贴子已经被作者于2006-10-3 14:34:45编辑过]

新野视窗 专业网站设计服务!设计定做QQ:612189 群号:2693538
服务理念:做生意,要讲规矩;做服务,要讲热情;做人,要讲厚道!总之,两个字“信誉”!
引用
 

Div+CSS网页布局与美化,精通CSS高级web标准解决方案:两本书http下载
下面是光盘里文件截图:



下载地址
http://ah-telecom.cnzz.cn/Cnzz_VIP/Soft/别具光芒配套光盘.rar
两本书上传完毕,可高速下载!

下载地址:
http://ah-telecom.cnzz.cn/Cnzz_VIP/Soft/别具光芒.rar

下载地址:
http://ah-telecom.cnzz.cn/Cnzz_VIP/Soft/CSS.Mastery.精通CSS.rar

借位========================================

哇!!!!

非常好啊,我就是在学习这个!!!

楼主,这次我非要把你顶死!!嘿嘿

引用
 

FS4还支持DIV+CSS呢,因为FS4插入标签的方法现在要在线编辑模板插入文章标签,我用DIV+CSS做的模板,在在线编辑器中显示得乱七八糟,当强行插入标签后保存并生成首页,打开网站一看,一切都是乱七八糟。我都不知道FS4是怎么支持DIV+CSS的。
引用
 

学习!~!

[em17]
FS4.0精品站→ 临汾信息网 www.Linfen365.Com
自有服务器,双线机房托管,分担托管费,1G空间300元,仅限15份。QQ23238504
引用
 

我的网站上全部都有教程,请看http://www.cqxw.net
http://www.cqxw.net
迅微网络:建站学院
引用
 

辛苦了``
引用
 

[em02]
免费观看电影http://m.yuxingji.com
免费高清电影http://p.yuxingji.com
免费下载电影http://e.yuxingji.com
引用
 

好东西啊
引用
 

好贴子啊.强,顶.感谢!
引用
 

好好学习

引用
 

这个网站就是完全符合W3C   DIV+CSS的站点。大家可以学习。

汉斯特 传播机构

 

[此贴子已经被作者于2006-9-22 08:11:47编辑过]
引用
 

这个真的要好好的支持一下.
引用
 

楼主辛苦啦!谢谢

爱面子,爱生活&gt;&gt;
遇到问题,请到帮助中心 help.foosun.net
CMS/OA购买咨询联系  风讯-小马  13076061951
引用
 

感谢提供!
引用
 

好啊好啊

爱死去

[em02]
引用
 

好深奥学完了会死人的我

引用
 

谢谢楼主,看来要重新学习语法了!

福建宁化第二中学网站(调试中):
http://www.nhez.cn  (风讯核心,调试中)
QQ:280601330
¥已转到免费1G空间,欢迎光临。¥
免费1G空间注册地址:
http://www.mianfei.la/index.php?id=13403
引用
 

有无将原来的tabale格式直接转换成DIV+CSS那种工具,重新写是麻烦的,还不熟悉的
引用
 

这篇问文章真的很好
真爱无敌.
引用
 

这篇问文章真的很好,狂顶一下
真爱无敌.
引用
 

ding我回学校好好学学
引用
 

好长了
引用
 

值得学习
引用
 

搞啥东东哦,我下了10多次,没下成功一次
引用
 

学习中谢谢
引用