UL嵌套使用实例——CSS定位

最新推荐文章于 2024-04-20 14:50:22 发布

qingYun1029

最新推荐文章于 2024-04-20 14:50:22 发布

阅读量1.1w

点赞数

分类专栏： HTML/CSS 文章标签： css class xhtml border html 文档

本文链接：https://blog.youkuaiyun.com/qingYun1029/article/details/6098578

版权

HTML/CSS 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个具体的HTML和CSS实例，展示了如何使用CSS进行精确的页面布局，包括外部和内部列表的样式设置，以及如何通过定位属性实现元素的相对定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
 *{
 font-family: "Courier New", Courier, monospace;
 font-size: 12px;
 }

 /*设置外面项目列表的风格*/
 #price{
 list-style:none;
 }

 /*设置嵌套在里面的项目列表的风格*/
 #price li ul{
 margin:0;
 padding:0;
 border:0;
 list-style-type:none;
 }

 #price li{
 position:relative;
 }

 /*设置项目列表头部的公共样式(字体)*/
 #price li span.caption{
 font-size:16px;
 font-weight:bold;
 }

 #price li span.left{
 left:0px;
 }

 #price li span.right{
 position:absolute;
 left:120px;
 top:0;
 }


</style>
</head>

<body>
<ul id="price">
 <li>AAAAAAAAAA
 <ul>
 <li>li_row1_leftl_r_r1</li>
 <li>li_r2_lli_r_row2</li>
 <li>li_row3_leftli_r_r3</li>
 </ul>
 </li>
</ul>
</body>
</html>