DIV的使用.docx
- 文档编号:18125190
- 上传时间:2023-08-13
- 格式:DOCX
- 页数:14
- 大小:24.63KB
DIV的使用.docx
《DIV的使用.docx》由会员分享,可在线阅读,更多相关《DIV的使用.docx(14页珍藏版)》请在冰点文库上搜索。
DIV的使用
如何设计字体的大小 以提高访客的用户体验?
现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你感到字太小,阅读有困难,在非标准浏览器中就无能为力了,所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小。
1.在body标签里将字体尺寸设为62.5%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,设了62.5%,则字体尺寸=16px*62.5%=10px,这时你能用em方便地设大小了,比如你需要用12px,只要设1.2em。
ExampleSourceCode[]
body{
font-size:
62.5%;
}
h1{
fong-size:
1.4em;/*h1字的大小相当于14px*/
}
2.body里字体尺寸设为75%,则字体尺寸=16px*75%=12px,1em相当于12px.
ExampleSourceCode[]
body{
font-size:
75%;
}
h1{
fong-size:
1.5em;/*h1字的大小相当于18px*/
}
第一种方法更好些。
如果是英文网站的话,还可以设定为small、x-small......当然这样一来,对页面的设计要求会高一些。
div+css网页布局如何合理的运用html标签?
div+css网页布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。
什么时候应该用DIV?
虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:
ExampleSourceCode[]
当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.
本人观察了下一个著名网站的首页代码,它的头部定义代码如下:
ExampleSourceCode[]
For People Who Make Websites" />
ExampleSourceCode[]
定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.
他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?
因为他活用了HTML提供的标签,以及样式名称的定义
其它最常用的布局标签
h1
这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?
而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^
ul
这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)
b
这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择
h2
h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p
如何用CSS控制图片自适应大小?
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?
我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。
我们看下面的代码:
ExampleSourceCode[]
div img {
max-width:
600px;
width:
600px;
width:
expression(document.body.clientWidth>600?
"600px":
"auto");
overflow:
hidden;
}
◎ max-width:
600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。
但在IE6中无效。
◎ width:
600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px,自动缩小为600px。
在IE6中有效。
◎ overflow:
hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
css网页布局兼容性有哪些要点与诀窍?
IE vs FF
CSS 兼容要点:
DOCTYPE 影响 CSS 处理
FF:
div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
FF:
body 设置 text-align 时, div 需要设置 margin:
auto(主要是 margin-left,margin-right) 方可居中
FF:
设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !
important 多设一个 height 和 width
FF:
支持 !
important, IE 则忽略, 可用 !
important 为 FF 特别设置样式
div 的垂直居中问题:
vertical-align:
middle; 将行距增加到和整个DIV一样高 line-height:
200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行
cursor:
pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
FF:
链接加边框和背景色,需设置 display:
block, 同时设置 float:
left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面。
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
ExampleSourceCode[]
div{margin:
30px!
important;margin:
28px;}
注意这两个margin的顺序一定不能写反,据阿捷的说法!
important这个属性IE不能识别,但别的浏览器可以识别。
所以在IE下其实解释成这样:
ExampleSourceCode[]
div{maring:
30px;margin:
28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:
XXpx!
important;
2.IE5 和IE6的BOX解释不一致IE5下div{width:
300px;margin:
0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。
这时我们可以做如下修改:
ExampleSourceCode[]
div{width:
300px!
important;width /**/:
340px;margin:
0 10px 0 10px}
关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!
:
)
3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ExampleSourceCode[]
ul{margin:
0;padding:
0;}
就能解决大部分问题
4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
ExampleSourceCode[]
就可以了
10个你未必知道的CSS技巧 经典论坛的精华帖子
本翻译并未得到作者或网站授权。
一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权,可以自由使用本翻译。
1.CSS字体属性简写规则
一般用CSS设定字体属性是这样做的:
ExampleSourceCode[]
font-weight:
bold;
font-style:
italic;
font-varient:
small-caps;
font-size:
1em;
line-height:
1.5em;
font-family:
verdana,sans-serif;
但也可以把它们全部写到一行上去:
ExampleSourceCode[]
font:
bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错!
只有一点要提醒的:
这种简写方法只有在同时指定font-size和font-family属性时才起作用。
而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。
事实上,你可以这样:
ExampleSourceCode[]
...
同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。
如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。
补充:
对于一个ID,不能这样写
...
也不能这样写3. CSS border的缺省值
通常可以设定边界的颜色,宽度和风格,如:
border:
3px solid #000
这位把边界显示成3像素宽,黑色,实线。
但实际上这里只需要指定风格即可。
如果只指定了风格,其他属性就会使用缺省值。
一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。
如果这个值正好合适的话,就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。
也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:
ExampleSourceCode[]
第1行就是显示,第2行是打印,注意其中的media属性。
但应该在打印CSS中写什么东西呢?
你可以按设计普通CSS的方法来设定它。
设计的同时就可以把这个CSS设成显示CSS来检查它的效果。
也许你会使用 display:
none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。
要想了解更多,可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。
但如果你想用一些特殊字体时,就只能用图片了。
比如你想整个卖东西的图标,你就用了这个图片:
ExampleSourceCode[]
这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。
所以方法应该是这样的:
ExampleSourceCode[]
Buy widgets
>
但这样就没有特殊字体了。
要想达到同样效果,可以这样设计CSS:
ExampleSourceCode[]
h1 { background:
url(widget-image.gif) no-repeat; height:
image height text-indent:
-2000px }
注意把image height换成真的图片的高度。
这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。
但这对于关闭图片的人来说,可能全部看不到了,这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。
比如:
ExampleSourceCode[]
#box { width:
100px; border:
5px; padding:
20px }
这样调用它:
ExampleSourceCode[]
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。
但在IE5这样的浏览器上,它的全宽仍是100点。
可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的,让它们显示效果一致。
ExampleSourceCode[]
#box { width:
150px } #box div { border:
5px; padding:
20px }
这样调用:
ExampleSourceCode[]
这样,不管什么浏览器,宽度都是150点了。
7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
ExampleSourceCode[]
#content { width:
700px; margin:
0 auto }
你会使用
这很简单,但不够好,IE6之前版本会显示不出这种效果。
改CSS如下:
ExampleSourceCode[]
body { text-align:
center } #content { text-align:
left; width:
700px; margin:
0 auto }
这会把网页内容都居中,所以在Content中又加入了
text-align:
left 。
8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align:
middle 就可以了。
但对CSS来说这没用。
如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。
CSS方法是什么呢?
对了,把这些文字的行高设为 2em:
line-height:
2em ,这就可以了。
9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。
比如对这个容器:
ExampleSourceCode[]
#container { position:
relative }
这样容器内所有的元素都会相对定位,可以这样用:
ExampleSourceCode[]
如果想定位到距左30点,距上5点,可以这样:
ExampleSourceCode[]
#navigation { position:
absolute; left:
30px; top:
5px }
当然,你还可以这样:
ExampleSourceCode[]
margin:
5px 0 0 30px
注意4个数字的顺序是:
上、右、下、左。
当然,有时候定位的方法而不是边距的方法更好些。
10. 直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。
如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:
ExampleSourceCode[]
#navigation { background:
blue; width:
150px }
较短的导航条是不会直通到底部的,半路内容结束时它就结束了。
该怎么办呢?
不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。
ExampleSourceCode[]
body { background:
url(blue-image.gif) 0 0 repeat-y }
此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。
本文作者是:
Trenton Moss。
发表网站是:
http:
//www.webcredible.co.uk/。
本翻译并未得到作者或网站授权。
一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权,可以自由使用本翻译。
运用DIV CSS进行网站构架的一般流程参考
第一步:
拿到设计稿(也就是美工设计出来的东东)
猜想一下,拿到设计稿我们应该干嘛?
你会回答当然是快点做了!
其实不是!
你应该用充足的时间看懂设计稿,看又有是一门学问,不是从艺术的角度看设计师设计的如何漂亮,而是用架构师的角度把结构看得有条理性,这样你的CSS总体的架子才能在脑海中规划出来,这是第一小点也就是一个大的布局的把握,第二点就是找出页面的相同点与不同点,就象我们从前玩过的一个游戏:
大家来找碴.你找出来的越多你以后走的弯路就越少!
找出了相同点是为了我们可以定义一个区块的共用样式,然后对于不同之处可以在共用样式中增加一个样式,比如定义好了一个共用样式
第二步:
规划文件目录
第三步:
规划样式表
第四步:
开始动手写样式表
第五步:
验证你的HTML/CSS
第六步:
配合程序员调整样式表
第七步:
优化CSS代码
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIV 使用