HTML_项目符号使用图片
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML_项目符号使用图片相关的知识,希望对你有一定的参考价值。
本文出自:http://blog.csdn.net/svitter
创建一个html页面。 其内容为一个无序列表。 列表中至少包括了5本畅销书,每本书之前的项目符号必须採用概述封面的缩略图。
这些信息能够冲Web上获取。
要求採用CSS方法进行布局。
HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="book.css" rel="stylesheet" type="text/css"> </head> <!--.author:svitter;--> <body> <div> <h1 class="diffentcolor">Linux畅销书</h1> <div id="menu"> <br /> </div> <div id="content"> <ul> <li id="book1">鸟哥的Linux私房菜基础篇</li> <li id="book2">鸟哥的Linux私房菜server篇</li> <li id="book3">Linux命令行与shell脚本编程大全</li> <li id="book4">Linux运维之道</li> <li id="book5">Linux/Unix系统编程手冊</li> </ul> </div> </div> </body>
book.css:
.diffentcolor{color:green;} #differcolor{color:green} body, td, div, .p, a { font-family: arial,sans-serif; } h1,h2{ font-family:sans-serif; color:gray; } .author{ by:svitter; } h1{ border-bottom:1px solid black; border-bottom:1px; solid black; } div#container{width:500p} div#menu {width:150px;float:left;} div#content {float:left;} li#book1{ list-style-image:url(pic/popularBook.jpg); } li#book2{ list-style-image:url(pic/popularBook2.jpg); } li#book3{ list-style-image:url(pic/popularBook3.jpg); } li#book4{ list-style-image:url(pic/popularBook4.jpg); } li#book5{ list-style-image:url(pic/popularBook5.jpg); }
以上是关于HTML_项目符号使用图片的主要内容,如果未能解决你的问题,请参考以下文章
spring cloud项目打包遇到“找不到符号”,符号是个类名