制作网络畅销排行榜 HTML 关键代码
2016-10-16 17:29
351 查看
<span style="font-size:24px;"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>畅销书排行榜</title> <style type="text/css"> .q{ width: 230px; } .c{ font-size: 16px; color: white; text-indent: 1em; line-height: 30px; background-color:#518700; background-image:url(images/bang.gif); background-repeat:no-repeat; background-position:100px 3px; height:30px; } .f{ background-color: #F3F4DF; background-repeat:no-repeat; width:230px; height: 300px; } .f ul li a{ color:#1A66B3; text-decoration:none; font-size: 12px; line-height: 28px; } .f ul li a:hover{ text-decoration:underline; } .f ul li.one{ background-position:5px 4px; list-style-type:none; background-image:url(images/book_no01.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.two{ background-position:5px 5px; list-style-type:none; background-image:url(images/book_no02.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.three{ background-position:5px 6px; list-style-type:none; background-image:url(images/book_no03.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.four{ background-position:5px 7px; list-style-type:none; background-image:url(images/book_no04.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.five{ background-position:5px 8px; list-style-type:none; background-image:url(images/book_no05.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.six{ background-position:5px 9px; list-style-type:none; background-image:url(images/book_no06.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.seven{ background-position:5px 10px; list-style-type:none; background-image:url(images/book_no07.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.eight{ background-position:5px 11px; list-style-type:none; background-image:url(images/book_no08.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.nine{ background-position:5px 12px; list-style-type:none; background-image:url(images/book_no09.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul li.ten{ background-position:5px 13px; list-style-type:none; background-image:url(images/book_no10.gif); background-repeat:no-repeat; text-indent: 2em; } .f ul {margin-top:0px;} </style> </head> <body> <div class="q"> <div class="c">畅销书排行</div> <div class="f"> <ul> <li class="one"><a href="#">不抱怨的世界(畅...</a></li> <li class="two"><a href="#">遇见未知的自己...</a></li> <li class="three"> <a href="#">活法(季羡林、...</a></li> <li class="four"><a href="#">高效能人士的七个习惯</a></li> <li class="five"><a href="#">被迫强大(北外女生香奈儿...</a></li> <li class="six"><a href="#">遇见心想事成的自己(《遇...</a></li> <li class="seven"><a href="#">世界上最伟大的推销员(插...</a></li> <li class="eight"><a href="#">我的成功可以复制(唐骏亲...</a></li> <li class="nine"><a href="#">少有人走的路:心智成熟的...</a></li> <li class="ten"><a href="#">活出全新的自己——唤醒...</a></li> </ul> </div> </div> </body> </html> </span>
相关文章推荐
- HTML 网页制作 网易邮箱登录页面 关键代码
- HTML代码实例:详细讲解超级链接--网页制作
- 网页制作常用html代码
- android的两种网络请求方式关键代码详解
- Tensorflow框架下Faster-RCNN实践(二)——用自己制作的数据训练Faster-RCNN网络(附代码)
- 网页制作HTML代码全攻略
- 网站制作实用代码--HTML
- html如何制作爱情表白代码
- Android 网络:使用URLConnection提交请求,获取html代码加载WebView
- 分享非常有用的Java程序(关键代码)(八)---Java InputStream读取网络响应Response数据的方法!(重要)
- Tensorflow框架下Faster-RCNN实践(二)——用自己制作的数据训练Faster-RCNN网络(附代码)
- 制作自己的QQ登陆器的关键代码
- Android学习第十七天----从网络上获取html代码
- 网页制作HTML基础标签代码大全
- UI:用UITableView制作通讯录的关键代码
- 10_Android中通过HttpUrlConnection访问网络,Handler和多线程使用,读取网络html代码并显示在界面上,ScrollView组件的使用
- 网页制作:HTML代码编写的30条技巧
- phpcms 2.2模板主要文件中的关键html代码
- 网络爬虫(五)------------简单网络爬虫实现代码,记得要添加htmlpaser和htmlclient两个包
- 利用java.net包访问网络,连接网页并返回html页面代码