标题 | 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>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); } |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。