1.初始化问题。

   在做网页设计实习的过程中，经常出现这样一个问题，我设置的ul 长度明明为120px，可是却总是显示得向右偏移的很多，而且在用谷歌浏览器审查元素时，也发现属性上竟然是160px , 后来用了一句代码  *{margin:0;padding:0;}，加到css文件中，就可以解决问题啦。

   原来，大多数浏览器都会有一些默认属性，例如ul 有40px的（margin)左边距,body有10px（margin）上边距，a标签有下划线等等。

   因此建议在css文件中最好进行页面初始化，然后再开始编写。我用的页面初始化代码如下：    

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0;}  


2.页面嵌入

 在制作过程中，发现一个主题系列的许多网页，头部和底部都一样，因此可以把头部和底部单独做成页面，然后嵌入到每个页面需要的地方，而怎样嵌入呢，通过看前人的经验，我也试着做出来了。详细步骤如下：

   1.首先，将头部单独做成一个页面，例如命名为head.html,然后在本地浏览器运行一下，把地址栏里的内容拷贝。

   2.然后制作主页，在头部的<div class="head"></div>内插入代码

           <iframe

                  src='file:///C:/Users/Administrator/Desktop/...... head.html'  

                   /* 注释：此处src里的内容要根据自己本地浏览器运行的地址内容为定，

                               就是之前在地址栏里拷贝的内容

                  */

                 name="I1"  width="100%"    height="100%"    id="I1"  

                  scrolling="No"  frameborder="0"

                   /*这两个设置时为了去除显示上的下拉栏，使得显示更加美观，没有嵌套的痕迹，很重要哦！*/>

          </iframe>


      注意，头部的div高度和宽度都要设置，且和单独页面里的内容长高保持一致。



3.下划点线的代码写法

   之前总看到一些漂亮的网站里，栏目都有下划的点线，每次都是用图片去做的，后来，偶然发现，原来，那些是可以用代码写的。

   注意，ul里的li 也有border属性。在li的属性设置里增加一行代码： border-bottom: 1px dotted #ddd;

       截图如下：224125356.png

       你可以试试哦。



4.特殊小图标的代码写法

     @1例图：224429753.jpg

            导航右侧有个小箭头，注意是用代码写的。不是图片。代码为： &raquo;   注意完整性。


    @2例图：224709302.png

               

        此处导航的小图标是一个小三角，是用代码写出的。

       小三角的代码是：&nabla;

       可是要使小三角有属于自己的属相，比如大小，颜色，就需要在外面加一个类class来设置了

       我的程序代码如下   <span class="spe">&nabla;</span>

       其中class的spe设置如下

       .spe{

           font-size:smaller;color:#E79ABA;

           float:left;width:30px; height:35px;

           text-align:center;line-height:35px;}


     另外，外曾的圆角边框也可以简单设置为：                

       .dowm_box{

                    margin-top:10px;

                    width:197px;

                    height:278px;

                    border:1px solid #9F9F9F; /*以上可以根据个人需要而定。*/

                    -moz-border-radius:8px;

                    -webkit-border-radius:8px;

                    -khtml-border-radius:8px;

                     border-radius:8px;}  

        /* 以上4行为设置圆角的关键代码，圆角曲度越大，那么设置大小上就可以更大点。*/



           

 5.导航条上的延缓效果  

  有些导航条上，鼠标移上去和离开都会有一个延缓效果，显得更加美观，简单的代码如下：

 transition-duration: .7s,.8s;

  前一个时间是移上去的渐变时间，后面的是鼠标离开时的渐变时间，可根据个人具体情况来定。

 我的css代码如下：

.down_content li a {

                   color:#FFF;

                   text-decoration:none;

                   display:block;

                    transition-duration: .7s, .8s;

}

.down_content li a:hover {

                           background-color:#99C;

}



如若还用什么问题，我们可以再作探讨哦！