CCS+DIV实战代码示例--一个静态页面

作者: 相关函数 | 来源:发表于2017-11-14 09:59 被阅读64次

index.html文件

<!DOCTYPE html>
<html>
<head>
    <title>JOE-DIV+CSS</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <!--整体外层容器-->
    <div id="container">
        <!--banner条-->
        <div id="banner">
            <img src="images/banner1.jpg" alt="first webpage">
        </div>
        <!--全局导航条-->
        <div id="globllink">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新疆简介</a></li>
                <li><a href="#">风土人情</a></li>
                <li><a href="#">吃在新疆</a></li>
                <li><a href="#">路线选择</a></li>
                <li><a href="#">自主行</a></li>
                <li><a href="#">摄影摄像</a></li>
                <li><a href="#">游记精选</a></li>
                <li><a href="#">资源下载</a></li>
                <li><a href="#">雁过留声</a></li>
            </ul>
        </div>
        <!--左侧栏-->
        <div id="left">
            <div id="weather">
                <h3><span>天气查询</span></h3>
                <ul>
                    <li>乌鲁木齐雷阵雨</li>
                    <li>吐鲁番多云转阴</li>
                    <li>喀什阵雨转多云</li>
                    <li>库尔勒阵雨转阴</li>
                </ul>

            </div>
            <div  id="today">
                <h3><span>今日推荐</span></h3>
                <ul>
                    <li><a href="#"></a><img src="images/left1.jpg"></li>
                    <li><a href="">哈哈哈</a></li>
                    <li><a href="#"></a><img src="images/left2.jpg"></li>
                    <li><a href="">啦啦啦</a></li>
                    <li><a href="#"></a><img src="images/left3.jpg"></li>
                    <li><a href="">嘻嘻嘻</a></li>
                </ul>
            </div>
        </div>
        <!--中间内容栏-->
        <div id="middle">
            <div id="host">
                <img src="images/host.jpg" alt="魔鬼域"><a href="#"></a>
            </div>
            <div id="scene">
                <h3><span>美景寻踪</span></h3>
                <ul>
                    <li><img src="images/1.jpg"><a href=""></a></li>
                    <li><img src="images/2.jpg"><a href=""></a></li>
                    <li><img src="images/3.jpg"><a href=""></a></li>
                    <li><img src="images/4.jpg"><a href=""></a></li>
                </ul>
            </div>
            <div id="route">
                <h3><span>线路精选</span></h3>
                <ul>
                    <li><a href="#">哈哈哈哈哈哈哈奥奥奥奥奥奥奥奥奥奥</a></li>
                    <li><a href="#">拉伸的发是快了多好看咖喱的客服哈</a></li>
                    <li><a href="#">爱神的箭喝蔷薇哦女稍等哈地方留到那就是</a></li>
                    <li><a href="#">鳄鱼ID灰色空间二维覅胡当升科技</a></li>
                </ul>
            </div>
        </div>
        <!--右侧栏-->
        <div id="right">
            <div id="fengguang">
                <h3><span>新疆风光</span></h3>
                <ul>
                    <li><img src="images/right1.jpg"><a href="#"></a></li>
                    <li><img src="images/right2.jpg"><a href="#"></a></li>
                </ul>
            </div>
            <div id="xiaochi">
                <h3><span>小吃推荐</span></h3>
                <ul>
                    <li><a href="#">烤馕</a></li>
                    <li><a href="#">大盘鸡</a></li>
                    <li><a href="#">羊肉串</a></li>
                    <li><a href="#">馕包饭</a></li>
                </ul>
            </div>
            <div id="binguan">
                <h3><span>宾馆推荐</span></h3>
                <ul>
                    <li><a href="#">美丽华大饭店</a></li>
                    <li><a href="#">五星级大酒店</a></li>
                    <li><a href="#">新疆宾馆</a></li>
                    <li><a href="#">劳力士干</a></li>
                    <li><a href="#">安徽分发生</a></li>
                    <li><a href="#">且去西藏</a></li>
                    <li><a href="#">啊搜房帮啊</a></li>
                </ul>
            </div>
        </div>
        <!--脚注栏-->
        <div id="footer">
            <p>JOE &copy;版权所有 <a href="webmail@qq.com">joe@qq.com</a></p>
        </div>
    </div>
</body>
</html>

样式文件css.css

body{
    background:#2286c6;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: Arial;
}

#container{
    margin: 0px auto;
    width: 780px;
    text-align: left;
    background: #123456;
}

#banner{
    margin: 0px;
    padding: 0px;
    background: #778899;
    width: 100%;
}

#globllink{
    margin: 0px;
    padding: 0px;
    background: #567;
    height: 50px;
    width: 100%;
}

#globllink ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#globllink ul li{
    text-align: center;
    float: left;
    margin: 0px;
    padding: 0px;
}

#globllink ul li a{
    display: block;
    width: 78px;
    padding: 10px 0px;
    font-size: 15px;
}

#globllink ul a:link,#globllink ul a:visited{
    color: black;
    background: url("images/button1.png") no-repeat;
    text-decoration: underline;
}

#globllink ul a:hover{
    color: white;
    background: url("images/button1_bg.png") no-repeat;
    text-decoration: none;
}


#left{
    width: 200px;
    background: #66b3ff;
    margin: 0px; 
    padding: 0px 0px 5px 0px;
    color: #d8ecff;
    float: left; // 表示向左浮动
}

#weather{
    background: url("images/weather.jpg") no-repeat;
    padding: 0px;
    margin: 2px 5px 20px 5px;
}

#weather h3{
    text-align: center;
    margin: 5px 0px;
    padding: 5px 0px;
    color: yellow;
}

#weather ul{
    list-style-type: none;
    padding: 0px;
    margin: -10px 0px;
}

#weather li{
    background: url("images/icon1.png") no-repeat 2px 2px;
    padding: 5px 26px;
    margin: 0px 8px;
}

#today{
    margin: 2px 5px 84px 5px;
}

#today h3{
    color: #0000c6;
    background: #ddddff url("images/icon2.png") no-repeat 2px 3px;
    padding: 3px 25px;
}

#today ul{
    list-style-type: none;
    padding: 0px;
    text-align: center;
    margin: -5px 0px;
}

#today ul li{
    margin: 0px;
    padding: 0px;
}

#today li img{
    border: #ffffff solid;
    padding: 0px;
    margin: 0px;
}

#today li a{
    padding: 0px;
    margin: 0px;
}

#today li a:link, #today li a:visited{
    padding: 2px;
    margin: 0px;
}

#today li a:hover{
    color: #ffffff;
    text-decoration: none;
}

#middle{
    width: 400px;
    background: #ffffff;
    margin: 0px 0px;
    padding: 5px 5px;
    float: left;
}

#scene h3{
    text-align: left;
    padding: 0px 0px 0px 10px;
    margin: 5px 0px;
}

#scene ul, #route ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

#scene ul li img{
    float: left;
    margin: 0px 3px 0px 3px;
    border: #ff5809 solid 2px;
}

#route {
    clear: both;
    margin: 0px;
    padding: 5px 0px;
}

#route h3{
    text-align: left;
    padding: 0px 0px 0px 10px;
    margin: 5px 0px;
}

#route ul li{
    background: url("images/icon2.png") no-repeat 2px ;
    padding: 5px 25px;
    color: #ffdc35;
}

#route ul li a:list, #route ul li a:visited{
    text-decoration: none;
    color: #004e8a;
}

#route ul li a:hover{
    text-decoration: underline;
    color: #000000;
}

#right{
    width: 170px;
    background: #66b3ff;
    margin: 0px;
    padding: 0px 0px 5px 0px;
    float: left;
}

#fengguang,#xiaochi,#binguan{
    margin: 2px 0px 20px 0px;
    padding: 0px;
}

#fengguang img{
    margin: 0px;
    padding: 0px 0px 5px 0px;
}

#fengguang h3,#xiaochi h3,#binguan h3{
    margin: 5px 2px 10.3px 0px;
    padding: 0px;
    background: #ddddff;
}

#fengguang ul, #xiaochi ul, #binguan ul{
    list-style-type: none;
    padding: 0px;
    margin: 5px;
}

#fengguang ul li{
    text-align: center;
    margin: 10px 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    
}

#xiaochi ul li, #binguan ul li{
    background: url("images/icon2.png") no-repeat;
    margin: 2px;
    padding: 0px 0px 2px 25px;
    border-bottom: 1px dashed #eeeeee;
}

#xiaochi ul li a:link, #binguan ul li a:visited{
    text-decoration: none;
    color: blue;
}

#xiaochi ul li a:hover, #binguan ul li a:hover {
    text-decoration:underline;
    color: #ffffff;
}

#footer{
    background: #f9f900;
    width: 100%;
    margin: 2px 2px;
    padding: 1px 0px;
    clear: both;
}

#footer p{
    text-align: center;
}

#footer p a{
    color: #ffffff;
    text-decoration: none;
}