li的简单应用
li的简单应用
发布时间:2016-12-29 来源:查字典编辑
摘要:作者:eoe虽然自己天天写CSS~~可是来了原创文章这里~~不知道要写什么~~今天就先写个LI的简单应用~~以后慢慢加好了这是一个普通的LI...

作者:eoe

虽然自己天天写CSS~~

可是来了原创文章这里~~不知道要写什么~~

今天就先写个LI的简单应用~~以后慢慢加好了

这是一个普通的LI

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>li的简单应用</title>

</head>

<body>

<divid="test">

<ul>

<li>测试列表的

</li>

<li>测试列表的

</li>

<li>测试列表的

</li>

<li>测试列表的

</li>

</ul>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行

加了点CSS样式定义可以这样

引用:

*{margin:0;padding:0;}习惯性把所有的元素的内补丁外补丁定义为0

0可以没有单位~~理论上是要单位的~不过0px0pt0em都是0所以~懒了~~

#testulli是包含选择符

定义ID为test里面的ul里的li

margin:~在基本所有的浏览器解析都是一样~

这里之所有要写两个是因为~

在li里面有我用到border,IE5.x对border的解析与其他浏览器不一样

margin/**/:这样的话~IE5.x是不认识的~~

当然还有其他的写法如:

voice-family:""}"";voice-family:inherit;等~

可参考http://bbs.51js.com/viewthread.php?tid=50475&fpage=1

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>li的简单应用</title>

<styletype="text/css">

*{margin:0;padding:0;}

#test

{

width:300px;

margin:5px;

}

#testulli

{

margin:3px;/*forIE5.x*/

margin/**/:1px;

list-style-type:none;

font:normalnormalnormalಌpx/2emhelvetica,Arial,verdana;

border:1px#004080solid;

background:#fefefeurl('http://bbs.51js.com/images/smilies/icon1.gif')no-repeatleftcenter;

padding-left:20px;

}

</style>

</head>

<body>

<divid="test">

<ul>

<li>测试列表的

</li>

<li>测试列表的

</li>

<li>测试列表的

</li>

<li>测试列表的

</li>

</ul>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行

再加上类如日期之类的内容

引用:

span定义为float:right他会跟在后面

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>li的简单应用</title>

<styletype="text/css">

*{margin:0;padding:0;}

#test

{

width:300px;

margin:5px;

}

#testulli

{

margin:3px;/*forIE5.x*/

margin/**/:1px;

list-style-type:none;

font:normalnormalnormalಌpx/2emhelvetica,Arial,verdana;

border:1px#004080solid;

background:#fefefeurl('http://bbs.51js.com/images/smilies/icon1.gif')no-repeatleftcenter;

padding-left:20px;

}

#testullispan

{

margin:0px5px;

float:right;

}

</style>

</head>

<body>

<divid="test">

<ul>

<li><span>12-11</span>测试列表的

</li>

<li><span>12-11</span>测试列表的

</li>

<li><span>12-11</span>测试列表的

</li>

<li><span>12-11</span>测试列表的

</li>

</ul>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行

再加更多的内容

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>li的简单应用</title>

<styletype="text/css">

*{margin:0;padding:0;}

#test

{

width:300px;

margin:5px;

}

#testulli

{

margin:3px;/*forIE5.x*/

margin/**/:1px;

list-style-type:none;

font:normalnormalnormalಌpx/1emhelvetica,Arial,verdana;

border:1px#004080solid;

}

#testullih4

{

font:normalnormalnormalಌpx/2emhelvetica,Arial,verdana;

padding-left:20px;

background:#fefefeurl('http://bbs.51js.com/images/smilies/icon1.gif')no-repeatleftcenter;

}

#testullip

{

padding:2px;

}

#testullispan

{

margin:0px5px;

float:right;

}

</style>

</head>

<body>

<divid="test">

<ul>

<li><h4><span>12-11</span>测试列表的</h4>

<p>测试列表的测试列表的测试列表的测试列表的测试列表的</p>

</li>

<li><h4><span>12-11</span>测试列表的</h4>

<p>测试列表的测试列表的测试列表的</p>

</li>

<li><h4><span>12-11</span>测试列表的</h4>

<p>测试列表的测试列表的测试列表的</p>

</li>

<li><h4><span>12-11</span>测试列表的</h4>

<p>测试列表的测试列表的测试列表的</p>

</li>

</ul>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类