html css制作家用商品分类页面

这是完成效果图求大神帮写下css标题字体大小为18px白色加粗显示行距35px，背景颜色为蓝色，向内缩进一个字符电器分类字体大小为14px，加粗，行距30px，背景浅蓝，... 这是完成效果图
求大神帮写下css
标题字体大小为18px 白色加粗显示行距35px，背景颜色为蓝色，向内缩进一个字符
电器分类字体大小为14px，加粗，行距30px，背景浅蓝，电器分类超链接字体颜色为蓝色，无下划线，当鼠标悬停超链接上出现下划线。
分区内容字体为12，行距20，超链接字体颜色为灰色，无下划线，鼠标悬停红色，显示下划线展开

 我来答

2个回答

#热议# 什么是淋病？哪些行为会感染淋病？

百度网友c37ea8d
2014-12-16

知道答主

回答量：20

采纳率：0%

帮助的人：12.7万

我也去答题访问个人页

关注

展开全部

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin:0;padding: 0;box-sizing:border-box;}
	a{color:#666;text-decoration: none;}
	.menu{width:220px;}
	.menu h2{width:100%;height: 36px;line-height: 36px;font-size:18px;padding-left: 10px;background: #0F7CBF;}
	.menu h2 a{color:#fff;}
	.menu .item h3{height: 30px;line-height:30px;padding-left:15px;background: #E4F1FA;}
	.menu .item h3 a{color:#0F7CBF;font-size: 14px;}
	.menu .item p{padding: 15px;line-height: 18px;}
	.menu .item p a{font-size: 12px;}
	</style>
</head>
<body>
	<div class="menu">
		<h2><a href="#">家用电器</a></h2>
		<div class="item">
			<h3><a href="#">大家电</a></h3>
			<p>
				<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
				<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
				<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
			</p>
		</div>
		<div class="item">
			<h3><a href="#">大家电</a></h3>
			<p>
				<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
				<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
				<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
			</p>
		</div>
		<div class="item">
			<h3><a href="#">大家电</a></h3>
			<p>
				<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
				<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
				<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
			</p>
		</div>
		<div class="item">
			<h3><a href="#">大家电</a></h3>
			<p>
				<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
				<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
				<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
			</p>
		</div>
	</div>

</body>
</html>

兼容IE8+

追问

大神看下我刚加了下需求 你这个写的好棒 我改了点就跟需求差不多了 不过还是有点不会的 在帮忙改改呗

已赞过 已踩过<

评论收起

5艾辰
推荐于2017-09-06 · 超过51用户采纳过TA的回答

知道小有建树答主

回答量：93

采纳率：100%

帮助的人：73.2万

我也去答题访问个人页

关注

展开全部

下面是代码直接放到body里面运行就可以了，其他字体和宽度你自己改一下就是了
<style type="text/css">
*{ margin:0px; padding:0px}
dl,dd,dt{ margin:0px;}
a{ text-decoration:none; font-size:12px;}
.menu{ width:220px;}
.menu h3{ background:#0F7CBF; line-height:35px; padding-left:20px; color:#fff;}
.menu dt{ color:#1671CC; line-height:25px; padding-left:25px; background:#E4F1FA; font-size:14px; font-weight:bold;}
.menu dd{ padding:10px;}
.menu dd a{ color:#666666; padding:0 5px;}
</style>

<div class="menu">
<h3>家用电器</h3>
<dl>
<dt>大家电</dt>
<dd>
<a href="#">平板电视</a><a href="#">平板电视</a><a href="#">平板电视</a>
<a href="#">平板电视</a><a href="#">平板电视</a><a href="#">平板电视</a>
</dd>
<dt>大家电</dt>
<dd>
<a href="#">平板电视</a><a href="#">平板电视</a><a href="#">平板电视</a>
<a href="#">平板电视</a><a href="#">平板电视</a><a href="#">平板电视</a>
</dd>
<dt>大家电</dt>
<dd>
<a href="#">平板电视</a><a href="#">平板电视</a><a href="#">平板电视</a>
<a href="#">平板电视</a><a href="#">平板电视</a><a href="#">平板电视</a>
</dd>
</dl>
</div>

追问

方便留个q吗 这道题有需求的 百度写不了那么多

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

html css制作家用商品分类页面

其他类似问题

为你推荐：