淘宝女装分类页面
2019-04-09 本文已影响0人
Tn299
题目
1.需求说明
(1) .使用<div>和标题等HTML标签编辑页面
(2) .女装各分类名称前的图片使用背景图片的方式实现，标题字体大小 为18px,加粗显示
(3) .分类内容字体大小 为12px,超链接文本字体颜色为黑色，无下划线，当鼠标移至超链接文本上时字体颜色为橙色（#F60）,并且显示下划线。
(4) .使用外部样式表创建页面样式
(5) .页面中其他效果见效果图
代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="淘宝女装分类.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>
<p class="bt_1"> 夏季流行</p>
<hr>
<p>
<a href="#">夏季新品</a>
<a href="#">雪纺裙</a>
<a href="#">短袖T</a>
<a href="#">铅笔裤</a>
<a href="#">短裤</a>
<a href="#">短袖衬衫</a>
<a href="#">小脚牛仔裤</a><br/>
<a href="#">开衫</a>
<a href="#">蕾丝/雪纺衫</a>
<a href="#">韩版外套</a>
<a href="#">小西装</a>
<a href="#">中长款裙</a>
</p>
</div>
<div>
<p class="bt_2"> 上装</p>
<hr>
<p>
<a href="#">T恤</a>
<a href="#">衬衫</a>
<a href="#">针织衫</a>
<a href="#">长袖T</a>
<a href="#">韩版T</a>
<a href="#">情侣衫</a>
<a href="#">雪纺衬衫</a><br/>
<a href="#">韩版衬衫 </a>
<a href="#">防晒衣</a>
<a href="#">休闲套装</a>
<a href="#">卫衣</a>
<a href="#">背心/吊带 </a>
</p>
</div>
<div>
<p class="bt_3"> 裙子</p>
<hr>
<p>
<a href="#">连衣裙</a>
<a href="#">半身裙</a>
<a href="#">长裙</a>
<a href="#">短袖裙</a>
<a href="#">蕾丝连衣裙</a>
<a href="#">长袖裙</a>
<a href="#">无袖/背心裙</a><br/>
<a href="#">A字裙</a>
<a href="#">牛仔裙</a>
<a href="#">半身中长裙</a>
<a href="#">半身短裙</a>
<a href="#">包臀裙</a>
</p>
</div>
<div>
<p class="bt_4"> 裤子</p>
<hr>
<p>
<a href="#">裤子</a>
<a href="#">休闲裤</a>
<a href="#">牛仔裤</a>
<a href="#">打底裤</a>
<a href="#">长裤</a>
<a href="#">哈伦裤</a>
<a href="#">阔腿裤</a><br/>
<a href="#"> 短裤/热裤</a>
<a href="#">连体裤</a>
<a href="#">七/九分裤</a>
<a href="#">牛仔短裤</a>
<a href="#">西装裤</a>
</p>
</div>
<div>
<p class="bt_5"> 其他女装</p>
<hr>
<p>
<a href="#">胖M装 </a>
<a href="#">中老年</a>
<a href="#">婚纱</a>
<a href="#">礼服</a>
<a href="#">旗袍</a>
<a href="#">夜店</a>
<a href="#">舞台装</a><br/>
<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>
css代码
.bt_1
{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%901/dress01.png);
background-repeat:no-repeat;
font-size:18px;
font-weight:bold;
background-position:left}
a{
font-size:12px;
text-decoration:none;
color:#000;}
a:hover
{
color:#F60;
text-decoration:underline;}
.bt_2
{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%901/dress02.png);
background-repeat:no-repeat;
font-size:18px;
font-weight:bold;
background-position:left}
.bt_3
{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%901/dress03.png);
background-repeat:no-repeat;
font-size:18px;
font-weight:bold;
background-position:left}
.bt_4
{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%901/dress04.png);
background-repeat:no-repeat;
font-size:18px;
font-weight:bold;
background-position:left}
.bt_5
{
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%901/dress05.png);
background-repeat:no-repeat;
font-size:18px;
font-weight:bold;
background-position:left}
效果图
image.png
