实验二使用CSS样式美化购物列表页面中的菜单导航以及商品展示

最新推荐文章于 2024-04-29 13:33:45 发布

超爱学习的我

最新推荐文章于 2024-04-29 13:33:45 发布

阅读量3.1k

点赞数 7

分类专栏： web前端开发技术文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_49043036/article/details/121071691

版权

web前端开发技术专栏收录该内容

1 篇文章 2 订阅

订阅专栏

一、实验目的

掌握CSS定义文字、背景图片、超链接控制、列表等常用属性的设置

二、实验要求

在购物列表页面中，通过<ul>标签来实现菜单导航栏，然后使用css样式控制菜单栏的位置和样式，效果如下：

使用CSS样式美化购物列表页面中的商品展示区，商品展示区分为“最新上架”和“品牌活动”两部份，两模块采用div-ul-li方式排版，效果如下：

最新上架部分：

品牌活动部分：

具体代码如下（仅供参考）：

<!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=utf-8" />
<title>无标题文档</title>
<style>
.daohang{
	background-color:#F00;}
.daohang ul{
	width:700px;
	height:30px;
	margin:2px auto;
	list-style:none;
	padding:0px;
	}
.daohang ul li{
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	float:left;
	margin:0px;}
.daohang ul li a {
	text-decoration:none;
	color:white;}
.daohang ul li:hover{
	background-color:red;}
.daohang ul li a:hover{
	color:yellow;}
.new{
	margin:2px auto;
	width:660px;
	height:620px;
	border:1px solid white;}
.new h2{
	background-color:#F93;
	color:white;
	padding:10px;
	height:30px;}
.new ul{
	width:660px;
	height:520px;
	border:1px;
	list-style:none;
	padding:0px;}
.new ul li{
	width:150px;
	float:left;
	margin-left:10px;
	text-align:left;}
.f1{
	color:red;
	margin-right:20px;
	font-size:12px;
	font-weight:bolder;}
.f2{
	color:grey;
	font-size:12px;}
.f3{
	color:black;
	font-size:13px}
.active{
	margin:2px auto;
	width:700px;
	height:400px;
	border:1px solid white;}
.active h2{
	background-color:#F93;
	color:white;
	padding:8px;
	height:30px;}
.active ul{
	width:700px;
	height:400px;
	border:1px;
	list-style:none;
	padding:0px;}
.active ul li{
	width:160px;
	float:left;
	margin-left:12px;
	text-align:left;
	font-size:13px}
</style>
</head>

<body>
<div class="daohang">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新上架</a></li>
<li><a href="#">品牌活动</a></li>
<li><a href="#">原厂直供</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">限时抢购</a></li>
<li><a href="#">促销打折</a></li>
</ul>
</div>

<div class="new">
<h2>最新上架</h2>
<ul>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu1.jpg" width="150" height="180" />
<p><span class="f1">&yen;198.00元</span><span class="f2">324人购买</span><br />
<span class="f3">冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu2.jpg" width="150" height="180" />
<p><span class="f1">&yen;68.00元</span><span class="f2">534人购买</span><br />
<span class="f3">2015夏新款韩版 透气舒适简约半截袖T恤衫</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu3.jpg" width="150" height="180" />
<p><span class="f1">&yen;160.00元</span><span class="f2">643人购买</span><br />
<span class="f3">韩版甜美气质亮片热气球字母中长款圆领短袖T恤</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu4.jpg" width="150" height="180" />
<p><span class="f1">&yen;210.00元</span><span class="f2">678人购买</span><br />
<span class="f3">2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu5.jpg" width="150" height="180" />
<p><span class="f1">&yen;70.00元</span><span class="f2">567人购买</span><br />
<span class="f3">2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu6.jpg" width="150" height="180" />
<p><span class="f1">&yen;146.00元</span><span class="f2">4567人购买</span><br />
<span class="f3">大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu7.jpg" width="150" height="180" />
<p><span class="f1">&yen;69.00元</span><span class="f2">1345人购买</span><br />
<span class="f3">v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu8.jpg" width="150" height="180" />
<p><span class="f1">&yen;239.00元</span><span class="f2">789人购买</span><br />
<span class="f3">韩版印花无袖短裙背心裙女高腰连衣裙A字裙秋季</span></p></li>
</ul>
</div>

<div class="active">
<h2>品牌活动</h2>
<ul>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress1.jpg" width="160" height="280" />
<p>独家定制V双层欧根纱里衬色织时装料大牌范蓬蓬长裙</p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress2.jpg" width="160" height="280" />
<p>夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙</p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress3.jpg" width="160" height="280" />
<p>艾美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙</p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress4.jpg" width="160" height="280" />
<p>亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</p></li>
</ul>
</div>

</body>
</html>

超爱学习的我

关注

7
点赞
踩
63

收藏

觉得还不错? 一键收藏
3
评论
实验二使用CSS样式美化购物列表页面中的菜单导航以及商品展示

一、实验目的掌握CSS定义文字、背景图片、超链接控制、列表等常用属性的设置二、实验要求在购物列表页面中，通过<ul>标签来实现菜单导航栏，然后使用css样式控制菜单栏的位置和样式，效果如下：使用CSS样式美化购物列表页面中的商品展示区，商品展示区分为“最新上架”和“品牌活动”两部份，两模块采用div-ul-li方式排版，效果如下：最新上架部分：品牌活动部分：具体代码如下（仅供参考）：<!DOCTYPE html PUBLIC "-//...
复制链接

扫一扫