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

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


实现代码如下:


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

你可能感兴趣的:(HTML5)