«
列表标签
MitSeek 发布于
阅读：37
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.ul1{
list-style: none;/* 无序标签
circle空心圆
disc实心圆
square实心方块*/
}
.ul2{
list-style: decimal;/* 数字序号 */
}
.ul3{
list-style: none;
position: absolute;/* 绝对定位 */
left: -30px;/* 向左移动30 */
top: 320px;/* 向下移动320 */
}
.ul3 li{
background: yellow;
border: 1px solid blue;
}
div{
width: 70px;
border-bottom:3px solid black;/* 下边框属性 */
}
.ul4{
/* text-align: center; */
list-style: none;
}
.ul4 li{
position: relative; /* 相对定位 */
left: 300px;
}
.ul4 h2{
position: relative; /* 相对定位 */
left: 300px;
}
.ul4 li span{
display: block;/* 设置块元素 */
position: absolute;
left: -50px;
width: 16px;
height: 16px;
background: #ff3bdd;
border-radius: 10px;
}
</style>
</head>
<body>
<ul class="ul1">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>计算机</li>
</ul>
<ul class="ul2">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>计算机</li>
</ul>
<!-- 写一个菜单 -->
<div>mitseek</div>
<ul class="ul3">
<li>首页</li>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>PHP</li>
<li>关于我</li>
</ul>
<ul class="ul4">
<h2>MITSEEK</h2>
<li><span></span>HTML</li>
<li><span></span>CSS</li>
<li><span></span>JAVASCRIPT</li>
<li><span></span>PHP</li>
<li><span></span>关于我</li>
</ul>
</body>
</html>
HTML