文章目錄
- 1、網頁執行個體
- 1.1 代碼
- 1.2 測試效果
1、網頁執行個體
1.1 代碼
css樣式
/* 清除頁面樣式 */
*{
margin:0;
padding: 0;
}
/* 統一頁面的樣式 */
body{
font:12px/1 宋體;
}
/* 設定outer大小 */
.outer{
width: 300px;
/* height: 500px;
background-color: #bfa; */
margin:50px auto;
}
/* 設定title的樣式 */
.title{
/* 設定上邊框 */
border-top:2px #019e8b solid;
/* 設定盒子的高度 */
height: 36px;
/* 設定背景樣式 */
background-color: #f5f5f5;
/* 設定title的行高*/
line-height: 36px;
/* 設定title的内邊距 */
padding: 0px 22px 0px 16px;
}
.title a{
text-decoration: none;
float: right;
color: red;
}
.title h3{
font:16px/36px "微軟雅黑";
}
/* 設定内容 */
.content{
border:1px solid #deddd9;
/* 設定内邊距 */
padding: 0px 28px 0px 20px;
}
.content h3{
margin-top: 14px;
margin-bottom: 16px;
}
/* 設定内容中的超連結 */
.content a{
color: black;
/* 去除超連結下劃線 */
text-decoration: none;
/* 設定字型大小 */
font-size:12px
}
/* 為超連結添加一個hover僞類 */
.content a:hover{
color: red;
}
/* 設定右側的a的樣式 */
.content .right{
/* 設定向右浮動 */
float: right;
}
/* 設定url的樣式 */
.content ul{
/* 去除項目符号 */
list-style: none;
/* 為ul設定一個下邊框 */
border-bottom: 1px dashed #deddd9;
}
/* 取消最後一個ul的邊框 */
.content .no-border{
border:none;
}
/* 設定li的樣式 */
.content li{
margin-bottom: 15px;
}
.content .red{
color: red;
} html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網頁1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 建立一個外層div，容納整個内容 -->
<div class="outer">
<!-- 開班資訊的頭部 -->
<div class="title">
<a href="#">java練習營</a>
<h3>近期開班</h3>
</div>
<!-- 開班資訊的主要内容 -->
<div class="content">
<h3><a href="#">JavaEE+雲計算-全程就業班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">預約報名</span></a>
<a href="#">開班時間：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">無座，名額飽滿</span></a>
<a href="#">開班時間：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >開班盛況</span></a>
<a href="#">開班時間：<span>2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >開班盛況</span></a>
<a href="#">開班時間：<span >2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >開班盛況</span></a>
<a href="#">開班時間：<span>2020-4-30</span></a>
</li>
</ul>
<h3><a href="#">Android+人工智能+全程就業班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">預約報名</span></a>
<a href="#">開班時間：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >無座，名額飽滿</span></a>
<a href="#">開班時間：<span >2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時間：<span>2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時間：<span>2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時間：<span>2020-4-30</span></a>
</li>
</ul>
<h3><a href="#">前端+HTML5-全程就業班</a></h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red">預約報名</span></a>
<a href="#">開班時間：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>開班盛況</span></a>
<a href="#">開班時間：<span>2020-4-30</span></a>
</li>
</ul>
</div>
</div>
</body>
</html> 1.2 測試效果
不加css樣式
![用 Canvas 編織璀璨星空圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)