CSS--例子：旅游观光

r囧r小猫 2021-09-27 05:34 296阅读 0赞

*  排版分析
 *  CSS代码
 *  HTML代码
 *  效果展示
    
     *  主界面效果
 *  end

# 排版分析 #

![这里写图片描述][70]

# CSS代码 #

body{ background-color:#2286c6; margin: 0px; padding:0px; text-align:center; font-size:12px; font-family:Arial, Helvetica, sans-serif; }
    #container{ position:relative; margin:0px auto 0px auto; width:780px; text-align:left; }
    div br{ display:none; }
    #globallink{ margin:0px; padding:0px; }
    #globallink ul{ list-style:none; padding:0px; margin:0px; }
    #globallink li{ float:left; text-align:center; width:78px; }
    #globallink a{ display:block; padding:9px 6px 11px 6px; background:url(button1.jpg) no-repeat; margin:0px; }
    #globallink a:link, #globallink a:visited{ color:#004a87; text-decoration:underline; }
    #globallink a:hover{ color:#FFFFFF; text-decoration:underline; background:url(button1_bg.jpg) no-repeat; }
    
    #left{ float:left; width:200px; background-color:#FFFFFF; margin:0px; padding:0px 0px 5px 0px; color:#d8ecff; }
    #left div{ background-color:#5ea6eb; margin:0px 5px 0px 5px; }
    #weather{ background:url(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(icon1.gif) no-repeat 0px 6px; padding:1px 0px 0px 10px; }
    #left div h3{ font-size:12px; padding:4px 0px 2px 15px; color:#003973; margin:0px 0px 5px 0px; background:#bbddff url(icon2.gif) no-repeat 5px 7px; }
    #today{ padding:0px 0px 10px 0px; }
    #today ul{ list-style:none; margin:-5px 0px 0px 0px; padding:0px; }
    #today ul li{ text-align:center; }
    #today ul li img{ border:1px solid #FFFFFF; margin:8px 0px 0px 0px; }
    #today ul li a:link, #today ul li a:visited{ color:#d8ecff; text-decoration:none; }
    #today ul li a:hover{ color:#FFFF00; text-decoration:underline; }
    
    #middle{ background-color:#FFFFFF; margin:0px 0px 0px 2px; padding:5px 0px 0px 0px; width:400px; float:left; }
    #middle div{ margin-left:5px; margin-right:5px; position:relative; }
    #middle h3{ margin:0px; padding:0px; height:41px; }
    #middle h3 span{ display:none; /* 文字去掉，换成图片 */ }
    #beauty{ margin:15px 0px 0px 0px; padding:0px; }
    #beauty h3{ background:url(picture_h1.gif) no-repeat; }
    #beauty ul, #route ul{ list-style:none; margin:8px 1px 0px 1px; padding:0px; }
    #beauty ul li{ float:left; width:97px; text-align:center; }
    #beauty ul li img{ border:1px solid #4ab0ff; }
    #route{ clear:both; margin:0px; padding:5px 0px 15px 0px; }
    #route h3{ background:url(route_h1.gif) no-repeat; }
    #route ul li{ padding:3px 0px 0px 30px; background:url(icon1.gif) no-repeat 20px 7px; }
    #route ul li a:link, #route ul li a:visited{ color:#004e8a; text-decoration:none; }
    #route ul li a:hover{ color:#000000; text-decoration:underline; }
    
    #right{ float:left; margin:0px 0px 1px 2px; width:176px; background-color:#FFFFFF; color:#d8ecff; }
    #right div{ position:relative; margin-left:5px; margin-right:5px; background-color:#5ea6eb; }
    #right div h3{ font-size:12px; padding:4px 0px 2px 15px; color:#003973; margin:0px 0px 5px 0px; background:#bbddff url(icon2.gif) no-repeat 5px 7px; }
    #map{ margin-top:5px; }
    #map p{ text-align:center; margin:0px; padding:2px 0px 5px 0px; }
    #map p img{ border:1px solid #FFFFFF; }
    #food{ padding-top:10px; }
    #food ul, #life ul{ list-style:none; padding:0px 0px 10px 0px; margin:10px 10px 0px 10px; }
    #food ul li, #life ul li{ background:url(icon1.gif) no-repeat 3px 9px; padding:3px 0px 3px 12px; border-bottom:1px dashed #EEEEEE; }
    #food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{ color:#d8ecff; text-decoration:none; }
    #food ul li a:hover, #life ul li a:hover{ color:#000000; text-decoration:none; }
    #life{ padding-top:10px; padding-bottom:5px; margin-bottom:5px; }
    
    #footer{ background-color:#FFFFFF; margin:1px 0px 0px 0px; clear:both; position:relative; padding:1px 0px 1px 0px; }
    #footer p{ text-align:center; padding:0px; margin:4px 5px 4px 5px; background-color:#5ea6eb; }
    #footer p a{ color:#FFFFFF; text-decoration:none; }

# HTML代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>新疆行知书</title>
    <link href="20.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="container">
        <div id="banner"><img src="banner.jpg"></div>
        <div id="globallink">
            <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>
            <br>
        </div>
        <div id="left">
            <div id="weather">
                <h3><span>天气查询</span></h3>
                <ul>
                    <li>乌鲁木齐   雷阵雨 20℃-31℃</li>
                    <li>吐鲁番   多云转阴 20℃-28℃</li>
                    <li>喀什   阵雨转多云 25℃-32℃</li>
                    <li>库尔勒   阵雨转阴 21℃-28℃</li>
                    <li>克拉马依   雷阵雨 26℃-30℃</li>
                </ul>
                <br>
            </div>  
            <div id="today">
                <h3><span>今日推荐</span></h3>
                <ul>
                    <li><a href="#"><img src="tuijian1.jpg"></a></li>
                    <li><a href="#">喀纳斯河</a></li>
                    <li><a href="#"><img src="tuijian2.jpg"></a></li>
                    <li><a href="#">布尔津</a></li>
                    <li><a href="#"><img src="tuijian3.jpg"></a></li>
                    <li><a href="#">天山之路</a></li>
                </ul>
                <br>
            </div>
        </div>
        <div id="middle">
            <div id="ghost"><a href="#" title="魔鬼城探秘"><img src="ghost.jpg" border="0"></a></div>
            <div id="beauty">
                <h3><span>美景寻踪</span></h3>
                <ul>
                    <li><a href="#"><img src="beauty1.jpg"></a></li>
                    <li><a href="#"><img src="beauty2.jpg"></a></li>
                    <li><a href="#"><img src="beauty3.jpg"></a></li>
                    <li><a href="#"><img src="beauty4.jpg"></a></li>
                </ul>
                <br>
            </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="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
                </ul>
                <br>
            </div>
        </div>
        <div id="right">
            <div id="map">
                <h3><span>新疆风光</span></h3>
                <p><a href="#" title="点击看大图"><img src="map1.jpg"></a></p>
                <p><a href="#" title="点击看大图"><img src="map2.jpg"></a></p>
            </div>
            <div id="food">
                <h3><span>小吃推荐</span></h3>
                <ul>
                    <li><a href="#">17号抓饭</a></li>
                    <li><a href="#">大盘鸡</a></li>
                    <li><a href="#">五一夜市</a></li>
                    <li><a href="#">水果</a></li>
                </ul>
                <br>
            </div>
            <div id="life">
                <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>
                <br>
            </div>
        </div>
        <div id="footer">
            <p>艾萨克 ©版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
        </div>
    </div>
    </body>
    </html>

# 效果展示 #

## 主界面效果 ##

![这里写图片描述][70 1]

# end #

谢谢您的阅读！

[70]: /images/20210923/aefb21af7cb9448fbd0451fe4715f239.png
[70 1]: /images/20210923/cfcfbd677b9e4640ae651cb199c6832d.png