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

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

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

  • 第一章
    • 任务1-1
    • 任务1-2
    • 任务1-3
    • 任务1-4

第一章

图片素材路径根据实际情况进行修改

任务1-1

<!--菜单导航栏 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-->

运行结果

效果

任务1-2

<!--购物分类 start-->
<ul class = "menu">
    <li>女装</span></li>
    <li></span><a herf="#">上衣</a>
        </li>
    <li><a herf="#">下装</a>
        </li>
    <li><a herf="#">连衣裙</a>
        </li>
    <li><a herf="#">内衣</a>
        </li>
    <li>男装</li>
    <li></span><a herf="#">T恤</a>
        </li>
    <li><a herf="#">短裤</a>
        </li>
    <li><a herf="#">衬衫</a>
        </li>
    <li>童装</li>
    <li></span><a herf="#">上衣</a>
        </li>
    <li><a herf="#">裤子</a>
        </li>
    <li>运动</li>
    <li></span><a herf="#">运动裤</a>
        </li>
    <li><a herf="#">跑鞋</a>
        <span class="right_arrow"></li>
</ul>

<!--购物分类 end-->

运行结果

任务1-3

<!--中间区 start-->
<div class ="middle">
    <h1 class ="pic_title">最新上架</h1>
    <div class="pic_list">
        <dl>
            <div><a href ="shoppingDetail.html" target="_blank">
                <img src="C:\Users\Administrator\Desktop\yifu1.jpg"/></a></div>
            <dt>¥198.00 元
                324 人购买</dt>
            <dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd>
        </dl>
        <dl>
            <div><img src="C:\Users\Administrator\Desktop\yifu2.jpg"/></div>
            <dt>¥69.00 元
                534 人购买</dt>
            <dd>2015夏新款韩版 透气舒适简约半截袖T恤衫</dd>
        </dl>
        <dl>
            <div><img src="C:\Users\Administrator\Desktop\yifu3.jpg"/></div>
            <dt>¥160.00 元
                643 人购买</dt>
            <dd>韩版甜美气质亮片热气球字母中长款圆领短袖T恤</dd>
        </dl>
        <dl>
            <div><img src="C:\Users\Administrator\Desktop\yifu4.jpg"/></div>
            <dt>¥210.00 元
                678 人购买</dt>
            <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
        </dl>
        <!--其他商品展示代码相似,此处省略-->
        
    </div>
</div>
<!--中间区 end-->

运行结果

任务1-4

<div class ="foot_line"></div>
<p align="center" class="padding-top">Copyright  2015-2020  Q- Walking
    Fashion E&S 漫步时尚广场(QST教育)版权所有<br/> 中国青岛 高新区广博路325号
    青软教育集团    咨询热线:400- 658- 0166   400- 658- 1022</p>
<p align="center"><img src="C:\Users\Administrator\Desktop\foot_pic.jpg"></p>
<div class="clear"></div>
</div>

运行结果

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