JavaScript_Homework1

JavaScript作业一：基本网页编辑

最终效果

代码与效果

• 菜单导航栏
  

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

• 左侧导航栏
  

<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>

• 商品展示区
  

    <div class="middle">
        <h1 class="pic_title">最新上架</h1>
        <div class="pic_list">
            <dl>
                <div><a href="">
                    <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>夏新款韩版 透气舒适简约半截袖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">735人购买</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">634人购买</span></dt>
                    <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
            </dl>

            <dl>
                <div><img src="images/shopshow/yifu7.jpg"></div>
                    <dt><span class="price">¥69.00元</span>
                        <span class="font12">734人购买</span></dt>
                    <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
            </dl>

            <dl>
                <div><img src="images/shopshow/yifu8.jpg"></div>
                    <dt><span class="price">¥239.00元</span>
                        <span class="font12">534人购买</span></dt>
                    <dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd>
            </dl>
        </div>
        <h1 class="pic_title">最新动态</h1>
        <div class="pic_list">
            <dl>
                <div><img src="images/shopshow/dress5.jpg"></div>
                <dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
            </dl>
            <dl>
                <div><img src="images/shopshow/dress6.jpg"></div>
                <dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
            </dl>
            <dl>
                <div><img src="images/shopshow/dress7.jpg"></div>
                <dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
            </dl>
            <dl>
                <div><img src="images/shopshow/dress8.jpg"></div>
                <dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd>
            </dl>
        </div>
    </div>

• 右侧展示区

<div class="right_nav">
        <h1 class="notice_title">热门推荐</h1>
        <div class="pic_list3">
            <li><img src="images/shopshow/s1.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s2.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s3.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s4.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s5.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s6.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s7.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s8.jpg"><dd>夏新款韩版</dd></li>
            <li><img src="images/shopshow/s9.jpg"><dd>夏新款韩版</dd></li>
        </div>
</div>

• 版权区域
  

    <div class="cnmp">
            <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="images/foot_pic.jpg"></p>
        <div class="clear"></div>
    </div>

最终效果