標題:
CSS 清單選項 (一) 練習
[打印本頁]
作者:
陳育霖
時間:
2023-8-12 10:04
標題:
CSS 清單選項 (一) 練習
請依下圖完成網頁設計。
字體為:Arial,顏色為:#ff5733、#f8f8f8、#1f7acf、#f0f0f0、#333、#444、#555、#fff,字體大小為:14、16、18、24、36px
[attach]16210[/attach]
本帖隱藏的內容需要回復才可以瀏覽
作者:
蔡幸融
時間:
2023-8-12 15:17
<!DOCTYPE html>
<html>
<head>
<style>
body main{
font-family: Airal;
background-color: #f0f0f0;
text-decoration: overline;
text-decoration-color: red;
}
nav {
text-align: center;
background-color: #444;
font-size: 18px;
line-height: 2;
}
nav a {
color: #fff;
}
h1 {
font-weight: 700;
color: #1f7acf;
}
.title {
text-align: center;
color: #fff;
background-color: #333;
font-size: 24px;
}
button {
color: #fff;
background-color: #1f7acf;
font-size: 18px;
}
ul{
list-style-type: square ;
}
</style>
</head>
<body>
<div class="title">歡迎來到日常簡單網站</div>
<nav>
<a href="">首頁</a>
<a href="">關於我們</a>
<a href="">產品</a>
<a href="">聯絡我們</a>
</nav>
<main>
<h1>歡迎光臨我們的網站</h1>
<p>我們提供優質的產品和服務,歡迎隨時與我們聯絡。</p>
<img src="" alt="產品圖片">
<p>我們的產品是高品質的,專注於提供最佳的用戶體驗</p>
<p>
請瀏覽我們的
<a href="">產品頁面</a>
以獲取更多資訊
</p>
<ul>
<li>創意設計</li>
<li>專業團隊</li>
<li>客製化解決方案</li>
</ul>
<ol>
<li>優質材料</li>
<li>精湛工藝</li>
<li>全球運送</li>
</ol>
<button>了解更多</button>
</main>
</body>
</html>
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/)
Powered by Discuz! 7.2