dic+css page layout sharing-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

dic+css page layout sharing

高洛峰

Nov 21, 2016 am 11:58 AM

css

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="/static/imghwm/default1.png"  data-src="img/官网.jpg"  class="lazy"      style="max-width:90%" 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 id="span-天气查询-span"><span>天气查询</span></h3>
            <ul>
                <li>武汉    大雨 19℃-26℃</li>
                <li>孝感    小雨20℃-27℃</li>
                <li>苏州     晴25℃-31℃</li>
                <li>上海     阴20℃-29℃</li>
            </ul>
            </div>
            <div id="today">
                <h3 id="span-今日推荐-span"><span>今日推荐</span></h3>
                <ul>
                    <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"dic+css page layout sharing" ></a></li>
                    <li><a href="#">东湖</a></li>
                    <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"      style="max-width:90%" height="55px" alt="dic+css page layout sharing" ></a></li>
                    <li><a href="#">叼叉湖</a></li>
                    <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"     style="max-width:90%" height="55px" alt="dic+css page layout sharing" ></a></li>
                    <li><a href="#">园林园</a></li>
                </ul>
            </div>
        </div>
        <!--center-->
        <div id="center">
            <div id="blank">
                <img  src="/static/imghwm/default1.png"  data-src="img/迪士尼.jpg"  class="lazy"      style="max-width:90%"dic+css page layout sharing" >
            </div>
            <div id="blank1">
                <h3 id="上海迪士尼-天-晚自由行">上海迪士尼2天1晚自由行</h3>
                <ol>
                    <li>线路：大门-海盗园-梦想大道-风飞谷-恐龙墓园-出口</li>
                    <li>线路：大门-奇迹漂流-绝地仓库-风飞谷-恐龙墓园-出口</li>
                    <li>线路：大门-风飞谷-梦想大道-海盗园-恐龙墓园-出口</li>
                    <li>线路：大门-海盗园-梦想大道-风飞谷-绝地仓库-出口</li>
                </ol>
            </div>
             <div id=blank2>
                <a href="#" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="img/22.gif"  class="lazy"   height=120px    style="max-width:90%"dic+css page layout sharing" ></a>
                <a href="#" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="img/23.jpg"  class="lazy"   height=120px    style="max-width:90%"dic+css page layout sharing" ></a>
                <a href="#" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="img/24.jpg"  class="lazy"   height=120px    style="max-width:90%"dic+css page layout sharing" ></a>
             </div>    
                
        </div>
            
        
        <!--right-->
        <div id="right">
            <div id="map">
                <h3 id="上海风光">上海风光</h3>
                <p><a href="#" title="点击看大图"><img  src="/static/imghwm/default1.png"  data-src="img/34.jpg"  class="lazy"      style="max-width:90%"dic+css page layout sharing" ></a></p>
                <p><a href="#" title="点击看大图"><img  src="/static/imghwm/default1.png"  data-src="img/35.jpg"  class="lazy"      style="max-width:90%"dic+css page layout sharing" ></a></p>
            </div>
             <div id="food">
             <h3 id="小吃推荐">小吃推荐</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 id="宾馆酒店">宾馆酒店</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">大兔子技术有限公司@2015-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

displays normally on edge, but is not compatible with IE11 (the layout of the middle div is staggered up and down).

Hope the experts can point out the solution

IE11 running effect

dic+css page layout sharing

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles