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

最新推荐文章于 2021-06-09 19:08:43 发布

海涛高软

最新推荐文章于 2021-06-09 19:08:43 发布

阅读量3.4k

点赞数

分类专栏： HTML5 文章标签：图片浮动盒模型

本文链接：https://blog.csdn.net/qq_15267341/article/details/52735684

版权

HTML5 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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

实现代码如下：

<!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
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
（浮动+盒模型+无序列表）实现切换图片效果

下面做个毒霸首页中图片切换的效果，如下：实现代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .zong { width: 600px; height: 70px;
复制链接

扫一扫

专栏目录