菜单 搜索
首页 前端知识 第三次作业

第三次作业

2024-08-21 10:08:29 前端知识 前端哥 376 759 我要收藏

<!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{
            text-decoration: none;
            color: #999;
            font-size: 12px;
        }
        a:hover{
            font-size: 12px;
            text-decoration: underline;
        }
 
        .A{
            color: #999;
            font-size: 12px;
            background-color: #fff8f0;
            padding-top: 8px;
            height: 30px;
            text-align: center; 
        }
 
        .B{
            width: 100%;
            height: 475px;
            background-color: #FA2C19;
            background-repeat: no-repeat;
            background-size: contain;
        }
 
        .C{
            color: #999;
            font-size: 12px; 
            text-align: center; 
        }
 
        .B1{
            width: 300px;
            height: 336px;
            position: relative;
            top: 70px;
            left: 670px;
        }
 
        .B11{
            background-image: url(./image.png);
            background-size: auto;
            color: #FF860D; 
            font-size: 12px; 
            height: 28px; 
            padding: 6px 5px 6px 5px; 
            text-align: center;
        }
 
        .B1>div{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" alt="">
            <img src="https://storage.jd.com/retail-mall/jdc_user_passport/pc/user/passport/1.1.1/css/i/l-icon.png" alt="">
            <a href="https://wj-dongjian.jd.com/q/61a05143f2ec2b00b35e40a6" style="position: relative; left: 550px;">
                <img src="https://storage.jd.com/retail-mall/jdc_user_passport/pc/user/passport/1.1.1/css/i/q-icon.png" alt="">
                登入页面,改进建议
            </a>
        </p>
    </a>
    </div>
    <div class="A">
            依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
            <a href="" style="color: #333;">《京东隐私政策》</a>
            已上线，将更有利于保护您的个人隐私。
    </div>
    <div class="B">
        <div class="B1">
            <div class="B11">
                    京东不会以任何理由要求您转账，谨防诈骗
            </div>
            <div style="background-color: white; height: 258px; padding: 32px 16px 12px 16px;">
                <div style="width: 300px; height: 18px; margin-bottom: 16px;">
                    <span style="color: #FA2C19; font-size: 16px;"><b>密码登录</b></span>&nbsp;&nbsp;&nbsp;
                    <span style="color: #666;"><b>短信登录</b></span>
                </div>
                <div>
                    <form action="">
                        <p><input type="text" style="width: 260px; height: 33px;" placeholder="账户名/手机号/邮箱"></div></p>
                        <input type="password" style="width: 260px; height: 33px;" placeholder="密码">
                        <div style="padding: 8px 0px 8px 0px; position: relative; left: 218px;"><a href="">忘记密码</a></div>
                        <div><button type="submit" style="background-color: #f04f0f; border: 0px; width: 268px; height: 34px; border-radius: 5px; color: white;"><b>登录</b></button></div>
                    </form>
                </div>
            </div>
            <div style="background-color: #F6F6F6; height: 50px; width: 300px;  position: relative; left: 670px ;">
                <a href="" style="color: #595959; position: relative; top: 13px; left: 230px;">立即注册</a>
            </div>
        </div>
    </div>
    <div style="text-align: center;">
      <p>
        <a href="">关于我们</a>&nbsp;&nbsp;|&nbsp;
        <a href="">联系我们</a>&nbsp;&nbsp;|&nbsp;
        <a href="">人才招聘</a>&nbsp;&nbsp;|&nbsp;
        <a href="">商家入驻</a>&nbsp;&nbsp;|&nbsp;
        <a href="">广告服务</a>&nbsp;&nbsp;|&nbsp;
        <a href="">手机京东</a>&nbsp;&nbsp;|&nbsp;
        <a href="">友情链接</a>&nbsp;&nbsp;|&nbsp;
        <a href="">销售联盟</a>&nbsp;&nbsp;|&nbsp;
        <a href="">京东社区</a>&nbsp;&nbsp;|&nbsp;
        <a href="">京东公益</a>
      </p>
    </div>
    <div class="C">
        Copyright © 2004-2024  京东JD.com 版权所有
    </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>作业3.2</title>
    <style>
        .B>div{
            display: inline-block;
            margin-left: 110px;
            position: relative;
            left: 30px;
        }
        .B1{
            font-size: 16px;
 
            /* 使字体加粗 */
            font-weight: bold;
        }
        .B2{
            font-size: 14px;
            color: #666;
        }
 
        .C{
            width: 1350px;
            height: 700px;
            background-color: rgb(243, 243, 243);
            color: #666;
        }
        .C>div{
            background-color: #fff;
            float: left;
            margin: 5px;
        }
        .C>div>div>div>span:nth-child(2){
            font-size: 20px;
            font-weight: bold;
        }
        .C>div>div>div>span:nth-child(3){
            font-size: 15px;
        }
 
        span{
            color: red;
        }
    </style>
</head>
<body>
    <div class="">
        <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" alt="" height="40px" style="margin-bottom: -8px;">
        <input type="text" style="height: 25px; width: 400px; margin-bottom: 5px; border-color: red; position: relative; left: 150px;" placeholder="华为mate60">
        <button style="padding: 0px; background-color: red; border-color: red;  position: relative; left: 145px; top: 7px;">
            <img src="./image copy 2.png" alt="" style="width: 55px; height: 25px;">
        </button>
        <div style="border: 0.5px solid #666; width: 120px; height: 30px; text-align: center; color: red; 
        display: inline-block;  position: relative; left: 160px; top: 7px;"><img src="./购物车图标.png" alt="" height="25px">我的购物车</div>
    </div>
    <hr color="red">
 
 
    <div class="B">
        <div>
            <div><div style="font-size: 16px; color: white; background-color: red ;width: 60px; border-radius: 15px; text-align: center;"><b>精选</b></div></div>
            <div style="font-size: 14px; color: red;">猜你喜欢</div>
        </div>
        <div>
            <div class="B1">智能先锋</div>
            <div class="B2">大电器城</div>
        </div>
        <div>
            <div class="B1">居家优品</div>
            <div class="B2">品质生活</div>
        </div>
        <div>
            <div class="B1">超市百货</div>
            <div class="B2">百货生鲜</div>
        </div>
        <div>
            <div class="B1">时尚达人</div>
            <div class="B2">美妆穿搭</div>
        </div>
        <div>
            <div class="B1">进口好物</div>
            <div class="B2">京东国际</div>
        </div>
    </div>
 
 
    <div class="C">              
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="./41a6224b5ade4db5.jpg.avif" alt="" width="230px" height="230px">
                </div>
                <div><p class="more2_info_name">JBL T280TWS X2 真无线<br>蓝牙耳机 半入耳音乐耳机...</p>
                </div>
                <div>
                    <div>
                        <span>￥</span>
                        <span>239.</span>
                        <span>00</span>
                    </div>
                </div>
            </div>
    </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{
            background-color: #E3E4E5;
            height: 30px;
        }
        .A>div{
            display: inline-block;
            color: #999;
            font-size: 12px;
            margin-top: 5px;
        }
        .A>div:nth-child(2)~div{
            margin-left: 20px;
        }
 
        .C>div{
            display: inline-block;
        }
 
        .D{
            height: 40px;
            background-color: rgb(243, 243, 243);
        }
        .D>div{
            margin-top: 6px;
            display: inline-block;
            font-size: 12px;
        }
 
        .E1{
            width: 1000px;
            height: 160px;
            border:1.5px solid rgb(243, 243, 243);
            border-top:3px solid #6c6a6af5;
        }
        .E1>div{
            display: inline-block;
            font-size: 12px;
        }
        .E1>div:nth-child(1)~div{
            position: relative;
            bottom: 45px;
        }
 
        a{
            color: #666666;
 
            /* 去除下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="A">
        <div style="width: 75px;">
            京东首页
        </div>
        <div style="width: 200px;">
            湖南
        </div>
        <div>
            用户名：知秋
            <select name="" id=""  style="border: 0px; background-color: #E3E4E5;">
            </select>
        </div>
        <div>我的订单</div>
        <div>我的京东
            <select name="" id=""  style="border: 0px; background-color: #E3E4E5;">
            </select>
        </div>
        <div>企业采购</div>
        <div>客户服务
            <select name="" id=""  style="border: 0px; background-color: #E3E4E5;">
            </select>
        </div>
        <div>网站导航
            <select name="" id=""  style="border: 0px; background-color: #E3E4E5;">
            </select>
        </div>
        <div>手机京东</div>
        <div>网站无障碍</div>
    </div><br>
 
    <div>
        <img src="https://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@2x.png" alt="" width="134px" height="42px">
        <input type="text" style="border-color: red; width: 270px; height: 24px; position: relative; left: 538px;">
        <button type="button" style="background-color: red; color: white; border-color: red; height: 30px; position: relative; left: 533px;"><b>搜索</b></button>
    </div>
    <br>
 
    <div class="C">
        <div>
            <span style="font-size: 16px; color: red;"><b>全部商品</b></span>
            <span style="font-size: 14px; color: red;"><b>3</b></span>
        </div>
        <div>
            <span style="font-size: 12px; position: relative; left: 660px;">配送至：</span>
            <select name="" id="" style="position: relative; left: 660px;">
                <option value="">湖南长沙县白沙镇</option>
            </select>
        </div>
    </div>
    <br>
 
    <div class="D">
        <div style="width: 130px;"><input type="checkbox">全选</div>
        <div style="width: 420px;">商品</div>
        <div style="width: 120px;">单价</div>
        <div style="width: 130px;">数量</div>
        <div style="width: 85px;">小计</div>
        <div>操作</div>
    </div>
    <div class="E">
        <div>
            <input type="checkbox">&nbsp;&nbsp;<b style="font-size: 12px; color: #666;">联合促销活动</b>
            <img src="./log.png" alt="">
        </div>
        <div class="E1">
            <div style="position: relative; padding-top: 30px;">
                <input type="checkbox" style="position: relative;  bottom: 60px;">
                <img src="./233830.png" alt="">
            </div>
            <div>奥亚森（AOYASEN）石雕门墩一对貔貅麒麟别墅门口会所庭院门当户对中式</div> 
            <div style="position: relative; left: 200px;">
                <span>￥1600.00</span>
                <div>
                    <select name="" id="" style="border-color: red; color: red;">
                        <option value="">促销</option>
                    </select>
                </div>
            </div>
            <div style="position: relative; left: 250px;">
                    <button id="reduce">-</button>
                    <input type="number" id="count" value="3" style="width: 46px;">
                    <button id="add">+</button>
                <div style="text-align: center; color: #AAAAAA;">有货</div>
            </div>
            <div style="position: relative; left: 300px;"><strong>￥4800.00</strong></div>
            <div style="position: relative; left: 350px;">
                <a href="">删除</a><br>
                <a href="">移入关注</a>
            </div>
        <div class="E1">
            <div style="position: relative; padding-top: 15px;">
                <input type="checkbox" style="position: relative;  bottom: 60px;">
                <img src="./233834.png" alt="">
            </div>
            <div>奥亚森（AOYASEN）石雕大象一对汉白玉青石晚霞红看门石象庭院别墅公司</div> 
            <div style="position: relative; left: 200px;">
                <span>￥1600.00</span>
                <div>
                    <select name="" id="" style="border-color: red; color: red;">
                        <option value="">促销</option>
                    </select>
                </div>
            </div>
            <div style="position: relative; left: 250px;">
                    <button id="reduce">-</button>
                    <input type="number" id="count" value="3" style="width: 46px;">
                    <button id="add">+</button>
                <div style="text-align: center; color: #AAAAAA;">有货</div>
            </div>
            <div style="position: relative; left: 300px;"><strong>￥4140.00</strong></div>
            <div style="position: relative; left: 350px;">
                <a href="">删除</a><br>
                <a href="">移入关注</a>
            </div>
        </div><br>
    </div>
</body>
</html>

CSS盒子模型

1.盒子的概念
css盒子本质上上是一个盒子，由内容区域（height）内间距区域（padding）边框区域（borde外 
距区域（margin）四个元素组成，如下图。          

   

2.盒子的属性
css盒子的基本属性分为宽高，背景颜色，背景属性，边框属性

(1)宽高
每个盒子都需要一个宽高数值，如果不给的话你会发现这个盒子并不会显示出来。宽高值的单位有以下常用的：

1.像素（px）

2.百分比（%）

(2)背景
1.可以使用自定义的颜色给盒子背景染成纯色

2.可以将盒子的背景变成自定义的图片

(3)背景属性 
可以自定义盒子背景的大小以及对齐等等属性

(4)边框属性     
1.none: 无边框样式

2.solid: 实线边框样式

3.dashed: 虚线边框样式

4.dotted: 点线边框样式

5.double: 双线边框样式
 


 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16315.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

nlohmann/json的介绍和使用详解

2024-11-02 11:11:09

使用python读写txt和json（jsonl）大文件

2024-11-02 11:11:02

python将字典数据保存为json文件

2024-11-02 11:11:55

【geojson 各国数据获取指引】

2024-11-02 11:11:55

settings.json：Visual Studio Code的深度定制化核心

2024-11-02 11:11:55

如何使用 Python 批量检测和转换 JSONL 文件编码为 UTF-8

2024-11-02 11:11:19

执行npm run serve 找不到vite模块 Error: Cannot find module

2024-11-02 11:11:16

前端使用 npm install后会报code ERESOLVEERESOLVE unable to resolve dependency tree等导入依赖错误

2024-11-02 11:11:09

问题：无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\npm.ps1，因为在此系统上禁止运行脚本。

2024-11-02 11:11:07

共享依赖的新选择：探索 PNPM 在低代码开发中的威力

2024-11-02 11:11:56

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！