您现在的位置是：首页 > 网站制作 > 前端设计

前端设计

html css 十一条网页设计经典实用的代码片段

杨青 2013-08-03前端设计

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}

也有使用通配符*{padding:0;margin:0;}网站利弊端都各有其说法，对于*号这种，是把所有元素的内外边距都设置为了0，可能有些会出现些小细节的问题，所以选择你适用的方案吧

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

body {

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

color: #000;

}

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

三、元素/标签选择器

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

table { border-collapse:collapse; border-spacing:0;}

img { border:0;}

ol,ul { list-style:none; }

p{word-wrap:break-word}

四、站点链接

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

a:link {

color: #42413C;

text-decoration: none;

}

a:visited {

color: #6E6C64;

}

a:hover, a:active, a:focus {

text-decoration: underline;

}

五、设置水平居中

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

#container { width:1000px;margin: 0 auto;}

2）如果是用百分百来定义宽度的话，可以这样使用：

#container {

width: 80%;

max-width: 1260px; /* 最大宽度，IE6 不遵循max-width、min-width 此声明。 */

min-width: 780px; /* 最小宽度 */

margin: 0 auto; /* 如果将 #container 宽度设置为 100%，则不需要此设置。 */

}

六、可以重复利用的规则

.left {float: left;}

.right {float: right;}

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

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

CSS代码：

.red {color: red;}

.bold {font-weight: bold;}

Html代码：

<p class="red bold">同一元素使用两种类</p>

八、隐藏水平滚动条

为了避免出现水平滚动条，在body里加入 overflow-x:hidden

body{overflow-x:hidden}

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

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

div {float:left;margin:40px;display:inline;}

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

img{display:block}

十、简单的导航菜单

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

html代码：

<nav>

<ul>

<li><a href="http://www.yangqq.net/download/">个人博客模板</a></li>

</ul>

</nav>

CSS代码：

nav ul li { display:inline;margin-right:10px;}

nav ul li a {color:#000;display:block;float:left;padding:5px;}

nav ul li a:hover {background:#eee;color:black;}

}

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

var obj=null;

var As=document.getElementById('nav').getElementsByTagName('a');

obj = As[0];

for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)

obj=As[i];}

obj.id='nav_current'

</script>

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

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

#nav_current{background:#eee;color:red;}

这里提供一个测试页面，自己可以复制代码测试一下：测试一下

十一、不使用table的form表单

div与table布局的优势也越来越突出了，正如我们现在进行网站设计应该把重点是放在使用div上

From 表单

<legend>个人资料信息</legend>

</fieldset>

</form>

CSS代码

label,input {display: block;width: 150px;float: left;margin-bottom: 10px;}

label {text-align: right;width: 75px;padding-right: 20px;}

br {clear: left;}

提示：fieldset可以创建表单周围的边框

用display来实现一个table布局，不过IE7以及以下的版本不支持演示页面

完整代码：

<!DOCTYPE html>

<head>

<title>CSS display_CSS3</title>

<style>

body{font:14px/1.5 georgia,simsun,arial;}

h1{margin:10px 0;font-size:20px;}

ul{margin:0;padding:0;list-style:none;}

.table{display:table;border-collapse:collapse;border:1px solid #ccc;}

.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}

.table-column-group{display:table-column-group;}

.table-column{display:table-column;width:100px;}

.table-row-group{display:table-row-group;}

.table-row{display:table-row;}

.table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}

.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}

.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}

.table-footer-group{display:table-footer-group;}

</style>

</head>

<body>

<h1>display构造的table小例子，IE7及以下浏览器不支持本示例</h1>

</div>

</ul>

</div>

<li class="table-cell">footer</li>

</ul>

</div>

</ul>

</ul>

</ul>

</div>

</body>

</html>

css css导航菜单 IE6bug 网页设计 fieldset表单

前端设计

html css 十一条网页设计经典实用的代码片段

相关文章

文章评论