响应式布局的简单案例

来源：互联网转载和整理 2024-11-16 20:00:50

响应式布局网页

响应式布局

响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局：

不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下：

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<style>
p{
font-size:12px;
}
header{
width:100%;
}
headerimg{
width:100%;
}
@media(min-width:1300px)and(max-width:1400px){
#left{
float:left;
width:30%;
margin:0px50px;
}
#left#logo-bg{
margin:10%10%;
width:80%;
position:relative;
}
#left#logo{
float:left;
width:12%;
position:absolute;
left:13%;
top:230px;
}
#leftp{
margin-bottom:-20px;
}
#leftp,h4{
text-align:center;
color:red;
}
#right{
float:left;
width:60%;
margin:15%0px;
}
#righth2{
text-align:center;
}
#rightfieldset{
text-align:center;
border-left:none;
border-right:none;
border-bottom:none;
}
#rightfieldsetlegend{
padding:0px20px;
}
#fen{
width:100%;
-webkit-column-count:6;
-moz-column-count:6;
-o-column-count:6;
-ms-column-count:6;
column-count:6;
-webkit-column-gap:1em;
-moz-column-gap:1em;
-o-column-gap:1em;
-ms-column-gap:1em;
column-gap:1em;
}
#fenimg{
width:100%;
border-radius:10px10px10px10px;
}
#fenp,h4{
text-align:center;
color:red;
}
#fenp{
margin-bottom:-20px;
}
#dip{
text-align:center;
}
#dipspan{
　color:red;
}
}
@media(min-width:1000px)and(max-width:1300px){
#left{
float:left;
width:30%;
margin:0px50px;
}
#left#logo-bg{
margin:10%10%;
width:80%;
position:relative;
}
#left#logo{
width:12%;
position:absolute;
left:14%;
top:190px;
}
#leftp{
margin-bottom:-20px;
}
#leftp,h4{
text-align:center;
color:red;
}
#right{
float:left;
width:60%;
margin:15%0px;
}
#righth2{
text-align:center;
}
#rightfieldset{
text-align:center;
border-left:none;
border-right:none;
border-bottom:none;
}
#rightfieldsetlegend{
padding:0px20px;
}
#fen{
width:100%;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
-webkit-column-gap:1em;
-moz-column-gap:1em;
-o-column-gap:1em;
-ms-column-gap:1em;
column-gap:1em;
}
#fenimg{
width:100%;
border-radius:10px10px10px10px;
}
#fenp,h4{
text-align:center;
color:red;
}
#fenp{
margin-bottom:-20px;
}
#dip{
text-align:center;
}
#dipspan{
color:red;
}
}
</style>
</head>
<body>
<header>
<imgsrc="img/rag.png"/>
</header>
<asideid="left">
<imgsrc="img/logo-bg.png"id="logo-bg"/>
<imgsrc="img/logo.png"id="logo"/>
<hr/>
<p>THE</p>
<h4>WEBLOCUE</h4>
<hr/>
<p>THE</p>
<h4>WEBLOCUE</h4>
<hr/>
<p>THE</p>
<h4>WEBLOCUE</h4>
<hr/>
</aside>
<articleid="right">
<h2>“Givemeproblems,givemework.”</h2>
<p>Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse.</p>
<p>Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse,Intheyear1878ItookdogreeofDoctorofMediclineoftheUnibertiveoftheLondonandproblemstoNetbodytogothroughthecourse.</p>
<fieldset><legend>victors</legend></fieldset>
<pid="fen">
<imgsrc="img/1.jpg"/>
<p>SETCOME</p>
<h4>HOLEMES</h4>
<imgsrc="img/2.jpg"/>
<p>SETCOME</p>
<h4>HOLEMES</h4>
<imgsrc="img/3.jpg"/>
<p>SETCOME</p>
<h4>HOLEMES</h4>
<imgsrc="img/4.jpg"/>
<p>SETCOME</p>
<h4>HOLEMES</h4>
<imgsrc="img/5.jpg"/>
<p>SETCOME</p>
<h4>HOLEMES</h4>
<imgsrc="img/6.jpg"/>
<p>SETCOME</p>
<h4>HOLEMES</h4>
</p>
<fieldset><legend>*</legend></fieldset>
<pid="di">
<p>Intheyear1878Itook<span>Suingtable</span>dogreeofDoctor</p>
<p>Whattheyear2016Itookdogree<span>Ruingroid</span>ofDoctor</p>
</p>
</article>
</body>
</html>

做的不够严谨，因为时间问题，请见谅。

以上这篇响应式布局的简单案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

原文地址：http://www.cnblogs.com/duzheqiang/p/5666465.html

查看更多文章>>