CSS购物网站美化教程-优快云博客

本文链接：https://blog.youkuaiyun.com/codefight/article/details/80320904

本文详细介绍了如何使用CSS样式来美化购物网站的菜单导航栏和商品展示区，通过具体代码实例，展示了如何调整布局、颜色及字体等元素，提升用户体验。

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

【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏。

<!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 type="text/css">

*{padding:0;margin:0;}
li,ul{list-style:none;}
.nav_bg{background:#ce2626;width:100%;color:#fff}
.nav_content{width:1200px;margin:0 auto;height:40px;line-height:40px}
.nav{width:700px;float:left;margin-left:200px}
.nav li{font-size:16px;font-weight:700;color:#fff;width:80px;float:left;text-align:center;margin-right:15px}
.orange{font-weight:700;color:#f60}
.nav_active{background:#b12121}
a.white{color:#fff;text-decoration:none}
a.white:hover{color:#ff0;text-decoration:none}
  </style>
</head>
<body>

<!--顶部区域 end-->
<div class="clear"></div>
<!--logo和banner start-->
<div class="logo"><a href="../index.html"><img src="images/logo.jpg" ></a><img src="images/banner.jpg" class="floatr "></div>
<!--logo和banner  end--> 

<!--菜单导航栏 start-->
<div class="nav_bg">
  <div class="nav_content">
    <ul class="nav">
      <li ><a href="shoppingIndex.html" class="white">首页</a></li>
      <li class="nav_active" ><a href="shoppingShow.html"  class="white">最新上架</a></li>
      <li>品牌活动</li>
      <li>原厂直供</li>
      <li>团购</li>
      <li>限时抢购</li>
      <li>促销打折</li>
    </ul>
  </div>
</div>
</body>
</html>

这里写图片描述