企业网设计与实现

1、给li添加样式图标时使用语句

.top_content li {
    list-style-image: url("../images/li_bg.gif");
    float: left;
    width: 70px;
}

实现效果：

注意：为了让li可以在一行显示~可以有多种方法~比如设置li的display为inline-block~不过这里要用浮动来实现~否则给li添加的小图标会消失

2、小图标加文字的居中~

html代码：

<div class="logo_right">
     <img src="images/tel.jpg" alt="服务热线"/>24小时服务热线
     <span class="tel">114114114</span>
</div>

对应css代码：

.logo_right img {/*这样图片后面的文字就可以在图片高度的中间显示*/
    vertical-align: middle;
    margin-right: 10px;
}

3、焦点图类别

js、flash、css、jquery

jquery书写简单~

myFocus焦点图插件~是完全独立的js库~轻量级~效率高~提供很多风格~而且各种风格具有相同的接口~方便切换~完全开源免费

myFocus的使用：

a、将其js文件夹导入到工程~形成如下目录（其js文件夹中包含的就是蓝色选中的js文件和一个mf-pattern文件夹）：

b、引入对应的文件并进行初始化

<script src="js/myfocus-2.0.1.min.js"></script>
<script src="js/mf-pattern/mF_YSlider.js"></script>
<link rel="stylesheet" href="js/mf-pattern/mF_YSlider.css"/>
<script>
    myFocus.set({
        id: "pic_box"
    })
</script>

对应元素结构代码

    <div class="ad" id="pic_box">
        <div class="loading"><!--使用了myfocus插件做轮播图的效果~但是其加载需要一段时间~故加上这个loading的gif动图~提高用户体验-->
            <img src="images/loading.gif" alt="图片加载中"/>
        </div>
        <div class="pic">
            <ul>
                <li>
                    <img src="images/ad2.jpg" alt=""/>
                </li>
                <li>
                    <img src="images/ad3.jpg" alt=""/>
                </li>
                <li>
                    <img src="images/ad4.jpg" alt=""/>
                </li>
            </ul>
        </div>
    </div>

注意：最外层div的id必须和初始化时指定的id是一样的~同时要为图片列表再包裹一个父元素~将其class设为pic

myfocus插件资料网址：http://demo.jb51.net/js/myfocus/tutorials.html

4、input输入框添加背景图后需要设置其背景色~不然会出来很奇怪的效果