当前位置:  编程技术>WEB前端

li的简单应用

    来源: 互联网  发布时间:2014-09-06

    本文导语:  作者:eoe 虽然自己天天写CSS~~ 可是来了原创文章这里~~不知道要写什么~~ 今天就先写个LI 的简单应用~~以后慢慢加好了 这是一个普通的LI li的简单应用   测试列表的   测试列表的   测试列表的   测试列表的   ...

作者:eoe
虽然自己天天写CSS~~
可是来了原创文章这里~~不知道要写什么~~

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

这是一个普通的LI



li的简单应用




      
  • 测试列表的

  •   
  • 测试列表的

  •   
  • 测试列表的

  •   
  • 测试列表的





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

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


  引用: 
*{margin:0;padding:0;} 习惯性把所有的元素的内补丁外补丁定义为0
0可以没有单位~~理论上是要单位的~不过0px 0pt 0em 都是0 所以~懒了~~

#test ul li 是 包含选择符
定义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

 






li的简单应用

*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/**/:1px;
list-style-type:none;
font:normal  normal normal ಌpx/2em  helvetica,Arial, verdana;
border:1px #004080 solid;
background: #fefefe url('/images/smilies/icon1.gif')  no-repeat left center;
padding-left:20px;

}






      
  • 测试列表的

  •   
  • 测试列表的

  •   
  • 测试列表的

  •   
  • 测试列表的





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

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


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







li的简单应用

*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/**/:1px;
list-style-type:none;
font:normal  normal normal ಌpx/2em  helvetica,Arial, verdana;
border:1px #004080 solid;
background: #fefefe url('/images/smilies/icon1.gif')  no-repeat left center;
padding-left:20px;

}
#test ul li span
{
margin:0px 5px;
float:right;
}





      
  • 12-11测试列表的

  •   
  • 12-11测试列表的

  •   
  • 12-11测试列表的

  •   
  • 12-11测试列表的





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

再加更多的内容



li的简单应用

*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/**/:1px;
list-style-type:none;
font:normal  normal normal ಌpx/1em  helvetica,Arial, verdana;
border:1px #004080 solid;
}
#test ul li h4
{
font:normal  normal normal ಌpx/2em  helvetica,Arial, verdana;
padding-left:20px;
background: #fefefe url('/images/smilies/icon1.gif')  no-repeat left center;

}
#test ul li p
{
padding:2px;
}
#test ul li span
{
margin:0px 5px;
float:right;
}





      
  • 12-11测试列表的

    测试列表的测试列表的测试列表的测试列表的测试列表的



  •   
  • 12-11测试列表的

    测试列表的测试列表的测试列表的



  •   
  • 12-11测试列表的

    测试列表的测试列表的测试列表的



  •   
  • 12-11测试列表的

    测试列表的测试列表的测试列表的







    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 重装服务器后IIS网站错误(应用程序中的服务器错误)
  • 让HTML5应用与原生应用一样运行流畅 Steroids.js
  • 隐藏andriod 应用app启动图标的几种方法
  • 浙ICP备11055608号-3 iis7站长之家
  • ​传统应用的docker化迁移
  • 怎样开发在LINUX 上运行的应用程序,像WINDOWS桌面应用程序一样
  • Http协议3XX重定向介绍及301跳转和302跳转应用场景
  • adnroid已安装应用中检测某应用是否安装的代码实例
  • Docker 1.12.4应用容器引擎发布及下载地址
  • linux商业应用或者说开源软件商业应用是否需要付费?
  • Docker v1.13.0 应用容器引擎正式版发布及下载地址
  • 在多cpu的linux系统上,到底是用多线程应用好些还是多进程应用好些??
  • docker应用之利用Docker构建自动化运维
  • 我要监测一台远程电脑的状态(未上线/上线但没打开每个应用程序/上线且打开应用程序),该如何作?
  • Windows下Docker应用部署相关问题详解
  • Android应用内调用第三方应用的方法
  • Docker详细的应用与实践架构举例说明
  • asp.net应用程序的生命周期和iis应用程序池
  • 手动执行应用程序ok,但用crontab(在正确的用户名下)运行应用程序就报-12545(tns连接错误),怎么解决?
  • 一个静态库包含多个函数,应用程序连接了库中的某个函数,应用程序目标代码中是否还包含了该静态库中的其他函数代码?
  • 介绍下速度快而应用功能齐全的LINUX版本,忍受不了windows的低速了……应用即可,最好带X。


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3