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. 再谈CSHELL对C程序员的价值
			
    几个礼拜前,介绍了CSHELL.http://www.cnblogs.com/hhao020/p/4974542.html今天再试着介绍下,希望能有更多C程序员留意到它,从中获益. 很多年前,我在调试 ...
    
			
    2. 
						
  2. SNMP–Simple Network Management Protocol
			
    I am planning to write an introduction and simple implementation of SNMP in software, when my work w ...
    
			
    3. 
						
  3. 数据库软件dbForge Studio for MySQL更新至v.6.1
			
    本文转自:慧都控件网 说到MariaDB,这个数据库算是MySQL的一个分支.现在非常的流行,很多地方都能看到它的身影.MariaDB作为一种新的数据库管理系统,在短时间内获得如此高的关注度.这也是D ...
    
			
    4. 
						
  4. Winform以任意角度旋转PictureBox中的图片的方法
			
    方法1: private void RotateFormCenter(PictureBox pb, float angle) { Image img = pb.Image; int newWidth  ...
    
			
    5. 
						
  5. hdu 2896 AC自动机
			
    // hdu 2896 AC自动机 // // 题目大意: // // 给你n个短串,然后给你q串长字符串,要求每个长字符串中 // 是否出现短串,出现的短串各是什么 // // 解题思路: // / ...
    
			
    6. 
						
  6. ubuntu10.04下修改mysql的datadir的问题
			
    ubuntu10.04下修改mysql的datadir的问题 转自:http://blog.sina.com.cn/s/blog_4152a9f50100mq5i.html 昨天由于服务器空间告紧,需 ...
    
			
    7. 
						
  7. Restore Oracle database to another server
			
    1. Copy or remotely mount the backupset folder from the source server to the target server 2. On the ...
    
			
    8. 
						
  8. iOS项目旋转控制
			
    iOS6的旋屏控制技巧 在iOS5.1 和 之前的版本中, 我们通常利用 shouldAutorotateToInterfaceOrientation: 来单独控制某个UIViewController ...
    
			
    9. 
						
  9. ecshop数据表说明
			
    ecshop数据表说明 数据库结构说明,以及自己在后台备份不需要备份的表(红色字体是不需要备份的表)备份文件在FTP或者服务器上网站根目录下data\sqldata下 数据库采用mysql,共78张表 ...
    
			
    10. 
						
  10. STM32串口接收不定长数据原理与源程序（转）
			
    今天说一下STM32单片机的接收不定长度字节数据的方法.由于STM32单片机带IDLE中断,所以利用这个中断,可以接收不定长字节的数据,由于STM32属于ARM单片机,所以这篇文章的方法也适合其他的A ...
    
			
    11.