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

「爱情、让人受尽委屈。」 2022-06-09 14:15 145阅读 0赞

# 1. **制作效果图** #

![Center][]

# 2. **为什么要制作效果** #

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

# 3. **制作步骤** #

3.1 html结构

<**div id="main"**>  
    <**div id="left"**>  
        <**img src="images/1.jpg" id="targetImage" style="width**: 504**px**;**height**: 333**px"**>  
    </**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**:  760**px**;  
        **margin**:  50**px auto**;   */\*居中显示\*/  
    *\}  
    **\#left**\{  
        **width**:  504**px**;  
        **height**:  333**px**;  
        **float**: **left**;  
    \}  
    **\#right**\{  
        **width**:  256**px**;  
        **float**: **left**;  
        **height**:  333**px**;  
    \}  
    **\#right li**\{  
        **padding**:  17**px**;  
        **position**: **relative**; */\*相对定位. 为了后面的小图标的定位\*/  
    *\}  
    **\#right li p**:**first-child**\{  
        **overflow**: **hidden**;  
        **font-size**:  15**px**;  
        **height**:  20**px**;  
        **cursor**: **pointer**;  
    \}  
    **\#right li p**:**not**(:**first-child**)\{   */\*第一个p标签设置大的字体\*/  
        ***font-size**: 12**px**;  
        **cursor**: **pointer**;  
    \}  
    .**select**\{  
        **background-color**: **\#FFB201**;  
        **color**: **white**;  
    \}  
    .**sanjiaoleft**\{    */\*小图标的样式\*/  
        ***display**: **block**;  
        **position**: **absolute**;  
        **top**:  30**px**;  
        **left**: -12**px**;  
    \}  
  
    **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

[Center]: /images/20220609/79ada5fb33064459a706562a638b5a9f.png