html css制作家用商品分类页面
这是完成效果图求大神帮写下css标题字体大小为18px白色加粗显示行距35px，背景颜色为蓝色，向内缩进一个字符电器分类字体大小为14px，加粗，行距30px，背景浅蓝，...
这是完成效果图
求大神帮写下css
标题字体大小为18px 白色 加粗显示 行距35px，背景颜色为蓝色，向内缩进一个字符
电器分类字体大小为14px，加粗，行距30px，背景浅蓝，电器分类超链接字体颜色为蓝色，无下划线，当鼠标悬停超链接上出现下划线。
分区内容字体为12，行距20，超链接字体颜色为灰色，无下划线，鼠标悬停红色，显示下划线 展开
求大神帮写下css
标题字体大小为18px 白色 加粗显示 行距35px，背景颜色为蓝色，向内缩进一个字符
电器分类字体大小为14px，加粗，行距30px，背景浅蓝，电器分类超链接字体颜色为蓝色，无下划线，当鼠标悬停超链接上出现下划线。
分区内容字体为12，行距20，超链接字体颜色为灰色，无下划线，鼠标悬停红色，显示下划线 展开
2个回答
展开全部
<!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+
追问
大神看下我刚加了下需求 你这个写的好棒 我改了点就跟需求差不多了 不过还是有点不会的 在帮忙改改呗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
下面是代码直接放到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>
<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吗 这道题有需求的 百度写不了那么多
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
