24div
網頁設計很常用<div>當作一個容器。
CSS程式碼：
<style>
body {
font-family: 微軟正黑體; /* 字型 */
}
.head {
background: linear-gradient(to right, yellow, green);
width: 1025px;
height: 60px;
padding: 20px; /* 留白 */
border: 2px rgb(150, 138, 150) solid; /* 邊框 */
margin: 5px 10px;
text-align: center;
line-height: 40px;
}
#books {
background-color: skyblue; /* 背景色 */
padding: 20px; /* 留白 */
border: 2px skyblue; /* 邊框 */
width: 300px;
height: 320px;
margin: 5px 10px; /* 邊界 */
float: left; /* 靠左漂浮 */
}
#google {
background-color: pink; /* 背景色 */
padding: 20px; /* 留白 */
border: 2px pink solid; /* 邊框 */
width: 300px;
height: 320px;
margin: 5px 10px; /* 邊界 */
float: left; /* 靠左漂浮 */
}
#tsvs {
background-color: tomato; /* 背景色 */
padding: 20px; /* 留白 */
border: 2px tomato solid; /* 邊框 */
width: 300px;
height: 320px;
margin: 5px 10px; /* 邊界 */
float: left; /* 靠左漂浮 */
}
.tail {
....這裡留給你寫!!!
clear : both; /* 清除之前float屬性的浮動 */
}
</style>
</head>
HTML程式碼：
<body>
<div class="head">
<h1>我最喜歡的三個網站</h1>
</div>
<div id="books">
<p>博客來</p>
</div>
<div id="google">
<p>Google</p>
</div>
<div id="tsvs">
<p>淡水商工</p>
</div>
<div class="tail">
<h3>張小宜版權所有</h3>
</div>
</body>