新疆旅游网,引用外部CSS

最新推荐文章于 2023-05-14 17:51:15 发布

ZKL.

最新推荐文章于 2023-05-14 17:51:15 发布

阅读量517

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/m0_64703300/article/details/122504484

版权

外部CSS文件

*{  /*全局配置 */
            margin:0px;
            padding:0px;
        }
        #qw{    /*总框(整体大框)*/
            width:800px;/*总框(宽度为800px)*/
            height:900px;/*高度为900px*/
            border:1px solid glod;
            background:blue;/*背景颜色为蓝色*/

            /*设置容器页面居中*/
            margin:0px auto;/*居中对齐(左右为0px auto自动对齐)*/
        }

        /*上部*/
        #top{
            width:780px;
            height:233px;
            margin:auto;
        }
        #top img{
            /*设置图片为块状显示，去除与后面元素的间距*/
            display: block;
        }
        #top #w{

         /*因为子元素a标签全都浮动了，会导致浮动塌陷问题，所以清除浮动*/
            overflow: hideen;/*清楚浮动*/
        }
        #top #w a{
            width:97.5px;
            height:33px;
            float: left;/*向左浮动*/
            text-align: center;/*剧中对齐*/
            line-height: 33px;/*设置内容垂直居中*/
            text-decoration: none;/*去除下划线*/
            background-image:url(旅游网/button1.jpg);/*添加背景图片(相对路径)*/
        }
        #top #w a:hover{//鼠标悬浮

        /*当鼠标放到超链接上的时候，让背景图片切换*/
            background-image: url(旅游网/button1_bg.jpg);
        }
        /*左边部分*/
        #left{
            width:180px;
            height:580px;
            float:left;
            margin-left:10px;/*外边距向左移动10px*/
        }
     #sd{
            height: 43px;
            line-height: 43px;/*设置内容垂直居中*/
            font-size:14px;/*字体大小为:14像素*/
            padding-left: 75px;/*设置内间距向左移动75像素*/
            color: #FFFFFF;/*字体颜色为白色*/
            background-image:url(旅游网/weather.jpg); 
        }

     .a{
            text-align:center;
            font-size:2px;
            line-height:20px;/*设置内容垂直居中*/
            background-color:#3399ff;/*背景颜色为黑色*/
        }
        #s{
            background-image:url(旅游网/button1.jpg); 
            margin-bottom:8px;/*外边距向下移动8像素*/
            margin-top:8px;/*设置外边距向上移动8像素*/
        }
        #s img{
            width:10px;
            padding-right:10px;/*设置内间距向右移动10像素*/
            padding-left:8px;/*设置内间距向左移动8像素*/
        }
        #a{
            text-align:center;
            background-color:#3399ff;/*设置背景颜色*/
        }
        #center{
            width:400px;
            height:580px;
            float:left;/*向左浮动*/
            background-color:white;/*设置背景颜色为黑色*/
        }
        #zc img{/*设置图片高度*/
            height:33px;
        }
        #c img{/*设置图片高度和内部边距*/
            height:130px;
            padding-left:4px;/*设置内边距向左移动4像素*/
        }
            
        .sd img{//设置图片高度和内边距
            padding:5px;/*设置内边距(上5像素右5像素下5像素左5像素)移动5像素*/
            height:6px;
        }
        #right{
            width:200px;
            height:580px;
            float:left;/*向左浮动*/
            background-color:white;
        }
        #u{
            border-bottom-style:dashed;/*边框样式,虚线*/
            background-color:#0099ff;
            text-align:center;
        }
        #p{
            border-bottom-style:dashed;
            background-color:#0099ff;
            text-align:center;
        }
        .a{
            text-align:center;
        }
        #bottom{
            width:778px;
            height:60px;
            float:right;/*向右浮动*/
            text-align:center;/*剧中对齐8/
            background-color:#0099ff;
            margin-right:12px;/*外边距向右移动12像素*/
        }

Html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--
          使用样式的三种方式:
          1.内部样式表
          2.行内样式
          3.外部样式表(推荐)
        -->
      <!--引入外部样式表-->
        <link rel="stylesheet" type="text/css" href="xj.css"/>   引用CSS文件
    </head>
    <body>
        <div id="qw">
            <div id="top">
                <img src="旅游网/banner.jpg"">
                <div id="w">
                    <a href="#">首页</a>
                    <a href="#">名族概览</a>
                    <a href="#">路线选择</a>
                    <a href="#">特色线路</a>
                    <a href="#">户外探险</a>
                    <a href="#">精彩游记</a>
                    <a href="#">付款方式</a>
                    <a href="#">给我留言</a>
                </div>
            </div>    
            <div id="left">
                <div id="sd">
                    <h4>天气查询</h4>
                </div>    
                    <div class="a">
                        乌鲁木齐晴转阴25℃-35℃<br>
                        喀什阵雨转多云25℃-32℃<br>
                        吐鲁番多云转阴20℃-28℃<br>
                        库尔勒阵雨转阴21℃-28℃<br>
                        克拉玛依雷阵雨26℃-30℃<br>
                    </div>
                
                    <div id="s">
                        <img src="旅游网/icon2.gif">今日推荐</div>
                    <div id="a">
                    <img src="旅游网/tuijian1.jpg">香木河
                    <img src="旅游网/tuijian2.jpg">白哈河
                    <img src="旅游网/tuijian3.jpg">乔伐里峰
                </div>
            </div>
            <div id="center">
                <img src="旅游网/ghost.jpg">
                <div id="zc">
                    <img src="旅游网/picture_h1.gif">
                </div>
                <div id="c">
                    <img src="旅游网/beauty1.jpg">
                    <img src="旅游网/beauty2.jpg">
                    <img src="旅游网/beauty3.jpg">
                    <img src="旅游网/beauty4.jpg">
                </div>
                <div id="zc">
                    <img src="旅游网/route_h1.gif">
                </div>
                <div class="sd">
                    <img src="./旅游网/icon1.gif">果子沟—赛里木湖—那拉提大草原—霍尔果斯口岸 
                      <br>
                    <img src="./旅游网/icon1.gif">喀纳斯—禾木河—克拉玛依—乌伦古湖—喀纳斯 
                      <br>
                    <img src="./旅游网/icon1.gif">乌鲁木齐一奎屯—乔尔玛—那拉提一巴音布鲁克 
                      <br>
                    <img src="./旅游网/icon1.gif">库尔勒—博斯腾湖—将军戈壁—吉木萨尔—天池 
                      <br>
                </div>
            </div>
            <div id="right">
                <div id="s">
                    <img src="旅游网/icon2.gif">今日推荐
                </div>
                <div class="a">
                    <img src="./旅游网/map1.jpg">
                    <img src="./旅游网/map2.jpg">
                </div>
                <div id="s">
                    <img src="旅游网/icon2.gif">特色美食
                </div>
                <div id="u">
                    大盘鸡</div>
                    <div id="u">窝窝囊</div>
                    <div id="u">芝麻囊</div>
                    <div id="u">哈密瓜
                </div>
                <div id="s">
                    <img src="旅游网/icon2.gif">新疆住宿
                </div>
                <div id="p">马航国际酒店</div>
                <div id="p">亚中亚大酒店</div>
                <div id="p">银都大饭店</div>
                <div id="p">如意大饭店</div>
                <div id="p">友好大饭店</div>
                <div id="p">王朝宾馆</div>
                <div id="p">神望宾馆</div>
            </div>
            <div id="bottom">网页爱好者版权所有2015-2016<br>联系我们1ovehtml@gmail.com</div>
        </div>
    </body>
</html>