搜索
简帛阁>技术文章>《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-4

《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-4

Web前端设计与开发-课后任务-漫步时尚广场任务源码

  • 第四章
    • 任务4-1
    • 任务4-2

第四章

注: 素材图片路径需要根据实际情况修改

任务4-1

<!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-eqaiv="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: 100%;margin: 0 auto;height: 40px;line-height: 40px}
        .nav {<!-- -->width: 100%px;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>
    <!-- 菜单导航栏 start-->
    <div class="nav_bg">
        <div class="nav_content">
            <ul class="nav">
                <li><a href="shoppipgIndex.html" class="white">首页</a></li>
                <li class="nav_active">
                    <a href="shoppipgShow.html" class="white">最新上架</a></li>
                <li>品牌活动</li>
                <li>原厂直供</li>
                <li>团购</li>
                <li>限时抢购</li>
                <li>促销打折</li>
            </ul>
        </div>
    </div>
    <!-- 菜单导航栏 end-->
</body>
</html>

运行截图:

任务4-2

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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}
     body{<!-- -->font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
     .middle{<!-- -->float:left;width:690px}
     .pic_list{<!-- -->float:left}
     .pic_list dl{<!-- -->float:left;width:152px;margin:0 10px 10px}
     .price{<!-- -->font-size:15px;font-weight:700;color:red;float:left}
     .price2{<!-- -->font-size:12px;font-weight:700;color:red;text-align:center}
     .font12{<!-- -->font-size:12px;color:#ccc;float:right}
     .pic_list dl img{<!-- -->padding:5px;border:1px solid #ccc;margin-bottom:10px}
     .pic_list dl dd{<!-- -->float:left}
     .pic_title{<!-- -->background:#ff9c01;line-height:40px;font-size:16px;text-indent:20px;text-align:left;width:680px;float:left;color:#fff;margin:0 10px 10px;}
      .pic_list2 li{<!-- -->float:left}
      .pic_list2{<!-- -->margin:0 6px 0 12px}
      .pic_list2 li{<!-- -->width:160px;float:left;margin:5px 4px}
  </style>
 </head>
 <body>
  <!--中间区 start-->
  <div class="middle">
   <hl class="pic_title">最新上架</hl>
   <div class="pic_list">
    <dl>
     <div><a href="shoppingDetail.html" target="_blank">
       <img src="images/shopshow/yifu1.jpg" /></a></div>
     <dt>$198.00元
          324人购买</dt>
     <dd>冬季新款牛仔外套加厚连衣帽毛领加绒牛仔棉衣</dd>
    </dl>
    <dl>
     <div><img src="images/shopshow/yifu2.jpg" /></div>
     <dt>$69.00元
          534人购买</dt>
     <dd>2015夏季新款韩版 透气舒适简约半截袖T恤衫</dd>
    </dl>
    ...<!-- 此处省略其他最新上架商品 -->
   </div>
   <!-- 品牌活动 -->
   <hl class="pic_title">品牌活动</hl>
   <ul class="pic_list2">
    <li><img src="images/shopshow/dress1.jpg" />
     <p>独家制定 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙</p>
    </li>
    <li><img src="images/shopshow/dress2.jpg" />
     <p>夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙</p>
    </li>
    <li><img src="images/shopshow/dress3.jpg" />
     <p>爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙</p>
    </li>
    <li><img src="images/shopshow/dress4.jpg" />
     <p>亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</p>
    </li>
   </ul>
  </div>
  <!-- 中间区 end -->
 </body>
</html>

运行截图:

Web前端设计开发课后任务漫步时尚广场任务源码第四章任务41任务42第四章注:素材图片路径需要根据实际情况修改任务41<!DOCTYPEhtmlPUBLIC//W3C//DTDXHTML10T
Web前端设计开发课后任务漫步时尚广场任务源码第二章任务21任务22tophtmllefthtmlshop_searchhtmlfoodlisthtmlmainhtml第二章注:素材图片路径需要根据
Web前端设计开发课后任务漫步时尚广场代码第一章任务11任务12任务13任务14第一章图片素材路径根据实际情况进行修改任务11<!菜单导航栏start><divclassnav_b
Web前端设计开发课后任务漫步时尚广场任务第五章源码前台模块shoppingShow_goodshtmlshoppingShow_goods_byScripthtml后台模块css文件topcss
第三章任务31任务32注:素材图片路径需要根据实际情况修改任务31<!DOCTYPEhtml><htmllangen><head><metacharsetUT
&x1f345;作者主页:Java李杨勇&x1f345;简介:Java领域优质创作者&x1f3c6;、【java李杨勇】公号作者✌简历模板、学习资料、面试题库【关注我,都给你】&x1f345;文末获取
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生,可以说这是前端的世界,就没有前端解决不了的,而在前端的世界里就没有javascript实现不了的。关于JavaS
章一:css复杂选择器,权重计算问题,css基础属性并列选择器:多个限制条件,选中一个元素,并且不加空格写在一起。如:divdemo{}分组选择器如:em,strong,p{}
1、HTML简介HTML指的超文本标记语言(HyperTextMarkupLanguage),是一种用来描述网页的语言。超文本指的是除了可以包含文字之外,还可以包含图片、链接、音乐、视频、程序等内容。
菜单中有的项目有夏季菜单,需要添加一个三角形,这个三角形是利用两个边框不同颜色产生的楔形制作的设置盒子的高度和宽度均为0,边框合适的大小,透明颜色,对应边设置高度、颜色<!DOCTYPEhtml