标题 | html 无序列表项目符号使用图片的css写法 |
内容 | 创建一个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> </div> <div id=content> <ul> <li id=book1>鸟哥的linux私房菜基础篇</li> <li id=book2>鸟哥的linux私房菜服务器篇</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); } |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。