第六章
程序员文章站
2022-05-23 09:58:29
...
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心开班信息</title>
<style>
div,h1,ul,li,a{
padding: 0px;
margin: 0px;
}
div{
width: 250px;
background: linear-gradient(to bottom,#5bc1f9,white,white,white);
margin: 0px auto;
border-radius: 10px;
border:grey solid 1px;
}
h1{
background: url("../图片/bg.gif") 10px 5px no-repeat;
font-size: 12px;
line-height: 40px;
border-bottom: white solid 1px;
padding-left: 50px;
color: white;
}
.li1{
padding-left: 30px;
background: url("../图片/dotBg.gif") 10px -1px no-repeat;
list-style-type: none;
line-height: 30px;
font-size: 17px;
}
ul li:nth-of-type(2){
background-image: url("../图片/dotBg.gif");
background-position-x:10px;
background-repeat: no-repeat;
list-style-type: none;
padding-left: 30px;
line-height: 30px;
font-size: 17px;
}
ul li:nth-of-type(3){
background-image: url("../图片/dotBg.gif");
background-position-x:10px;
background-repeat: no-repeat;
list-style-type: none;
padding-left: 30px;
line-height: 30px;
font-size: 17px;
}
ul li:nth-of-type(4){
background-image: url("../图片/dotBg.gif");
background-position-x:10px;
background-repeat: no-repeat;
list-style-type: none;
padding-left: 30px;
line-height: 30px;
font-size: 17px;
}
ul li:nth-of-type(5){
background-image: url("../图片/dotBg.gif");
background-position-x:10px;
background-repeat: no-repeat;
list-style-type: none;
padding-left: 30px;
line-height: 30px;
font-size: 17px;
}
ul li:nth-of-type(6){
background-image: url("../图片/dotBg.gif");
background-position-x:10px;
background-repeat: no-repeat;
list-style-type: none;
padding-left: 30px;
line-height: 30px;
font-size: 17px;
}
ul li:nth-of-type(7){
background-image: url("../图片/dotBg.gif");
background-position-x:10px;
background-repeat: no-repeat;
list-style-type: none;
padding-left: 30px;
line-height: 30px;
font-size: 17px;
}
a{
text-decoration: none;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<div>
<h1>中心开班信息</h1>
<ul>
<li class="li1"><a href="#">8月12日：学历+技能班</a></li>
<li><a href="#">8月16日：高考特招班</a></li>
<li><a href="#">8月23日：Java精英班</a></li>
<li><a href="#">8月31日：学士后强化班</a></li>
<li><a href="#">9月5日：大学生就业班</a></li>
<li><a href="#">9月9日：企业定向委培班</a></li>
<li><a href="#">9月16日：网络营销强化班</a></li>
</ul>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品分类列表页</title>
<style>
div,ul,li{
margin: 0px;
padding: 0px;
}
div{
width: 300px;
border: orange solid 2px;
border-radius: 20px;
}
li{
padding: 10px 60px;
border-bottom: grey dashed 1px;
list-style-type: none;
line-height: 41px;
font-weight: bold;
}
ul li:nth-of-type(1){
background: url("../图片/icon_01.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(2){
background: url("../图片/icon_02.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(3){
background: url("../图片/icon_03.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(4){
background: url("../图片/icon_04.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(5){
background: url("../图片/icon_05.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(6){
background: url("../图片/icon_06.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(7){
background: url("../图片/icon_07.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(8){
background: url("../图片/icon_08.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(9){
background: url("../图片/icon_09.jpg") 10px 5px no-repeat;
}
ul li:nth-of-type(10){
background: url("../图片/icon_10.jpg") 10px 5px no-repeat;
}
a{
text-decoration: none;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">酒水、饮料</a></li>
<li><a href="#">进口零食</a></li>
<li><a href="#">休闲零食</a></li>
<li><a href="#">地方特产</a></li>
<li><a href="#">保健、冲调</a></li>
<li><a href="#">粮油、生鲜</a></li>
<li><a href="#">美容洗护</a></li>
<li><a href="#">清洁洗涤</a></li>
<li><a href="#">母婴、纸品</a></li>
<li><a href="#">家居百货</a></li>
</ul>
</div>
</body>
</html>
下一篇： Java实现二分查找（折半查找）
推荐阅读
-
CPrimer Plus 学习（第六章）
-
C Primer Plus 第六章——C控制语句：循环
-
《MicrosoftSqlserver2008Internals》读书笔记--第六章Indexes:I
-
第六章 键盘（SYSMETS4)
-
实战SpringCloud响应式微服务系列教程（第六章）
-
.NET Core IdentityServer4实战 第六章-Consent授权页
-
Deep Learning with Pytorch 中文简明笔记 第六章 Using a neural network to fit the data
-
第六章 最短路径
-
[书籍翻译] 《JavaScript并发编程》第六章 实用的并发
-
第六章 php目录与文件操作