CSS DIV制作源码时代官网活动展示效果

1. 制作效果图

 

2. 为什么要制作效果

通过只做该效果来学习DIV+CSS的网页布局以及JS的交互

3. 制作步骤

3.1 html结构

 

<div
id="main">

    <div
id="left">

        <img
src="images/1.jpg"
id="targetImage"
style="width:
504px;height:
333px">

    </div>

    <ul
id="right">

        <li
class="select"
src="images/1.jpg">

            <a  target="_blank">

                <p>夏日夜晚联欢会</p>

                <p>昨天，利用晚自习的时间，0711PHP培训学科和0714UI培训学科的同学...</p>

            </a>

            <img
class="sanjiaoleft"  src="images/sanjiao_left.png">

        </li>

        <li  src="images/2.jpg">

            <a>

                <p>给你一个西瓜味的夏天</p>

                <p>我本高冷,却融化在这炙热的夏天,昨天有人问我天这么热怎么破?当然...</p>

            </a>

            <img
src="images/sanjiao_left.png">

        </li>

        <li  src="images/3.jpg">

            <a>

                <p>PHP学科洗剪吹会员管理系统评比尘埃落定</p>

                <p>最近的天气热的是不要不要的啊，出门五分钟，流汗两小时，感觉大...</p>

            </a>

            <img
src="images/sanjiao_left.png">

        </li>

        <li  src="images/4.png">

            <a>

                <p>清凉一夏老学员交流会</p>

                <p>还好当天太阳不大，温度不高，我们就安排在室外，靠近南湖公园，...</p>

            </a>

            <img  src="images/sanjiao_left.png">

        </li>

    </ul>
</div>

3.2 效果布局的CSS

<link
href="reset.css"
type="text/css"
rel="stylesheet">
<style
type="text/css">

    a:hover{

        text-decoration:
none;   /*访问时删除下划线*/
    }

    #main{

        width:
760px;

        margin:
50px auto;   /*居中显示*/
    }

    #left{

        width:
504px;

        height:
333px;

        float: left;

    }

    #right{

        width:
256px;

        float: left;

        height:
333px;

    }

    #right li{

        padding:
17px;

        position:
relative; /*相对定位.
为了后面的小图标的定位*/
    }

    #right li p:first-child{

        overflow:
hidden;

        font-size:
15px;

        height:
20px;

        cursor:
pointer;

    }

    #right li p:not(:first-child){   /*第一个p标签设置大的字体*/
        font-size:
12px;

        cursor:
pointer;

    }

    .select{

        background-color:
#FFB201;

        color: white;

    }

    .sanjiaoleft{    /*小图标的样式*/
        display:
block;

        position:
absolute;

        top:
30px;

        left: -12px;

    }

    ul img{   /*默认情况下图片先隐藏*/
        display:
none;

    }
</style>

  

3.3 JS特效

<script
type="text/javascript">

    window.onload
= function () {

        var ul
= document.getElementById("right");

        var lis
= ul.getElementsByTagName("li");

        //>>1.找到所有的li注册鼠标移入和移出事件
        for
(var i
= 0;
i < lis.length; ++i) {

            var li
= lis[i];

            //>>2.鼠标移入事件
            li.onmouseover
= function () {

                //>>2.1 先清除所有效果
                for
(var j
= 0;
j < lis.length; ++j) {

                    lis[j].className
= '';

                    lis[j].getElementsByTagName("img")[0].className
= '';

                }

                //>>2.2 为引入的添加效果
                this.className
= 'select';

                this.getElementsByTagName("img")[0].className
= 'sanjiaoleft';

                document.getElementById("targetImage").src
= this.getAttribute("src");

            }

            //>>3.鼠标移出事件
            li.onmouseout
= function () {

                //移出时删除效果
                this.className
= '';

                this.getElementsByTagName("img")[0].className
= '';

            }

        }

    }
</script>

本文来源：http://bbs.itsource.cn/thread-1636-1-1.html