62 lines
1.6 KiB
HTML
62 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
*{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.list,.list1{
|
||
list-style: none;
|
||
}
|
||
.list li{
|
||
width: 150px;
|
||
/* height: 70px; */
|
||
background: black;
|
||
color: white;
|
||
font-weight: bold;
|
||
border: 1px solid white;
|
||
text-align: center;
|
||
line-height: 70px;
|
||
}
|
||
.list1 li{
|
||
background: gray;
|
||
margin-left: 70px;
|
||
|
||
}
|
||
.bg{
|
||
background: white!important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!--
|
||
网页三剑客 html(结构) css（样式） js（交互）
|
||
css 层叠样式表
|
||
css 引入
|
||
link 外部样式
|
||
head 内部样式 里写 style标签 从style里面写 css 样式
|
||
行内样式 html标签 写style属性 值是字符串 字符串里面就是css样式
|
||
|
||
选择器 id选择器 类选择器 标签选择器 通配符（*） 属性选择器[]
|
||
优先级 !important > 行内样式 >id选择器 >类选择器 > 标签 > 通配符
|
||
-->
|
||
|
||
<ul class="list">
|
||
<li>家电</li>
|
||
<li class="bg">
|
||
<ul class="list1">
|
||
<li>冰箱</li>
|
||
<li>洗衣机</li>
|
||
<li>空调</li>
|
||
</ul>
|
||
</li>
|
||
<li>洗护</li>
|
||
<li>衣物</li>
|
||
</ul>
|
||
</body>
|
||
</html> |