HTML/CSS写列表
2018-01-12 12:48
155 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>LIST</title> <link rel="stylesheet" href="css/list.css" /> </head> <body> <div id="wrapper"> <div class="tit"> <h3><a href=" ">栏目标题</a></h3> </div> <div class="list"> <ul> <li><a href="">第一个列表选项</a></li> <li><a href="">第二个列表选项</a></li> <li><a href="">第三个列表选项</a></li> <li><a href="">第四个列表选项</a></li> <li><a href="">第五个列表选项</a></li> <li><a href="">第六个列表选项</a></li> <li><a href="">第七个列表选项</a></li> <li><a href="">第八个列表选项</a></li> <li><a href="">第九个列表选项</a></li> <li><a href="">第十个列表选项</a></li> </ul> </div> </div> </body> </html>
body{ background-color: white; font: 12px arial; color: black; } a:link,a:visited{ text-decoration: none; color: #333; } #wrapper{ width: 300px; text-align: left; } .tit{ width: 100%; height: 24px; background: url(../img/titbg.gif); } .tit h3{ margin: 0px; padding: 0px; line-height: 24px; font-size: 12px; text-indent: 30px; background: url(../img/tittb.gif) no-repeat 3% 50%; } .list{ width: 298px !important; width: 300px; /*IE6及以下浏览器width为300px,!important并没有覆盖后面的规则;其它浏览器下width为298px*/ float: left; border: 1px solid #d8d8d8; border-top: 0px; } ul{ list-style-type: none; margin: 0px; padding: 0px; } ul li{ float: left; line-height: 20px; width: 45%; margin: 0px 5px; background: url(../img/sidebottom.gif) repeat-x 0 bottom; } ul a{ padding-left: 12px; background: url(../img/bullet.gif) no-repeat 0 50%; } ul a:hover{ text-decoration: underline; color: #ff0000; }
相关文章推荐
- JavaWeb - HTML,字体/列表/图形/超链接/表格/表单/其它(标签),CSS,CSS与HTML结合方式,CSS选择器,CSS扩展选择器
- HTML&CSS基础学习笔记13—无序列表
- Sublime Text 插件之HTML-CSS-JS Prettify—格式化HTML CSS JS与显示函数列表
- div+css html列表
- 改变图标!用户自定义列表样式css说明(http://www.blogcup.com/read_dicky_5345.html)
- [HTML] CSS 下拉列表菜单
- web前端新手向HTML+CSS+JavaScript实现列表的增删查改【施工中】
- html+css+javascript实现列表循环滚动示例代码
- 前端左右列表联动,目前没有找到好的插件,以后使用到的话自己使用原生的js,html,css写
- html+css+javascript实现列表循环滚动
- html&css------列表、链接、图像(10/31)
- HTML、CSS和JavaScript学习五(案例分析二表格、项目列表和超链接)
- web前端html+css常用布局05列表布局
- html,css,javascrip,canvas快速查询列表
- HTML/CSS中有序<ol&g bfb7 t;、无序<ul>、定义列表用法详解
- 用html与css实现一个下载列表
- HTML与CSS入门——第五章 使用文本块和列表
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- 《HTML&CSS设计与构建网站》第三章 列表
- 下拉列表实现html+css