第三次作业

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量136 收藏
点赞数 2
文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlz_yjs/article/details/140878509
版权

登录页代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商网站 - 登录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
 
 
<div class="content">
    <h1>登录</h1>
    <form action="./作业1.2.html" method="post">
        <label for="username">用户名:</label><br>
        <input type="text" id="username" name="username" required><br>
        <label for="password">密码:</label><br>
        <input type="password" id="password" name="password" required><br>
        <br>
        <input type="submit" value="登录">
    </form>
</div>
 
</body>
</html>

运行截图：

商品页代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示页</title>
    <style>
        a{
            display: block;
            width: 194px;
            height: 344px;
            border-top: 1px solid #f2f2f2;
            border-left: 1px solid #f2f2f2;
            padding-top: 22px;
            padding-left: 20px;
            padding-right: 20px;
            text-decoration: none;
        }
        ul li{
            display: inline-block;
        }
        img{
            width: 194px;
            height: 198px;
        }
        .pro-introduce{
            width: 194px;
            height: 40px;
            padding-top: 10px;
        }
        .pro-introduce>span{
            font-size: 14px;
            color: #9b9b9b;
            line-height: 20px;
        }
        .pro-price{
            height: 25px;
            padding-top: 6px;
            line-height: 1.6;
            font-size: 18px;
            color: red;
        }
        .pro-boss{
            width: 194px;
            height: 17.8px;
            font-size: 12px;
            color: #9b9b9b;
            line-height: 17px;
        }
        
    </style>
</head>
<body>
    
    <div class="container">
        <ul>
            <li>
                <a href="./作业1.3.html">
                    <img src="https://gw.alicdn.com/imgextra/i2/2037040441/O1CN01yqOrIO1F81Uo5zmGm_!!2037040441.jpg_Q75.jpg_.webp" alt="">
                    <div class="pro-introduce">
                        <span>礼物24期免息BURBERRY 女装 切尔西中长款 Trench 风衣</span>
                    </div>
                    <div class="pro-price">
                        <span>￥21500</span>
                    </div>
                    <div class="pro-boss">
                        <span>博柏利官方旗舰店</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="./作业1.3.html">
                    <img src="https://gw.alicdn.com/imgextra/i2/2037040441/O1CN01yqOrIO1F81Uo5zmGm_!!2037040441.jpg_Q75.jpg_.webp" alt="">
                    <div class="pro-introduce">
                        <span>礼物24期免息BURBERRY 女装 切尔西中长款 Trench 风衣</span>
                    </div>
                    <div class="pro-price">
                        <span>￥21500</span>
                    </div>
                    <div class="pro-boss">
                        <span>博柏利官方旗舰店</span>
                    </div>
                </a>
            </li>
           
        </ul>
    </div>
</body>
</html>

运行截图：

商品页代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0px ;
        }
        a{
            text-decoration: none;
            color: gray;
        }
        li,span{
            list-style: none;
            display: inline-block;
            color: gray;
        }
        .boxB1{
            width: 100%;
            height: 70px;
        }
        
        
        .st{
            width: 15px;
            height: 15px;
            background-image: url(https://img0.baidu.com/it/u=2802467134,2008148961&fm=253&fmt=auto&app=138&f=JPG?w=300&h=300);
            background-size: 89%;
            background-position: center;
            float: left;
        }
        
        
        
        .boxB2Img{
            width:30%;
            height: 300px;
          
            margin-left: 50px;
            margin-top: 10px;
            float: left;
            
        }
        .boxB2W{
            width: 30%;
            height: 600px;
            margin: auto;
           
            margin-top: 30px;
           
        }
        .money{
            width: 200px;
            height: 30px;
            margin: 10px 10px 10px 10px;
        }
        .money > span{
            color: chocolate;
            font-size: 30px;
        }
        .cc{
            width: 600px;
            height: 200px;
         
        }
        .boxB1img1{
            width: 50px;
            height: 40px;
        }
        .cc1{
            width: 170px;
            height: 50px;
            background-color: rgb(211, 81, 21);
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            display: inline-block;
            text-align: center;
        }
        .cc2{
            width: 170px;
            height: 50px;
            background-color: orange;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            display:inline-block;
            margin-left: -10px;
            text-align: center;
        }
        .cc span{
            font-size: 20px;
            font-weight: 1000;
            color: white;
        }
        
    </style>
</head>
<body>
    <div class="boxMax">
        <div class="boxB1">
            <div>
                <div class="boxB1img1"></div>
                <span class="boxB1span">博柏利官方旗舰店</span>
                <a href=""></a>
                </div>
            </div>
            <div>
                <table>
                    <tr>
                    <div  width="100px" height="20px" style="background-color: rgb(255, 238, 230);">
                        <td>5.0</td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                        <td><div class="st"></div></td>
                    </div>
                        <td width="15px"></td>
                        <td>
                            <span>平均13小时发货</span>
                        </td>
                        <td width="15px"></td>
                        <td>
                            <span>客服平均10秒回复</span>
                        </td>
                        <td width="15px"></td>
                        <td>
                            <span>物流体验良好</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <a href=""></a>
            </div>
            <div>
                <a href=""></a>
            </div>
        </div>
        <div class="boxB2">
            <div class="boxB2Img"><img src="https://gw.alicdn.com/imgextra/i2/2037040441/O1CN01yqOrIO1F81Uo5zmGm_!!2037040441.jpg_Q75.jpg_.webp" alt="" width="350px"></div>
            <div class="boxB2W">
                <h1>礼物24期免息BURBERRY 女装 切尔西中长款 Trench 风衣</h1>
                <table>
                    <tr>
                        <div class="money">
                            <span>
                                ￥21500
                            </span>
                            <a href=""></a>
                        </div>
                    </tr>
                   
                    <tr>
                        <div class="cc">
                            <div class="cc1"><span>立即购买</span></div>
                            <div class="cc2"><span>加入购物车</span></div>
                        </div>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

运行截图：

zoulingzhi_yjs
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
国科大学习资料–模式识别--第三次作业
无名何许人的博客
01-31 759
国科大学习资料–模式识别–第三次作业（刘成林老师主讲） 题目 解答
软件工程第三次作业
lpZhouYi的博客
05-04 3597
软件工程第三次作业 某交易所规定给经纪人的手续费计算方法如下:总手续费等于基本手续费加上与交易中的每股价格和股数有关的附加手续费。如果交易总金额少于1 000元，则基本手续费为交易金额的8. 4%;如果交易总金额在1 000元到10 000元之间,则基本手续费为交易金额的5%,再加34元;如果交易总金额超过10 000元，则基本手续费为交易金额的4%加，上134元。当每股售价低于14 元时，附加...
图论第三次作业
weixin_45940821的博客
03-12 1373
图论第三次作业（教材：图论与网络最优化算法龚劬编）
《操作系统》第三次作业
执念斩长河
05-01 718
第三次作业是学习进程管理，笔者竟然没有学习明白，课下还需要不断翻书回看才是。第三次作业一共两个实验
数据库第三次作业
m0_62848118的博客
03-16 802
计量经济学 第三次 作业
xllzuibangla的博客
05-23 2145
1、描述行统计 2、回归 解释： 3、 4、
BUAA数据结构与程序设计第三次作业复习
zxy13149285776的博客
05-10 1030
最近的进度杠杠的啊啊啊啊快点考完期中考试让我去打排球！！！！！！（but游戏建模还没搞，泪目）
python第三次作业
qazplmygvwei的博客
04-14 593
1234。
大数据分析课程第三次作业(最大密度子图)
程哥哥的一亩三分地
05-13 2411
大数据分析课程第三次作业(最大密度子图) ​ 参考：《胡伯涛: 最小割模型在信息学竞赛中的应用》 一、作业题： 二、答案： 测试数据集：bio-CE-GT.txt，数据集来源：https://networkrepository.com/bio-CE-GT.php 运行结果如下： 可运行代码如下(点击可打开)： #include<iostream> #include<cstring> #include<cmath> #include<algori
国科大数据挖掘刘莹第三次作业
01-13
国科大数据挖掘刘莹第三次作业
数据库第三次作业.pdf
05-11
国科大数据库作业3详细过程以及完整答案，没有学过数据库的可以来看
HCIA第三次作业.topo
04-26
HCIA第三次作业.topo
第三次作业已完成！哈哈哈
04-26
【标题】：“第三次作业已完成！哈哈哈” 在信息技术领域，完成作业或项目往往是学习过程中的重要环节，特别是对于编程和实验性的课程来说。这里的“第三次作业”可能指的是一个学生或者团队在学习过程中面临的某个...
江苏开放大学形成性考核作业建筑材料第三次作业.pdf
03-05
江苏开放大学形成性考核作业建筑材料第三次作业.pdf 该资源是江苏开放大学的一份形成性考核作业，主题是建筑材料。该作业共有两部分，第一部分是是非题，第二部分是单项选择题。 在是非题部分，共有10道题，涵盖了...
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 458
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 264
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 201
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
合工大java第三次作业
10-21
合工大Java第三次作业包括两个部分，第一部分是关于Java程序图形界面的开发，包括引入哪些包、布局管理器的作用、Frame类和Panel类的默认布局器、FlowLayout布局方式的特点、事件的概念和处理事件的机制等内容。第二部分是编写一个Java程序，创建一个窗体，并实现交互，包括在窗体内单击鼠标左键绘制一个绿圆、单击鼠标右键绘制一个红色方框、双击鼠标左键清空所有已画圆和方的功能。作业要求在3月27日之前提交，命名方式为学号+姓名+作业3。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值