html中的css中怎么设置一个矩形边框，然后在里面添加文字？如图：

html-css06

html中的css中怎么设置一个矩形边框，然后在里面添加文字？如图：,第1张

设置矩形边框 ：border : 1px solid #000000

添加文字：

<ul>

<li>九寨沟</li>

<li>黄山风景区</li>

。。。。。

。。。。。

。。。。。

</ul>

根据实际写N对li即可

希望可以帮到你～

css中添加边框的代码为

border: width style color /*分别设置边框粗细、样式、颜色*/

示例如下：

创建Html元素：一个包含文章内容的div

<div class="post">这是示例的文章。</div>

设置css样式

div.post{

width:400pxheight:100px

padding:10px

border:2px solid #ebbccb /*设置边框为2px粗，实线，#ebbccb色*/

}

观察显示效果

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>百度知道郭凯旗</title>

<style>

li a{display:block width:100px height:20px border:1px solid red}

li span{display:inline-block width:80px height:20px border:1px solid blue}

li{display:inline-block width:80px height:20px border:1px solid black}

</style>

</head>

<body>

    <div>

       <ul>

          <li><a href="http://lovepy.com">这里是文字</a></li>

          <li><a href="http://lovepy.com">这里是文字</a></li>

          <li><a href="http://lovepy.com">这里是文字</a></li>

       </ul>

       <!--第一种  end-->

       <ul>

          <li><span>这里是文字</span></li>

          <li><span>这里是文字</span></li>

          <li><span>这里是文字</span></li>

       </ul>

        <!--第二种  end-->

       <ul>

          <li>这里是文字</li>

          <li>这里是文字</li>

          <li>这里是文字</li>

       </ul>

        <!--第三种  end-->

     </div>

</body>

</html>

这三种都能实现，但不要同时用。