dic+css页面布局分享

2022-04-24 00:35:41

HTML部分代码
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link href="css/c.css" rel="stylesheet" type="text/css" > 

    </head>

    <body>

        <!--container-->

        <div id="container">

        <!--banner-->

        <div id="banner"><img src="img/官网.jpg" width="100%" height="150px" alt="图片" title="成梦旅游官网" ></div>

        <!--globllink-->

        <div id="globllink">

        <ul>

            <li><a href="#" target="_self">热点景区</a></li>

            <li><a href="#" target="_blank">优惠推荐</a></li>

            <li><a href="#" target="_blank">离家最近</a></li>

            <li><a href="#" target="_blank">亲子景区</a></li>

            <li><a href="http://www.baidu.com/" target="_blank">问题反馈</a></li>

        </ul>

        </div>

        <!--left-->

        <div id="left">

            <div id="weather">

            <h3><span>天气查询</span></h3>

            <ul>

                <li>武汉&nbsp;&nbsp;&nbsp;&nbsp;大雨 ℃-℃</li>

                <li>孝感&nbsp;&nbsp;&nbsp;&nbsp;小雨20℃-℃</li>

                <li>苏州&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;晴25℃-℃</li>

                <li>上海&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阴20℃-℃</li>

            </ul>

            </div>

            <div id="today">

                <h3><span>今日推荐</span></h3>

                <ul>

                    <li><a href="#"><img src="img/2.jpg" width=150px height=55px></a></li>

                    <li><a href="#">东湖</a></li>

                    <li><a href="#"><img src="img/3.jpg" width="150px" height="55px"></a></li>

                    <li><a href="#">叼叉湖</a></li>

                    <li><a href="#"><img src="img/4.jpg"width="150px" height="55px"></a></li>

                    <li><a href="#">园林园</a></li>

                </ul>

            </div>

        </div>

        <!--center-->

        <div id="center">

            <div id="blank">

                <img src="img/迪士尼.jpg" width=400px height=130px >

            </div>

            <div id="blank1">

                <h3>上海迪士尼2天1晚*行</h3>

                <ol>

                    <li>线路：大门-海盗园-梦想大道-风飞谷-恐龙墓园-出口</li>

                    <li>线路：大门-奇迹漂流-绝地仓库-风飞谷-恐龙墓园-出口</li>

                    <li>线路：大门-风飞谷-梦想大道-海盗园-恐龙墓园-出口</li>

                    <li>线路：大门-海盗园-梦想大道-风飞谷-绝地仓库-出口</li>

                </ol>

            </div>

             <div id=blank2>

                <a href="#" target="_blank"><img src="img/22.gif" height=120px width=120px></a>

                <a href="#" target="_blank"><img src="img/23.jpg" height=120px width=120px></a>

                <a href="#" target="_blank"><img src="img/24.jpg" height=120px width=154px></a>

             </div>    

        </div>

        <!--right-->

        <div id="right">

            <div id="map">

                <h3>上海风光</h3>

                <p><a href="#" title="点击看大图"><img src="img/34.jpg" width=; height=></a></p>

                <p><a href="#" title="点击看大图"><img src="img/35.jpg" width=; height=></a></p>

            </div>

             <div id="food">

             <h3>小吃推荐</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="lifo">

                 <h3>宾馆酒店</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>

        <!--footer-->

        <div id="footer">大兔子技术有限公司@-2016版权所有</div>

        </div>

    </body>

</html>
---------------------------------------------------------------------------------------------------------------------------------------------
CSS代码部分

body{
background-color:antiquewhite;
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial;
}
#container{
margin:0px auto;
width:810px;
height:600px;
text-align:left;
background:cadetblue;
}
#banner{
margin:0px;
padding:0px;
background:wheat;
height:150px;
width:100%;
}
#globllink{
margin:0px;
padding:0px;
background:salmon;
height:50px;
}

#globllink ul{
list-style-type:none;
margin:0px;
}
#globllink ul li{
float:left;
text-align:center;
width:80px;
margin:0px 20px;
}
#globllink ul li a{
display:block;
padding:9px 6px 11px 6px;
margin:7px;
background:url("../img/5.jpg") no-repeat;
}
#globllink a:link,#globllink a:visited{
color:#004a87;
text-decoration:underline;
}
#globllink a:hover{
color:#fffff;
text-decoration:none;
background:url("../img/2.jpg") no-repeat;
  transform:rotate(30deg);
-ms-transform:rotato(30deg);/*ie9*/
-moz-transform:rotate(30deg);/*firefox*/
-webkit-transform:rotate(30deg);/*safari and chrome*/

}
#left{
width:200px;

background:cadetblue;
padding:0px 0px 5px 0px;
margin:0px;
    color:blank;
float:left;
-display:inline;
}
#weather{
background:url("../img/2.jpg" ) no-repeat;
margin:0px 5px;
background-color:cadetblue;
}
#weather h3{
font-size:12px;
padding: 1px 0px 0px 70px;
color:gold;
margin:0px;
}
#weather ul{
margin:8px 5px 0px 5px;
padding:10px 0px 8px 15px;;
list-style-type:none;
}
#weather ul li{
   background:url("../img/5.jpg") no-repeat;
}
#today h3{
color:seagreen;
font-size:15px;
margin:15px 0px 0px 20px;
padding:4px 0px 2px 30px;
background:url("../img/3.jpg");

}
#today{
background:cadetblue;
margin:0px 3px;
padding:-2px 0px;
}
#today ul{
list-style-type:none;
padding:10px;
margin:0px;
}
#today ul li{
text-align:center;
}
#today ul li img{
border:1px mediumvioletred solid;
}
#today ul li a:link,#today ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#today ul li a:hover{
text-decoration: underline;
}

#center{
display:inline;
background:white;
margin:0px 5px;
padding:5px 0px 5px 0px;
float:left;
width:400px;
height:370px;
}
#blank{
border:1px solid salmon;
margin-top:-5px;
margin-bottom:-4px;
}
#blank1 h3{
color:brown;
margin:5px 5px;
padding:0px 0px 0px 70px;
}
#blank1 {
background: url("../img/5.jpg"); no-repeat ;

padding:13px;
}

#blank2 a img{
  margin-right:-2px ;
  padding:0px;
  border: #C71585 solid 1px;

}
#right{
width:200px;
height:370px;
background:cadetblue;
margin:0;
padding:0px 0px 5px 0px;
float:left;
}
#map h3{
font-size:13px;
color:green;
font-style:italic;
font-weight:bold;
font-family:"黑体";
margin:0px;
padding:2px 0px 0px 5px;
}
#map img{
margin-bottom:-14px;
padding-top:-100px;
}
#food,#lifo{
font-size:15px;
}
#food ul li,#lifo ul li{

padding:0px;
border-bottom:1px dashed #eeeeee;
}
#lifo{
margin-top:-10px;
}
#food a:link,#food a:visited{
color:crimson;
text-decoration:none;
}
#food a:hover{
text-decoration:underline;
background: url("../img/2.jpg") no-repeat;
}

#lifo a:link,#lifo a:visited{
color:crimson;
text-decoration:none;
}
#lifo a:hover{
text-decoration:underline;
background: url("../img/2.jpg") no-repeat;
}
#footer{
width:100%;
height:30px;
background:silver;
margin:1px 0px 0px 0px;
padding:1px 0px;
clear:both;
padding-left:70px;
}

静态页面效果

edge运行效果

2016-11-2109:45:07

在edge上显示正常，但IE11兼容不正常，（中间div排版上下错开了）。

希望大牛指出解决办法

IE11运行效果

码农公寓

相关文章