中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：CSS3 :enabled 選擇器 下一篇：無

HTML/CSS 設(shè)計(jì)一個(gè)網(wǎng)頁(yè)

接下來我們通過 HTML/CSS 來創(chuàng)建一個(gè)簡(jiǎn)單的響應(yīng)式網(wǎng)頁(yè)。

CSS 代碼

* { box-sizing: border-box; } /* body 樣式 */ body { font-family: Arial; margin: 0; } /* 標(biāo)題 */ .header { padding: 80px; text-align: center; background: #1abc9c; color: white; } /* 標(biāo)題字體加大 */ .header h1 { font-size: 40px; } /* 導(dǎo)航 */ .navbar { overflow: hidden; background-color: #333; } /* 導(dǎo)航欄樣式 */ .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } /* 右側(cè)鏈接*/ .navbar a.right { float: right; } /* 鼠標(biāo)移動(dòng)到鏈接的顏色 */ .navbar a:hover { background-color: #ddd; color: black; } /* 列容器 */ .row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; } /* 創(chuàng)建兩個(gè)列 */ /* 邊欄 */ .side { -ms-flex: 30%; /* IE10 */ flex: 30%; background-color: #f1f1f1; padding: 20px; } /* 主要的內(nèi)容區(qū)域 */ .main { -ms-flex: 70%; /* IE10 */ flex: 70%; background-color: white; padding: 20px; } /* 測(cè)試圖片 */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* 底部 */ .footer { padding: 20px; text-align: center; background: #ddd; } /* 響應(yīng)式布局 - 在屏幕設(shè)備寬度尺寸小于 700px 時(shí), 讓兩欄上下堆疊顯示 */ @media screen and (max-width: 700px) { .row { flex-direction: column; } } /* 響應(yīng)式布局 - 在屏幕設(shè)備寬度尺寸小于 400px 時(shí), 讓導(dǎo)航欄目上下堆疊顯示 */ @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } }

運(yùn)行代碼 ?

HTML 代碼

<div class="header"> <h1>小白教程網(wǎng)頁(yè)測(cè)試實(shí)例</h1> <p>創(chuàng)建一個(gè)頁(yè)面。</p> </div> <div class="navbar"> <a href="#">鏈接</a> <a href="#">鏈接</a> <a href="#">鏈接</a> <a href="#" class="right">鏈接</a> </div> <div class="row"> <div class="side"> <h2>關(guān)于我</h2> <h5>我的照片:</h5> <div class="fakeimg" style="height:200px;">這邊插入圖像</div> <p>關(guān)于我的介紹..</p> <h3>更多內(nèi)容</h3> <p>我的更多內(nèi)容</p> <div class="fakeimg" style="height:60px;">這邊插入圖像</div><br> <div class="fakeimg" style="height:60px;">這邊插入圖像</div><br> <div class="fakeimg" style="height:60px;">這邊插入圖像</div> </div> <div class="main"> <h2>標(biāo)題</h2> <h5>副標(biāo)題</h5> <div class="fakeimg" style="height:200px;">圖像</div> <p>一些文本..</p> <p>小白教程，行動(dòng)比思想更具有力量，加油追夢(mèng)人！??！小白教程，行動(dòng)比思想更具有力量，加油追夢(mèng)人?。?！小白教程，行動(dòng)比思想更具有力量，加油追夢(mèng)人！??！</p> <br> <h2>標(biāo)題</h2> <h5>副標(biāo)題</h5> <div class="fakeimg" style="height:200px;">圖像</div> <p>一些文本..</p> <p>小白教程，行動(dòng)比思想更具有力量，加油追夢(mèng)人！??！小白教程，行動(dòng)比思想更具有力量，加油追夢(mèng)人！??！小白教程，行動(dòng)比思想更具有力量，加油追夢(mèng)人?。?！</p> </div> </div> <div class="footer"> <h2>底部?jī)?nèi)容</h2> </div>

運(yùn)行代碼 ?
上一篇：CSS3 :enabled 選擇器 下一篇：無