青椒rose_0
2016-03-14 10:56
如何把蔬菜水果用一个大框圈起来,水果蔬菜前面还出现无序排列符号(小圆点)
直接在style里定义food的格式就好了,去掉后面的>li, 就把蔬菜水果全部圈到一起了,代码如下
.food{
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
<style type="text/css">
.food{
border:1px solid blue;
}
</style>
<ul class="food">
<li>水果
<ul>
<li>苹果</li>
<li>梨</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>白菜</li>
<li>白菜</li>
</ul>
</li>
</ul>
<style type="text/css">
.food>li{
border: 2px solid red;
}
</style>
<style type="text/css">
.first span{ color:red;}
.food>li{border:1px solid red;}/* 添加边框样式(粗细为1px,颜色为红色的实线)*/
</style>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
<style type="text/css">
.first span{color:red;}
.food{
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
</style>
初识HTML(5)+CSS(3)
1230388 学习 · 19084 问题
相似问题