html无序列表项目符号使用图片的css写法
来源: 阅读:1869 次 日期:2016-06-17 10:33:14
温馨提示: 小编为您整理了“html无序列表项目符号使用图片的css写法”,方便广大网友查阅!

有这样的一个需求,内容为一个无序列表,想让列表的项目符号必须采用缩略图,本文使用css方法进行布局实现,大家可以参考下。

创建一个html页面,其内容为一个无序列表,列表中至少包含了5本畅销书,每本书之前的项目符号必须采用概述封面的缩略图。这些信息可以冲web上获取。要求采用css方法进行布局。

html:

代码如下:

linux畅销书

    鸟哥的linux私房菜基础篇

    鸟哥的linux私房菜服务器篇

    linux命令行与shell脚本编程大全

    linux运维之道

    linux/unix系统编程手册

Baidu
map

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:1pxsolidblack;

border-bottom:1px;

solidblack;

}

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);

}

更多信息请查看 网页制作
【点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇: html标签上标sup下标sub应用介绍
下一篇: chrome css hack
手机网站地址: html无序列表项目符号使用图片的css写法
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
相关阅读 网页制作

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
最新信息
公考类
招聘类
各类考试
关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 新媒体/短视频平台| 手机站点| 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:
咨询QQ:1093837350(9:00—18:00) 版权所有:
云南网警报警专用图标
Baidu
map