HTML 第六章----------- 制作聚美优品热点产品列表

最新推荐文章于 2021-12-19 11:32:20 发布

火火儿

最新推荐文章于 2021-12-19 11:32:20 发布

阅读量5.8k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_36024620/article/details/52850462

这个HTML代码展示了如何创建一个美容热点产品的列表，包括产品名称和编号。列表采用了无序列表（ul, li）结构，每个产品链接带有编号（span）和背景图片，鼠标悬停时有高亮效果。整体样式设计简洁，背景颜色和边框风格统一，为用户提供清晰的产品导航。" 114560766,10538942,C#与Java通过Socket用JSON进行跨平台对象通信,"['跨平台开发', '网络通信', 'C#编程', 'Java编程', 'JSON序列化']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>美容热点产品</title>
<style type="text/css">
c, ul,li {
	margin:0px;
	padding:0px;
}
ul, li {
	list-style-type:none;
}
body {
	background-color:#eee7e1;
	
}
#b {
	width:260px;
	background-color:#FFF;
}
#b c {
	font-size:14px;
	font-weight:bold;
	color:#FFF;
	background-color:#e9185a;
	height:35px;
	line-height:35px;
	padding-left:10px;
}
#b li {
	border-bottom:1px #a8a5a5 dashed;
	height:30px;
	line-height:30px;
	padding-left:2px;
}
#b a {
	color:#666666;
	text-decoration:none;
}
#b a:hover {
	color:#e9185a;
}
#b a span {
	color:#FFF;
	background-image:url(image/dot_01.gif) 0px 5px no-repeat;
	text-align:center;
	padding:10px;
	font-weight:bold;
}
#b a:hover span {
	color