JavaScript_Homework3

最新推荐文章于 2024-09-21 23:59:03 发布
最新推荐文章于 2024-09-21 23:59:03 发布
阅读量654 收藏 7
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37777236/article/details/79782953
版权

JavaScript作业三 CSS应用

JavaScript作业三

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

这里写图片描述

    <!DOCTYPE html>
<html>
<head>
    <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>
    <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>
</body>
</html>

【任务4-2】使用CSS样式美化购物列表页面中的商品展示区

这里写图片描述

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
        *{padding:0;margin:0}
        li,ul{list-style:none}
        .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>
    <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>
</body>
</html>

【任务5-1】使用CSS样式实现购物列表页面的整体布局

这里写图片描述

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/show_frame.css">
</head>
<body>
    <!--顶部区域-->
    <div class="top_bg">
        <div class="top_content"></div>
    </div>
    <!--顶部区域end-->

    <div class="clear"></div>
    <!--logo和bannner start-->
    <div class="logo">
        <a href="../index.html"><img src="images/logo.jpg"></a>
        <img src="images/banner.jpg" class="floatr">
    </div>
      <!--logo和bannner end-->
    <!--菜单导航栏start-->
    <div class="nav_bg"></div>
    <!--菜单导航栏end-->
    <!--中间部分start-->
    <div class="main">
        <!--购物分类start-->
        <ul class="menu"></ul>
        <!--购物分类end-->
        <!--中间区start-->
        <div class="middle">
            <h1 class="pic_title">最新上架</h1>
            <div class="pic_list"></div>
            <!--品牌活动-->
            <h1 class="pic_title">品牌活动</h1>
            <div class="pic_list2"></div>
        </div>
    <!--中间部分end-->  
    <!--右侧热门推荐start-->
    <div class="right_nav">
        <h1 class="notice_title">热门推荐</h1>
        <ul class="pic_list3"></ul>
    </div>
    <!--右侧热门推荐end-->
</div>
<!--中间部分end--><!--底部start-->
<div class="clear"></div>
<div class="footer">
<div class="foot_title"></div>
<ul class="foot_list"></ul>
<div class="clear"></div>
<div class="foot_line"></div>
</div>
</body>
</html>

【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分

这里写图片描述

    <!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>漫步时代广场-购物列表-底部模块</title>
    <style type="text/css">
    body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
    *{padding:0;margin:0}
    li,ul{list-style:none}
    img{border:none}
    .font16{font-size:16px;font-weight:700}
    .clear{clear:both}
    .floatl{float:left}
    .footer{width:100%;background:#efefef;height:310px;margin-top:15px}
    .foot_title{background:#6a6665;width:100%;height:40px;padding-top:8px}
    .foot_pic{margin:0 auto;width:1200px}
    .padding-bottom{padding-bottom:10px}
    .padding-top{padding-top:10px}
    .foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px}
    .line1{background:url(../images/line1.jpg) no-repeat;width:20px;height:100px;display:inline-block}
    .red1{background:url(../images/red1.jpg) no-repeat;width:35px;height:31px;display:block}
    .red2{background:url(../images/red2.jpg) no-repeat;width:35px;height:31px;display:block}
    .foot_list>li{float:left;width:170px}
    .foot_list{width:1100px;margin:0 auto;padding-top:20px}
     .foot_list li ul{padding-left:10px}
</style>
</head>
<body>
<!-- 底部 start--><Br/>g
<table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#6a6665" height="35" class="foot_bg">

    <tr>
        <td class="padding-top">
            <table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="20%" align="center"><img src="images/gray1.jpg"></td>
                    <td width="20%" align="center"><img src="images/gary2.jpg"></td>
                    <td width="20%" align="center"><img src="images/gray3.jpg"></td>
                    <td width="20%" align="center"><img src="images/gray4.jpg"></td>
                    <td width="20%" align="center"><img src="images/gray5.jpg"></td>

   </tr>
</table>
</td>
</tr>
<tr>
    <td bgcolor="#efefef" class="foot_line padding-top">
        <table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
                <td align="center" valign="top"><img src="images/red1.jpg"><br>
                    <img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
                        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr><td class="font16 padding-bottom">新手指导</td></tr>
                            <tr><td>用户注册</td></tr>
                            <tr><td>电话下单</td></tr>
                            <tr><td>购物流程</td></tr>
                            <tr><td>购物保障</td></tr>
                            <tr><td>服务协议</td></tr>
                        </table>
                     </td>

                    <td align="center" valign="top"><img src="images/red2.jpg"><br>
                    <img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
                        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr><td class="font16 padding-bottom">支付方式</td></tr>
                            <tr><td>货到付款</td></tr>
                            <tr><td>商城卡支付</td></tr>
                            <tr><td>支付宝 网银支付</td></tr>
                            <tr><td>优惠卷</td></tr>

                        </table>


                    <td align="center" valign="top"><img src="images/red3.jpg"><br>
                    <img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
                        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr><td class="font16 padding-bottom">配送方式</td></tr>
                            <tr><td>闪电发货</td></tr>
                            <tr><td>满百包邮</td></tr>
                            <tr><td>配送范围及时间</td></tr>
                            <tr><td>验收及签收</td></tr>
                            <tr><td>服务协议</td></tr>

                        </table>
                    </td>
                    <td align="center" valign="top"><img src="images/red4.jpg"><br>
                    <img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
                        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr><td class="font16 padding-bottom">售后服务</td></tr>
                            <tr><td>退换货协议</td></tr>
                            <tr><td>关于发票</td></tr>
                            <tr><td>退换货流程</td></tr>
                            <tr><td>退换货运费</td></tr>

                        </table>
                    </td>
                    <td align="center" valign="top"><img src="images/red5.jpg"><br>
                    <img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
                        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr><td class="font16 padding-bottom">关于账号</td></tr>
                            <tr><td>修改个人信息</td></tr>
                            <tr><td>修改密码</td></tr>
                            <tr><td>支付宝 网银支付</td></tr>
                            <tr><td>找回密码</td></tr>

                        </table>
                    </td>
                    <td align="center" valign="top"><img src="images/red6.jpg"><br>
                    <img src="images/line1.jpg"/></td>
                    <td width="15%" valign="top">
                        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr><td class="font16 padding-bottom">优惠活动</td></tr>
                            <tr><td>竞拍须知</td></tr>
                            <tr><td>抢购须知</td></tr>

                        </table>
                    </td>

        </tr></table>
    </td>
</tr>
<tr>
    <td bgcolor="#efefef" align="center" class="padding-top">
        Copyright 2015-2020 Q- Walking
                Fashion E&S漫步时尚广场（QST教育）版权所有<br/> 湖南娄底 湖南人文科技学院 
             阳光五栋 咨询热线：187-1185-7095<br/>
             <img src="images/foot_pic.jpg"></td>
         </tr>
     </tr>

</td>

</table>
</body>
</html>
qq_37777236
关注
实验二 使用CSS样式美化购物列表页面中的菜单导航以及商品展示
m0_49043036的博客
10-31 3215
一、实验目的 掌握CSS定义文字、背景图片、超链接控制、列表等常用属性的设置 二、实验要求 在购物列表页面中，通过<ul>标签来实现菜单导航栏，然后使用css样式控制菜单栏的位置和样式，效果如下： 使用CSS样式美化购物列表页面中的商品展示区，商品展示区分为“最新上架”和“品牌活动”两部份，两模块采用div-ul-li方式排版，效果如下： 最新上架部分： 品牌活动部分： 具体代码如下（仅供参考）： <!DOCTYPE html PUBLIC "-//...
CSS应用
qq_37655062的博客
03-25 427
【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏。【任务4-2】使用CSS样式美化购物列表页面中的商品展示区。【任务5-1】使用CSS样式实现购物列表页面的整体布局。【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分。
WEB基础实训 漫步时尚广场项目.zip
01-01
web基础实训青软实训 漫步时尚广场项目源代码以及图片等 真的很有用啊 希望对你们有帮助
js,作业三
programmer_wbb
03-28 709
【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtm...
JavaScript_Homework1
qq_37777236的博客
03-13 447
JavaScript作业一：基本网页编辑 最终效果 代码与效果 菜单导航栏 &lt;div class="nav_bg"&gt; &lt;div class="nav_content"&gt; &lt;ul class="nav"&gt; &lt;li&gt;&amp
实验4 css的基本使用,李老师实验2-4CSS设计导航菜单
weixin_36371906的博客
08-03 208
这篇文章总字数为：2974字，有4张图存于本站服务器作业预览：one纵向导航：two横向导航：实现代码：one纵向导航：小浣熊实验2-4*{margin:0;padding:0;}ul{list-style-type:none;}.top{display:block;background-color:rgb(12,137,243);color:#fff;width:160px;text-al...
JavaScript_Homework
03-26
这个"JavaScript_Homework"很可能是某个学习者或教师为提升JavaScript技能而设计的一系列练习题目或者项目。在JavaScript_Homework-master这个压缩包中，我们可以期待找到一系列与JavaScript相关的源代码文件、练习...
JavaScript_homework5
03-21
3. **函数**：函数是JavaScript中的重要组成部分，用于封装可重用的代码。可能涉及函数定义、参数传递、返回值以及匿名函数和箭头函数的使用。 4. **对象**：JavaScript对象是键值对的集合，可以通过属性和方法进行...
JavaScript_1:javascript_1_homework_files
03-27
JavaScript1 计算器： ： Temperature_Converter： : 体重转换者： ://ligopsychakis-michalis.github.io/JavaScript_1/Week2/weight-converter/ 冥想应用程式： ：
AJS_homework_3
03-17
标题"AJS_homework_3"很可能是一个JavaScript编程作业或项目，可能是从GitHub或其他代码托管平台下载的。这个作业或项目可能包含多个JavaScript文件和其他相关资源，用于实现特定的功能或者解决某个编程问题。由于...
Html(二)
huluxiongdi的博客
03-23 1919
【任务2-1】实现Q-Walking E&amp;S购物模块首页的设计。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;漫步时尚广场-购物栏目&lt;/title&gt; &
5个你可能不知道的CSS属性
菜鸟丹丹的博客
08-15 749
每年都有新的CSS属性被标准化，并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松，创造出新颖美丽的网站。 在这篇文章中，我将介绍5个相对较新的CSS属性，你可能从来没有听说过，我觉得很有趣。 本文的目的是带领你总览这些CSS的属性，告诉你可以使用哪些值，它们的使用场景，还有一些例子。 具体来说，这五个CSS属性可以分为以下三类： 书写显示（font-di
HTML实现用户注册界面
热门推荐
racy696的博客
08-21 4万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用户注册页面</title> </head> <body> <h3>注册页面</h3> <hr /> <form action="#" method="get">
《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-3
weixin_43721056的博客
05-20 1974
第三章任务3-1任务3-2 注: 素材图片路径需要根据实际情况修改 任务3-1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册-Q-Walking E&S</title> </head> <body> <!-- 顶部区域start --> <table width="100%"
作业2
qq_38259404的博客
03-19 961
shoppingindex.html&lt;!DOCTYPE html&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&gt; &lt;title&gt;漫步时尚广场-购物栏目&
如何使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件
flytam的博客
09-21 580
如何使用现代 Web 技术创建一个 Chrome 插件。通过结合使用 React、TypeScript、TailwindCSS 和 Vite，我们可以快速高效地开发出功能强大的扩展。文章从环境设置、项目创建、组件开发、样式设计到最终的打包和发布，提供了全面的指导
响应式CSS 媒体查询——WEB开发系列39
一条晒干的咸鱼的博客
09-15 1855
CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
【CSS in Depth 2 精译_036】5.6 Grid 网格布局中与对齐相关的属性 + 5.7本章小结
最新发布
PeacefulWinter的博客
09-21 1018
本篇为《CSS in Depth》全新第2版5.6与5.7小节内容，主要介绍了网格布局在设置元素对齐时与上一章 Flexbox 布局的一些关联，同时介绍了网格布局特有的对齐属性。为加深理解，我还特地结合Word中对齐文本的相关操作进行了截图对比。建议收藏。
function show(hw_id) { let homework = document.getElementById('homeworkId') homework.setAttribute("value",hw_id) let sub = document.getElementById('sub') sub.submit() }
07-11
这段代码是一个JavaScript函数，名为`show`。它接受一个参数`hw_id`。 函数的主要功能是通过`hw_id`来设置一个input元素的value属性，并且在提交一个form表单。具体的实现步骤如下： 1. 通过`document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值