您好,登錄后才能下訂單哦!
這篇文章主要講解了“html中怎么寫響應(yīng)式布局代碼”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“html中怎么寫響應(yīng)式布局代碼”吧!
1.直接在CSS文件中使用:
@media 類型 and (條件1) and (條件二){
css樣式
}
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}
2.使用@import導(dǎo)入
@import url("css/moxie.css") all and (max-width:980px);
3.也是最常用的方法--直接使用link連接,media屬性用于設(shè)置查詢方法
下面是一個(gè)簡單的響應(yīng)式的布局HTMl代碼:
響應(yīng)式
下面是CSS樣式:
*{
margin:0;
padding:0;
text-align:center;
color:yellow;
}
.header{
width:100%;
height:100px;
background:#ccc;
line-height:100px;
}
.main{
background:green;
width:100%;
}
.clearfix:after{
display:block;
height:0;
content:"";
visibility:hidden;
clear:both;
}
.left,.center,.right{
float:left;
}
.left{
width:20%;
background:#112993;
height:300px;
font-size:50px;
line-height:300px;
}
.center{
width:60%;
background:#ff0;
height:400px;
color:#fff;
font-size:50px;
line-height:400px;
}
.right{
width:20%;
background:#f0f;
height:300px;
font-size:50px;
line-height:300px;
}
.footer{
width:100%;
height:50px;
background:#000;
line-height:50px;
}
樣式代碼
.right{
float:none;
width:100%;
background:#f0f;
clear:both;
}
.left{
width:30%;
}
.center{
width:70%;
}
.main{
height:800px;
}
樣式代碼
.left,.center,.right{
float:none;
width:100%;
}
當(dāng)窗口大于1024px 時(shí),指揮被壓縮,并不會發(fā)生其他變化:
當(dāng)窗口小于1024px,大于720px的時(shí)候,右側(cè)欄取消浮動,在下邊顯示:
當(dāng)窗口小于720px的時(shí)候,左中右三欄,全都取消浮動,寬度100%:
感謝各位的閱讀,以上就是“html中怎么寫響應(yīng)式布局代碼”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對html中怎么寫響應(yīng)式布局代碼這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。