標題:
Box Model 設計-邊框練習(二)
[打印本頁]
作者:
陳育霖
時間:
2023-8-29 03:03
標題:
Box Model 設計-邊框練習(二)
請依下圖完成網頁設計。
字體為: Arial、sans-serif,顏色為:#ccc、#f9f9f9、#f4f4f4、#e74c3c
[attach]16362[/attach]
本帖隱藏的內容需要回復才可以瀏覽
作者:
蔡幸融
時間:
2023-8-29 17:17
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f4f4f4;
}
.box {
background-color: #fff;
margin: 2%;
padding: 5px 25px;
width: 240px;
height: 210px;
border: 2px solid #ccc;
border-radius: 10px 10px;
font-family: Arial, sans-serif;
}
h2{
font-size: 30px;
}
p{
font-size: 22px;
}
.boxcontainer {
display: inline;
}
</style>
</head>
<body>
<div class="boxcontainer">
<div class="box">
<h2>積點漢堡</h2>
<p>100%純牛肉,新鮮蔬菜</p>
<p style="font-weight: bold; color: #e74c3c;">$8.99</p>
</div>
<div class="box">
<h2>積點漢堡</h2>
<p>100%純牛肉,新鮮蔬菜</p>
<p style="font-weight: bold; color: #e74c3c;">$8.99</p>
</div>
<div class="box">
<h2>積點漢堡</h2>
<p>100%純牛肉,新鮮蔬菜</p>
<p style="font-weight: bold; color: #e74c3c;">$8.99</p>
</div>
<div class="box">
<h2>積點漢堡</h2>
<p>100%純牛肉,新鮮蔬菜</p>
<p style="font-weight: bold; color: #e74c3c;">$8.99</p>
</div>
</div>
</body>
</html>
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/)
Powered by Discuz! 7.2