HTML5学习笔记

最新推荐文章于 2021-08-01 17:18:12 发布
最新推荐文章于 2021-08-01 17:18:12 发布
阅读量555 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28433939/article/details/80502853
版权

第一章作业 shoppingShow.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>漫步时尚广场-购物列表</title>
    <link href="css/show.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/shoppingCart.js"></script>
    <script type="text/javascript" src="js/hotAdvise.js"></script>

</head>

<body>
    <!--顶部区域 start-->
    <div class="top_bg">
        <div class="top_content">
            <div class="floatl"><img src="images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="../manageadmin/login.html" class="orange">[请登录]</a> <a href="register.html" class="orange"> [免费注册]</a></div>
            <div class="floatr">客户服务<img src="images/arrow.gif"> 网站导航<img src="images/arrow.gif"> 
                <div class="xl">
                    <!--购物车-->
                    <div class="droparrow" οnclick="showCar()"><span class="shopcart"></span>我的购物车
                        <span class="orange">0</span>件<img src="images/arrow.gif" /></div>
                    <!--下拉菜单-->
                    <div class="dropdown" id="dropdown" style="display: none" οndrοp="drop(event)" οndragοver="allowDrop(event)">
                        <!--<div class="gwc"></div><h3>购物车为空，现在去挑选几件商品</h3></div>-->
                        <ul class="shop_pic">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--顶部区域 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>
    <!--菜单导航栏 end-->
    <!--中间部分 start-->
    <div class="main">
        <!--购物分类 start-->
        <ul class="menu">
            <li><span class="title">女装</span></li>
            <li><span class="red_dot"></span><a href="#">上衣</a><span class="right_arrow"></span></li>
            <li><span class="red_dot"></span><a href="#">下装</a><span class="right_arrow"></span></li>
            <li><span class="red_dot"></span><a href="#">连衣裙</a><span class="right_arrow"></span></li>
            <li><span class="red_dot"></span><a href="#">内衣</a><span class="right_arrow"></span></li>
            <li><span class="title">男装</span></li>
            <li><span class="red_dot"></span><a href="#">T恤</a><span class="right_arrow"></span></li>
            <li><span class="red_dot"></span><a href="#">短裤</a><span class="right_arrow"></span></li>
            <li><span class="red_dot"></span><a href="#">衬衫</a><span class="right_arrow"></span></li>
            <li><span class="title">童装</span></li>
            <li><span class="red_dot"></span><a href="#">上衣</a><span class="right_arrow"></span></li>
            <li><span class="red_dot"></span><a href="#">裤子</a><span class="right_arrow"></span></li>
            <li><span class="title">运动</span></li>
            <li><span class="red_dot"></span><a href="#">运动裤</a><span class="right_arrow"></span></li>
            <li><span class="red_dot"></span><a href="#">跑步鞋</a><span class="right_arrow"></span></li>
        </ul>
        <!--购物分类end-->
        <!--中间区 start-->
        <div class="middle">
            <h1 class="pic_title">最新上架</h1>
            <div class="pic_list">
                <!--    <script type="text/javascript">
                    var images=["yifu1.jpg","yifu2.jpg","yifu3.jpg","yifu4.jpg","yifu5.jpg","yifu6.jpg","yifu7.jpg","yifu8.jpg",];
                    var prices=["198.00","69.00","160.00","210.00","70.00","146.00","69.00","239.00"];
                    var buyers=[324,534,643,678,567,4567,1345,789];
                    var contents=["冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣","2015夏新款韩版 透气舒适简约半截袖T恤衫","韩版甜美气质亮片热气球字母中长款圆领短袖T恤","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙","v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣","韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季"];

                    for(var i=0;i<images.length;i++){
                        var goodsInfo="<dl><div><img src='images/shopshow/"+images[i]+"' /></div><dt><span class='price'>￥"+prices[i]
                            +"元</span><span class='font12'>"+buyers[i]+"人购买</span></dt><dd>"
                            +contents[i]+"</dd></dl>";
                        document.write(goodsInfo);
                    }
                </script>-->
                <dl>
                    <div>
                        <a href="shoppingDetail.html" target="_blank"><img src="images/shopshow/yifu1.jpg" /></a>
                    </div>
                    <dt><span class="price">￥198.00元</span><span class="font12">324人购买</span></dt>
                    <dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd>
                </dl>
                <dl>
                    <div><img src="images/shopshow/yifu2.jpg" /></div>
                    <dt><span class="price">￥69.00元</span><span class="font12">534人购买</span></dt>
                    <dd>2015夏新款韩版 透气舒适简约半截袖T恤衫</dd>
                </dl>
                <dl>
                    <div><img src="images/shopshow/yifu3.jpg" /></div>
                    <dt><span class="price">￥160.00元</span><span class="font12">643人购买</span></dt>
                    <dd>韩版甜美气质亮片热气球字母中长款圆领短袖T恤</dd>
                </dl>
                <dl>
                    <div><img src="images/shopshow/yifu4.jpg" /></div>
                    <dt><span class="price">￥210.00元</span><span class="font12">678人购买</span></dt>
                    <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
                </dl>
                <dl>
                    <div><img src="images/shopshow/yifu5.jpg" /></div>
                    <dt><span class="price">￥70.00元</span><span class="font12">567人购买</span></dt>
                    <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
                </dl>
                <dl>
                    <div><img src="images/shopshow/yifu6.jpg" /></div>
                    <dt><span class="price">￥146.00元</span><span class="font12">4567人购买</span></dt>
                    <dd>大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙</dd>
                </dl>
                <dl>
                    <div><img src="images/shopshow/yifu7.jpg" /></div>
                    <dt><span class="price">￥69.00元</span><span class="font12">1345人购买</span></dt>
                    <dd>v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣</dd>
                </dl>
                <dl>
                    <div><img src="images/shopshow/yifu8.jpg" /></div>
                    <dt><span class="price">￥239.00元</span><span class="font12">789人购买</span></dt>
                    <dd>韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季 </dd>
                </dl>
            </div>
            <!--品牌活动-->
            <h1 class="pic_title">品牌活动</h1>
            <ul class="pic_list2">
                <script type="text/javascript">
                    var images = ["dress1.jpg", "dress2.jpg", "dress3.jpg", "dress4.jpg"];
                    var contents = ["独家定制 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙", "夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙", "爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙", "亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙"];
                    for (var i in images) {
                        var goodsInfo = "<li><img src='images/shopshow/" + images[i] + "'><p>" + contents[i] + "</p></li>";
                        document.write(goodsInfo);
                    }
                </script>
                <!--      <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-->

        <!--右侧热门推荐 start-->
        <div class="right_nav" id="right_nav">

            <!--
        <h1 class="notice_title">热门推荐</h1>
        <ul class="pic_list3">
            <li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
              <p class="price2">￥56.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
              <p class="price2">￥97.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
              <p class="price2">￥89.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s4.jpg" /></a>
              <p class="price2">￥69.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s5.jpg" /></a>
              <p class="price2">￥89.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
              <p class="price2">￥93.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
              <p class="price2">￥58.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
              <p class="price2">￥69.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s9.jpg" /></a>
              <p class="price2">￥78.00元</p>
            </li>
          </ul>-->
            <!--使用脚本的方向定时更新推,下面引入脚本代码也可以放在<head>标签之内荐信息-->

        </div>
        <!--右侧热门推荐 end-->

    </div>

    <!--中间部分 end-->
    <!--底部 start-->
    <div class="clear"></div>
    <div class="footer">
        <div class="gotop"></div>
        <div class="foot_title">
            <ul class="foot_pic">
                <li><img src="images/gray1.jpg"></li>
                <li><img src="images/gray2.jpg"></li>
                <li><img src="images/gray3.jpg"></li>
                <li><img src="images/gray4.jpg"></li>
                <li><img src="images/gray5.jpg"></li>
            </ul>
        </div>
        <ul class="foot_list">
            <li>
                <div class="floatl">
                    <p class="red1"></p>
                    <p class="line1"></p>
                </div>
                <ul class="floatl">
                    <li class="font16 padding-bottom">新手指导</li>
                    <li>用户注册</li>
                    <li>电话下单</li>
                    <li>购物流程</li>
                    <li>购物保障</li>
                    <li>服务协议</li>
                </ul>
            </li>
            <li>
                <div class="floatl">
                    <p class="red2"></p>
                    <p class="line1"></p>
                </div>
                <ul class="floatl">
                    <li class="font16 padding-bottom">支付方式</li>
                    <li>货到付款</li>
                    <li>商城卡支付</li>
                    <li>支付宝、网银支付</li>
                    <li>优惠券抵用</li>
                </ul>
            </li>
            <li>
                <div class="floatl">
                    <p class="red3"></p>
                    <p class="line1"></p>
                </div>
                <ul class="floatl">
                    <li class="font16 padding-bottom">配送方式</li>
                    <li>闪电发货</li>
                    <li>满百包邮</li>
                    <li>配送范围及时间</li>
                    <li>商品验收及签收</li>
                    <li>服务协议</li>
                </ul>
            </li>
            <li>
                <div class="floatl">
                    <p class="red3"></p>
                    <p class="line1"></p>
                </div>
                <ul class="floatl">
                    <li class="font16 padding-bottom">售后服务</li>
                    <li>退换货协议</li>
                    <li>关于发票</li>
                    <li>退换货流程</li>
                    <li>退换货运费</li>
                </ul>
            </li>
            <li>
                <div class="floatl">
                    <p class="red3"></p>
                    <p class="line1"></p>
                </div>
                <ul class="floatl">
                    <li class="font16 padding-bottom">关于帐号</li>
                    <li>修改个人信息</li>
                    <li>修改密码</li>
                    <li>找回密码</li>
                </ul>
            </li>
            <li>
                <div class="floatl">
                    <p class="red3"></p>
                    <p class="line1"></p>
                </div>
                <ul class="floatl">
                    <li class="font16 padding-bottom">优惠活动</li>
                    <li>竞拍须知</li>
                    <li>抢购须知</li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
        <div class="foot_line"></div>
        <p align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion ES 漫步时尚广场（QST教育）版权所有
            <Br/> 中国青岛 高新区河东路8888号 青软教育集团 咨询热线：400-658-0166 400-658-1022 </p>
        <p align="center"><img src="images/foot_pic.jpg"></p>
        <div class="clear"></div>
    </div>

    <!--底部 end-->
</body>

</html>

浪得虚名---
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5学习笔记
HeartdreamX的博客
05-09 255
HTML5的基础框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
html5的学习笔记
食鱼酱的博客
05-11 571
从今天开始终于有空闲时间了，计划接下来两周每天都学一部分html5的内容。 Html5嘛，比Html4高一个版本，肯定是比Html4牛B的，可世间所有事物的发展都需要一个过程，Html5也不例外。对于现在2017的中国，Html5基本上已经覆盖了移动端，而在PC端，由于IE678等一群老油箱的阻碍，Html5至今未能在PC端中完全表现自己。然而，as we know，Html5会在不久的将来统治
HTML5学习笔记之html5与传统html区别
12-14
HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变，主要有如下： 1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。 2.HTML5中，刻意不使用版本声明，一份文档将会适用于所有...
HTML5学习笔记（总结提炼版）——001
03-14
本学习笔记将聚焦于HTML5的基础知识，包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签：HTML5引入了新的语义化标签，如、、、和等，这些标签有助于更好地组织内容，提高可读性和可访问性。 2. ...
web前端HTML5学习笔记
09-07
前端笔记HTML5部分
HTML5详细笔记
11-23
详细的HTML5笔记，HTML5笔记，HTML5笔记，HTML5笔记。
我的 HTML5 笔记
weixin_34293911的博客
03-23 102
1. 音频标签 css部分.progress{ width: 300px; height: 10px; background-color: black; border-radius: 5px; } .innerProgress{ width: 0;...
HTML5笔记
darabiuz的博客
08-01 395
HTML5详解笔记1.浏览器http理解1.浏览器和服务器2.浏览器访问网页原理3.浏览器请求数据过程4.什么是url5.补充2.HTML1.认识HTML2.HTML发展史3.html结构理解4.字符集问题6.字符实体5.DTD文档声明7.❗❗各大标签介绍1. `1.浏览器http理解 1.浏览器和服务器 1. 什么是浏览器 像qq一样是安装在电脑上的软件 2. 浏览器功能 将网页渲染出来给用户查看 让用户能够通过浏览器和网页交互 （点击，输入，拖动等操作和网页交互） 五款主流浏览器（IE,chro
HTML5学习笔记：优势、语法与表单元素详解
HTML5的学习笔记涵盖了从基础语法到高级特性的全面内容，包括语义化、表单设计、多媒体处理和现代通信技术，这对于提升网页开发效率和兼容性具有重要意义。对于前端开发者而言，掌握HTML5不仅是技术更新的要求，也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值