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

    您现在的位置是:首页 > 学无止境 > 心得笔记

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

    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.cissemosse.com/" >网站首页</a></li>

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

        <li><a href="http://www.cissemosse.com/news/s/">皇冠hg0088新2网址</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代码:

    <script language="javascript">

    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 id="nav">

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

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

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

    十一、不使用table的form表单

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

    From 表单

    <form action="form.php" method="post">  

    <fieldset>  

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

    <label for="name">姓名:</label>

    <input id="name" name="name"><br>

    <label for="address">地址:</label>

    <input id="address" name="address"><br>

    <label for="city">所在地:</label>

    <input id="city" name="city"><br>

    </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>

    <html lang="zh-cn">

    <head>

    <meta charset="utf-8" />

    <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 class="table">

    <h2 class="table-caption">花名册:</h2>

    <div class="table-column-group">

    <div class="table-column"></div>

    <div class="table-column"></div>

    <div class="table-column"></div>

    </div>

    <div class="table-header-group">

    <ul class="table-row">

    <li class="table-cell">序号</li>

    <li class="table-cell">姓名</li>

    <li class="table-cell">年龄</li>

    </ul>

    </div>

    <div class="table-footer-group">

    <ul class="table-row">

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

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

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

    </ul>

    </div>

    <div class="table-row-group">

    <ul class="table-row">

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

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

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

    </ul>

    <ul class="table-row">

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

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

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

    </ul>

    <ul class="table-row">

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

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

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

    </ul>

    </div>

    </div>

    </body>

    </html>

关键字词:css,css导航菜单,IE6bug,网页设计,fieldset表单