HTML作业难点梳理

**

HTML作业难点梳理

**
1、做天气预报div嵌套过程中和css使用混乱。
解决后样式如下：

<div id="left">
        <div id="weather">
            <h3><span>天气查询</span></h3>
            <ul>
                <li>乌鲁木齐&nbsp;&nbsp;&nbsp;雷阵雨 20℃-31℃</li>
                <li>吐鲁番&nbsp;&nbsp;&nbsp;多云转阴 20℃-28℃</li>
                <li>喀什&nbsp;&nbsp;&nbsp;阵雨转多云 25℃-32℃</li>
                <li>库尔勒&nbsp;&nbsp;&nbsp;阵雨转阴 21℃-28℃</li>
                <li>克拉马依&nbsp;&nbsp;&nbsp;雷阵雨 26℃-30℃</li>
            </ul>
            <br>
        </div>

css：

    #weather{
        background:url(../img/weather.jpg) no-repeat -5px 0px;
        margin:0px 5px 0px 5px; 
        background-color:#5ea6eb;
    }
    div#left #weather h3{
        font-size:12px;
        padding:24px 0px 0px 74px;
        color:#FFFFFF;
        background:none;
        margin:0px;
    }
    div#weather ul{
        margin:8px 5px 0px 5px;
        padding:10px 0px 8px 5px;   
        list-style:none;
    }

#weather ul li{
    background:url(../img/icon1.gif) no-repeat 0px 6px;
    padding:1px 0px 0px 10px;
}

2、中间照片实现鼠标放上去链接文字“魔鬼城探秘”
在链接接标签中加入了title属性
代码：

 <div id="ghost"><a href="#" title="魔鬼城探秘"><img src="img/ghost.jpg" border="0"></a></div>

3、右侧小吃推荐栏白色短线虚线
css中加入border-bottom属性
代码：

#food ul li, #life ul li{
    background:url(../img/icon1.gif) no-repeat 3px 9px;
    padding:3px 0px 3px 12px;
    border-bottom:1px dashed #EEEEEE;

4、导航栏
鼠标在导航栏上没有变化
加入visited、hove属性
css代码：

#nav a{
    display:block;
    padding:9px 6px 11px 6px;
    background:url(../img/button1.jpg) no-repeat;
    margin:0px;
}
#nav a:link, #nav a:visited{
    color:#004a87;
    text-decoration:underline;
}
#nav a:hover{
    color:#FFFFFF;
    text-decoration:underline;
    background:url(../img/button1_bg.jpg) no-repeat;
}

未完待续…