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运行效果


												


											
dic+css页面布局分享的更多相关文章
	

    
								
  1. CSS 页面布局、后台管理示例
		
    CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...
    
		
    2. 
						
  2. css页面布局
		
    写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
    
		
    3. 
						
  3. CSS页面布局常见问题总结
		
    在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂 ...
    
		
    4. 
						
  4. css页面布局总结
		
    W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
    
		
    5. 
						
  5. CSS页面布局与网格（上）
		
    1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...
    
		
    6. 
						
  6. 第6天：DIV+CSS页面布局实战
		
    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...
    
		
    7. 
						
  7. 一、CSS概述 	二、CSS的选择器（认识） 	三、CSS样式和属性（练习） 	四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式
		
    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
    
		
    8. 
						
  8. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
		
    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
    
		
    9. 
						
  9. 第五章 CSS页面布局基础
		
    1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【转载】Bandits for Recommendation Systems (Part I)
			
    [原文链接:http://engineering.richrelevance.com/bandits-recommendation-systems/.] [本文链接:http://www.cnblog ...
    
			
    2. 
						
  2. Enable MFA for a user
			
    If you are root/admin account, in order to configure a virtual MFA device, you must have physical ac ...
    
			
    3. 
						
  3. MongoDB与内存
			
    来自  http://www.ttlsa.com/mongodb/mongodb-and-memory/# 但凡初次接触MongoDB的人,无不惊讶于它对内存的贪得无厌,至于个中缘由,我先讲讲Linu ...
    
			
    4. 
						
  4. seajs 源码阅读笔记
			
    代码概览 src目录文件列表如下: 代码以模块化的方式来组织,构建的时候会合并为一个js文件(sea.js 或 sea-debug.js),其中,intro.js和 outro.js 分别是这个js文 ...
    
			
    5. 
						
  5. Blend 2015 教程 （二） 样式
			
    前一篇讲述了如何在新Blend中完成一个简单的带数据绑定的界面小例子,本篇将讲述一下,把View层和Style层分开,并搭建Style层框架的方法,并进行细节样式修改. 1. 在解决方案资源管理器面板 ...
    
			
    6. 
						
  6. 【腾讯Bugly干货分享】iOS10 SiriKit QQ适配详解
			
    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ece0331288fb4d31137da6 1. 概述 苹果在iOS10开放 ...
    
			
    7. 
						
  7. Java多线程14：生产者/消费者模型
			
    什么是生产者/消费者模型 一种重要的模型,基于等待/通知机制.生产者/消费者模型描述的是有一块缓冲区作为仓库,生产者可将产品放入仓库,消费者可以从仓库中取出产品,生产者/消费者模型关注的是以下几个点: ...
    
			
    8. 
						
  8. EF 外键问题
			
    在做一个评论功能的时候,发现用户的id不对,打开数据库一看,莫名其妙的新增了几个用户.明显是将外键中的用户新增到用户表中了. 评论表: public class CourseComment : Bas ...
    
			
    9. 
						
  9. Nim教程【十】
			
    openarray类型 注意:openarray类型只能用于参数 固定大小的数组虽然性能不错,但过于呆板,使用取来不是很方便 对于一个方法来说,传入参数如果是一个数组,最好是不要限制数组的长度 也就是 ...
    
			
    10. 
						
  10. 5天玩转C#并行和多线程编程 —— 第五天 多线程编程大总结
			
    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...
    
			
    11.