文章目录
- 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样式
加css样式
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)