用css網(wǎng)站布局之十步實錄!(四)_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
第四步:網(wǎng)頁布局與div浮動等
1.浮動:首先讓邊框浮動到主要內(nèi)容的右邊。用css控制浮動。
表現(xiàn)如下:
2.往主要內(nèi)容的盒子中寫入一些文字。在html文件中寫入:
但是你可以看到主要內(nèi)容的盒子占據(jù)了整個page-container的寬度,我們需要將#content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。
css代碼如下:
同時往邊框里寫入一些文字。在html文件中寫入:
表現(xiàn)如下:
這也不是我們想要的,網(wǎng)站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動,由于是浮動,所以可以理解為它位于整個盒子之上的另一層。因此,底框和內(nèi)容盒子對齊了。
因此我們往css中寫入:
表現(xiàn)如下:
1.浮動:首先讓邊框浮動到主要內(nèi)容的右邊。用css控制浮動。
示例代碼 [m.dounai2.com]
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
float: right;
width: 280px;
background: darkgreen;
}
表現(xiàn)如下:
2.往主要內(nèi)容的盒子中寫入一些文字。在html文件中寫入:
示例代碼 [m.dounai2.com]
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
但是你可以看到主要內(nèi)容的盒子占據(jù)了整個page-container的寬度,我們需要將#content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。
css代碼如下:
示例代碼 [m.dounai2.com]
#content {
margin-right: 280px;
background: green;
}
margin-right: 280px;
background: green;
}
同時往邊框里寫入一些文字。在html文件中寫入:
示例代碼 [m.dounai2.com]
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
表現(xiàn)如下:
這也不是我們想要的,網(wǎng)站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動,由于是浮動,所以可以理解為它位于整個盒子之上的另一層。因此,底框和內(nèi)容盒子對齊了。
因此我們往css中寫入:
示例代碼 [m.dounai2.com]
#footer {
clear: both;
background: orange;
height: 66px;
}
clear: both;
background: orange;
height: 66px;
}
表現(xiàn)如下:
相關(guān)DIV+CSS實例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例:很實用的圖文混排CSS列表-富有語義
- DivCSS實例:CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實例-用css網(wǎng)站布局之十步實錄!(四)。