css如何给列表加边框

时间:2022-12-06 01:56

在css中给列表添加边框的方法:1.创建ul li标签列表;2.去除标签样式,并设置宽高;3.使用border属性添加列表边框;

css如何给列表加边框

在css中给列表添加边框的方法

1.首先,在页面中创建一个ul li标签列表;

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<style></style>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</body>

</html>

2.p标签创建好后,在css中去掉li标签的样式,并设置宽度和高度;

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<style>

ulli{

list-style:none;

width:60px;

height:50px;

float:left;

}

</style>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</body>

</html>

3.标签样式设置好后,使用border属性即可为列表设置边框;

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<style>

ulli{

list-style:none;

width:60px;

height:50px;

float:left;

border:1pxsolid#000;

}

</style>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</body>

</html>

效果:

css如何给列表加边框

标签:
随便看看
本类推荐
本类排行
热门标签

我国国家通讯社行不行啊细狗新年贺词祝福语2023年祝福语新年新年贺词新年贺词祝福语居家抗病毒小药箱除夕高速免费吗2022年除夕高速免费吗春联春联句子大全春联句子大全七字年夜饭十二道菜年夜饭十二道菜单年夜饭吃什么年夜饭吃什么菜吃年夜饭的寓意年夜饭黑芝麻菊花茶晒菊花茶腌腊肉送妈妈生日礼物汉白玉送闺蜜水钻送女人礼物爸爸生日送礼物送老公