溫馨提示×

css如何給列表加邊框

css
養魚的貓咪
2771
2021-03-26 11:14:39
欄目: 編程語言

在css中給列表添加邊框的方法:1.創建ul li標簽列表;2.去除標簽樣式,并設置寬高;3.使用border屬性添加列表邊框;

css如何給列表加邊框

在css中給列表添加邊框的方法

1.首先,在頁面中創建一個ul li標簽列表;

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <style></style>

</head>

<body>

<ul>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

</ul>

</body>

</body>

</html>

2.p標簽創建好后,在css中去掉li標簽的樣式,并設置寬度和高度;

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <style>

    ul li{

     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屬性即可為列表設置邊框;

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <style>

    ul li{

     list-style: none; 

     width:60px;

     height:50px;

     float:left;

     border: 1px solid #000;

   }

  </style>

</head>

<body>

<ul>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

</ul>

</body>

</body>

</html>

效果:

css如何給列表加邊框

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女