2023年6月20日发(作者:)

HTMLCSS十条网页设计中实用的技巧

__十条网页设计中实用的技巧

一、将填充和边距都设置为零

二、重置浏览器的字体大小

body

font:12px “宋体", Arial, Helvetica, sans-serif;

不保证所有的.用于都安装有你设置的字体,所以通常会在后面加上几个通用的web安全字体

三、元素/标签选择器

h1,h2,h3,h4,h5,h6 font-size:100%;font-weight:normal;

tableborder-collapse:collapse; border-spacing:0;

img border:0;

ol,ullist-style:none;

pword-wrap:break-word

四、站点链接

站点链接的样式必须保持此顺序,包括用于创建悬停效果的选择器组在内

a:link

text-decoration: none;

a:visited

text-decoration: underline; 五、设置水平居中

1)固定宽度 大多数的网站目前都是固定宽度的代码如下:

2)如果是用百分百来定义宽度的话,可以这样使用:

#container

六、可以重复利用的规则

.leftfloat: left;

.rightfloat: right;

七、在同一元素上使用多种类

加粗的红色字体,使用了两种类

CSS代码:

.boldfont-weight: bold;

Html代码:

同一元素使用两种类

八、隐藏水平滚动条

为了避免出现水平滚动条,在body里加入overflow__:hidden

bodyoverflow__:hidden

九、解决IE6 的浮动元素的双倍边距问题

对一个p设置了float:left和 margin-left:100px 那么在IE6中,这个bug就会出现。您只需要多设置一个display即可,代码如下:

IE6下图片也会产生3像素的空白距离,也用到display

十、简单的导航菜单

用html5 css3 的新语义标签来写一下这段导航菜单代码

html代码:

网站首页

个人博客模板

慢生活

CSS代码:

如果想选中的导航能高亮显示,可以加上一段js代码:

varobj=null;

varAs=mentById'nav'.getElementsByTagName'a';

obj=As;

fori=1;i=0

obj=As[i];

='nav_current'

提示:为了让js能够获取到菜单的id取值,所以应该给html中的nav标签添加一个id

高亮显示的样式nav_current也应该在css中写上一段代码,比如:

2023年6月20日发(作者:)

HTMLCSS十条网页设计中实用的技巧

__十条网页设计中实用的技巧

一、将填充和边距都设置为零

二、重置浏览器的字体大小

body

font:12px “宋体", Arial, Helvetica, sans-serif;

不保证所有的.用于都安装有你设置的字体,所以通常会在后面加上几个通用的web安全字体

三、元素/标签选择器

h1,h2,h3,h4,h5,h6 font-size:100%;font-weight:normal;

tableborder-collapse:collapse; border-spacing:0;

img border:0;

ol,ullist-style:none;

pword-wrap:break-word

四、站点链接

站点链接的样式必须保持此顺序,包括用于创建悬停效果的选择器组在内

a:link

text-decoration: none;

a:visited

text-decoration: underline; 五、设置水平居中

1)固定宽度 大多数的网站目前都是固定宽度的代码如下:

2)如果是用百分百来定义宽度的话,可以这样使用:

#container

六、可以重复利用的规则

.leftfloat: left;

.rightfloat: right;

七、在同一元素上使用多种类

加粗的红色字体,使用了两种类

CSS代码:

.boldfont-weight: bold;

Html代码:

同一元素使用两种类

八、隐藏水平滚动条

为了避免出现水平滚动条,在body里加入overflow__:hidden

bodyoverflow__:hidden

九、解决IE6 的浮动元素的双倍边距问题

对一个p设置了float:left和 margin-left:100px 那么在IE6中,这个bug就会出现。您只需要多设置一个display即可,代码如下:

IE6下图片也会产生3像素的空白距离,也用到display

十、简单的导航菜单

用html5 css3 的新语义标签来写一下这段导航菜单代码

html代码:

网站首页

个人博客模板

慢生活

CSS代码:

如果想选中的导航能高亮显示,可以加上一段js代码:

varobj=null;

varAs=mentById'nav'.getElementsByTagName'a';

obj=As;

fori=1;i=0

obj=As[i];

='nav_current'

提示:为了让js能够获取到菜单的id取值,所以应该给html中的nav标签添加一个id

高亮显示的样式nav_current也应该在css中写上一段代码,比如: