（浮动+盒模型+无序列表）实现切换图片效果

来源：互联网发布：惠普1513驱动for mac 编辑：程序博客网时间：2024/05/16 09:10

下面做个毒霸首页中图片切换的效果，如下：
这里写图片描述

实现代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .zong {            width: 600px;            height: 70px;            background-color: gray;        }        .nav {            width: 50px;            height: 70px;            background-color: darkblue;            float: left;        }        .nav ul {            margin-top: 0px;            padding: 0px;        }        .nav ul li {            margin-top: 1px;            list-style-type: none;            width: 49px;            height: 16.2px;            font-size: small;            background-color: crimson;            text-align: center;            line-height: 17px;            float:left;        }        .content {            margin-left: 51px;            height: 70px;            background-color: chartreuse;        }        .content ul {            padding: 0px;            margin: 0px;            margin-left: 1px;        }        .content ul li {            list-style-type: none;            width: 108px;            height: 70px;            float: left;            text-align: center;            margin-left: 1px;        }    </style></head><body><div class="zong">    <div class="nav">        <ul>            <li>热门</li>            <li>电视剧</li>            <li>电影</li>            <li>娱乐</li>        </ul>    </div>    <div class="content">        <ul>            <li><img src="pic/01.png"/></li>            <li><img src="pic/02.png"/></li>            <li><img src="pic/03.png"/></li>            <li><img src="pic/04.png"/></li>            <li><img src="pic/05.png"/></li>        </ul>    </div></div></body></html>

以上代码运行后的效果如下：
这里写图片描述

总结：
1 总的在一个div下
2 左侧导航是一个div,导航右侧图片区域整体是一个div
3 导航左浮动，图片区域设定margin-left
4 导航内部是一个无序列表
5 图片区域也是一个无序列表，每一个列表项被设置成左浮动
6 注意调整盒子的margin，特别注意是ul元素的margin和padding清零

两种办法可以轻松实现两栏的效果
1 一个左浮动，一个设定margin-left
2 两个都设置左浮动

FR：海涛高软（QQ技术交流群：386476712）

0 0