作業1：HTML5 新增語義化布局标簽
執行個體
html>
html5新增的語義化标簽
initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
this is header
這是小頭
- 搜狐
- 新浪
- 阿裡巴巴
- PHP中文網
秋天的元素
秋雨連綿
台風肆虐
代表一個獨立的、完整的相關内容塊，可獨立于頁面其它内容使用。
例如一篇完整的論壇文章，一篇部落格文章，一個使用者評論等等。
一般來說，article會有标題部分(通常包含在header内)，
有時也會包含footer。
- 使用者管理
- 文章管理
- 産品管理
合肥.安徽.中國
Copyright©2018
運作執行個體 »
點選 "運作執行個體" 按鈕檢視線上執行個體
手寫截圖:
作業2：使用者管理頁面
執行個體
html>
使用者設定
table,th,td{
border:1px solid;
border-collapse: collapse;
padding: 15px;
}
h2{
text-align: center;
}
table{
width: 650px;
text-align: center;
margin: auto;
}
table tr:first-child{
margin-top: 20px;
background-color: bisque;
}
p{
text-align: center;
}
a{
text-decoration-line: none;
}
a:hover{
color: brown;
text-decoration-line: underline;
}
使用者管理
| ID | 使用者名 | 郵箱 | 角色 | 管理 |
|---|---|---|---|---|
| 1 | admin | [email protected] | superman | 編輯 |
| 2 | peter | [email protected] | teacher | 編輯 | 删除 |
| 3 | 小師太 | [email protected] | teacher | 編輯 | 删除> |
| 4 | 豬哥 | [email protected] | boss | 編輯 | 删除 |
首頁
1
2
3
4
...
尾頁
運作執行個體 »
點選 "運作執行個體" 按鈕檢視線上執行個體
本地運作效果圖：
作業3：文檔管理頁面實作
執行個體
html>
Title
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
padding: 10px;
}
table{
margin: auto;
text-align: center;
width: 700px;
}
caption{
font-size: 30px;
font-weight: bolder;
margin-bottom: 20px;
}
tr:first-child{
background-color: lightgreen;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border:1px solid green;
margin-left: 2px;
line-height: 24px;
border-radius: 50%;
box-shadow: 3px 3px gray;
}
p a:first-child{
width: 50px;
border-radius: 5px;
}
p a:last-child{
width: 80px;
border-radius: 5px;
}
a{
text-decoration-line: none;
color: green;
}
a:hover{
color: brown;
text-decoration-line: underline;
}
| 編号 | 作者 | 标題 | 所屬分類 | 操作 |
|---|---|---|---|---|
| 1 | 梁實秋 | 《故宮邊上的容麼麼》 | 遊記 | 編輯|删除 |
| 2 | 梁啟超 | 《少年說》 | 時論 | 編輯|删除 |
| 3 | 朱自清 | 《背影》 | 紀實散文 | 編輯|删除 |
| 4 | 徐秋雨 | 《文化苦旅》 | 散文 | 編輯|删除 |
首頁
2
3
4
…
最後一頁
運作執行個體 »
點選 "運作執行個體" 按鈕檢視線上執行個體
本地運作效果圖：
作業4：分類管理頁面實作
執行個體
html>
分類管理
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
padding: 10px;
}
table{
margin: auto;
text-align: center;
width: 700px;
}
caption{
font-size: 30px;
font-weight: bolder;
margin-bottom: 20px;
}
tr:first-child{
background-color: lightblue;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border:1px solid green;
margin-left: 2px;
line-height: 24px;
border-radius: 50%;
box-shadow: 3px 3px gray;
}
p a:first-child{
width: 50px;
border-radius: 5px;
}
p a:last-child{
width: 80px;
border-radius: 5px;
}
a{
text-decoration-line: none;
color: green;
}
a:hover{
background-color: black;
color: white;
text-decoration-line: underline;
}
#disable{
font-weight: bolder;
color: red;
}
| 編号 | 類别 | 層級 | 是否啟用 | 操作 |
|---|---|---|---|---|
| 1 | 手機架 | 3級 | 生*産 | 編輯|删除 |
| 2 | 筆記本電腦 | 1級 | 預備 | 編輯|删除 |
| 3 | 列印機 | 2級 | 啟用 | 編輯|删除 |
| 4 | 顯示器 | 頂級 | 禁用 | 編輯|删除 |
首頁
2
3
4
…
最後一頁
運作執行個體 »
點選 "運作執行個體" 按鈕檢視線上執行個體
本地運作效果圖：
作業5：産品管理頁面實作
執行個體
html>
産品管理
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
padding: 10px;
}
table{
margin: auto;
text-align: center;
width: 700px;
}
caption{
font-size: 30px;
font-weight: bolder;
margin-bottom: 20px;
}
tr:first-child{
background-color: lightgreen;
}
table tr td img{
width: 80px;
height: 60px;
border-radius: 10px;
box-shadow: 2px 2px gray;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border:1px solid green;
margin-left: 2px;
line-height: 24px;
border-radius: 50%;
box-shadow: 3px 3px gray;
}
p a:first-child{
width: 50px;
border-radius: 5px;
}
p a:last-child{
width: 80px;
border-radius: 5px;
}
a{
text-decoration-line: none;
color: green;
}
a:hover{
color: brown;
text-decoration-line: underline;
}
| 編号 | 圖檔 | 型号 | 價格 | 操作 |
|---|---|---|---|---|
| 1 | iPhoneX | 7888 | 編輯|删除 | |
| 2 | P20Pro | 8888 | 編輯|删除 | |
| 3 | 小米8 | 5999 | 編輯|删除 | |
| 4 | R17蘭博基尼 | 10888 | 編輯|删除 |
首頁
2
3
4
…
最後一頁
運作執行個體 »
點選 "運作執行個體" 按鈕檢視線上執行個體
本地效果圖：
總結：
1：HTML5 新增的語義化标簽，對于布局帶來了便利，對搜尋引擎更友好，利于人工智能的分析
2：HTML 和CSS 學習告一段路，隻有勤練習标簽才不會忘記，才會孰能生巧
3：遇到的一個問題：價格欄的數字可以通過CSS直接轉換成貨币樣式嗎？？？