怎么用ccs制作一個簡單的html布局

發(fā)布時間：2021-09-05 10:38:04 來源：億速云閱讀：377 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)怎么用ccs制作一個簡單的html布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1、創(chuàng)建html

Html編輯代碼示例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

2、定義一個包含文本的div大標(biāo)題同時使用class屬性向樣式。

<div class="title">頂部</div>
<div class="footer">底部</div>

3、在style之間，對body進行樣式初始化，添加設(shè)置外邊距margin為0，內(nèi)邊距padding為0，然后使用設(shè)置文字居中text-align。

<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
</style>

4、在style之間，對div進行樣式添加設(shè)置所有的div高度為200px，內(nèi)容的顏色為紅色。

div{height: 200px;color: red;}

5、在style之間，對title進行樣式使用div創(chuàng)建網(wǎng)頁的頭部，使用margin:0 auto設(shè)置div居中，同時設(shè)置其寬度為800px，背景顏色為灰色。

 .title{margin: 0 auto; width: 800px; background-color: #ccc}

6、在style之間，使用div創(chuàng)建網(wǎng)頁的底部，使用clear:both清除上面div的浮動，避免影響底部的布局。接著使用margin:0 auto設(shè)置div居中，又使用設(shè)置其寬度為800px，最后背景顏色為#000fff。

.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}

7、在瀏覽器打開文件，查看實現(xiàn)的效果。

怎么用ccs制作一個簡單的html布局

完整代碼

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
</head>
<body>
<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
 div{height: 200px;color: red;}
 .title{margin: 0 auto; width: 800px; background-color: #ccc}
 
 .footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
</style>
<div class="title">頂部</div>

<div class="footer">底部</div>
</body>
</html>

關(guān)于“怎么用ccs制作一個簡單的html布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

怎么用ccs制作一個簡單的html布局

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽