html+css(如何用css做出京东页面,静态版)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东</title><link rel="stylesheet" href="./css/top.css"><link rel="stylesheet" href="./css/center.css"><link rel="stylesheet" href="./css/bottom.css"><link rel="stylesheet" href="./css/three.css">
</head>
<body><!-- 头部 --><div id="top"><img src="./tu/logo.png" alt=""><img src="./tu/l-icon.png" alt="" id="login"><span id="denglu"><a href="./调查问卷.html">登录页面,改进建议</a></span></div><!-- 第二部分 --><div id="part"><div id="tips"><ul><li>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!新版 <span id="color"><a href="./隐私政策.html">《京东隐私政策》</a></span>已上线,将更有利于保护您的隐私。</li></ul></div></div><!-- 第三部分 --><div id="zong"><!-- 图片 --><div id="lg"><!--表单--><div id="ziti"><!-- 页面上部分 --><div id="zhuang"> 京东不会以任何理由要求您转账,谨防诈骗 </div><div id="code"></div><span id="quite">扫码登录安全快捷</span><div id="red"><a href="#" class="enter">密码登录</a><a href="./短信.html" class="note">短信登录</a></div><div id="e-mail"><input type="text" name=""  placeholder="账户名/手机号/邮箱" class="case"><input type="password" placeholder="密码" class="case"><a href="#" class="forget">忘记密码</a></div><input type="submit" id="inter" value="登录"><!-- QQ微信 --><div id="we"><div id="qq"><a href="https://im.qq.com/index/">QQ</a></div><div id="WeChat"><a href="https://wx.qq.com/">微信</a></div><a href="#" class="login">立即注册</a></div></div></div><!-- 第四部分 --><div id="four"><a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a href="#">商家入住</a>|<a href="#">广告服务</a>|<a href="#">手机京东</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a href="#">京东社区</a>|<a href="#">京东公益</a><br><br><span id="copyright"> Copyright © 2004-2023 京东JD.com 版权所有</span></div></div>
</body>
</html>
/* 顶部 */
*{margin: 0px auto;padding: 0px;color: grey;font-size: 12px;
}
body{background-color: rgb(255, 255, 255);
}#top{width: 990px;background-color: rgb(255, 255, 255);
}margin-left: 10px;
}
#denglu a{margin-left: 300px;padding-left: 20p
#login{x;text-decoration: none;background: url(../tu/q-icon.png) no-repeat 1px;
}
/* 第二部分*/
#tips{width: 990px;background: url(../tu/icon-tips.png) no-repeat 100px;background-color: rgb(255, 248, 240);padding-top: 10px; padding-bottom: 10px; 
}
#tips li{text-align: center;list-style: none;
}
#part{background-color:rgb(255, 248, 240);
}
#color a{color: black;text-decoration: none;
}
/* 整体 第三部分 */
#zong{height: 475px;background-color: rgb(235, 221, 210);}
#lg{width: 990px;height: 475px;background-image: url(../tu/bg.jpg) ;}
#zhuang{width: 300px;height: 20px;border-radius: 10px;margin-right: 1px; text-align: center;border-radius: 15px;color: rgb(248, 116, 76);background: url(../tu/icon-tips.png) no-repeat 1px;background-position: 15px 0px;background-color: antiquewhite;
} 
#ziti{width: 300px;float: right;margin-top: 100px;border-radius: 10px;background-color: rgb(252, 250, 247); 
}
#code{width: 50px;height: 42px;background-image: url(../tu/qrcode.png);background-size: 50px 50px;float: right;
} 
#quite{color: rgb(249, 244, 244);font-size: 16px;padding: 2px 10px;background-color:rgb(158, 156, 156) ;margin-left: 90px; border-radius: 5px;
}#red{margin-top: 15px;
}
#red a{text-decoration: none;font-size: 17px;}
.enter{color: red;padding-left: 20px;
}
.note{padding-left: 20px;
}
#e-mail{margin: 10px 20px;
}
.case{width: 250px;border-radius: 5px;margin-bottom: 15px;padding: 8px;border: 1px solid rgb(151, 150, 150);}
.forget{text-decoration: none;float: right;color: black;
}
#inter{width: 260px;height: 30px;font-size: 14px;color: rgb(243, 237, 237);margin-left: 20px;margin-top: 10px;background-color: rgb(224, 92, 92);border: none;border-radius: 5px;
}
#we{margin-top: 30px;width: 285px;height: 30px;padding-top: 20px;padding-left: 15px;border-radius: 0px 10px;background-color: rgb(226, 223, 221);
}
#qq{width: 19px;height: 18px;background: url(../tu/QQ-weixin.png) ;float: left;
}
#qq a{text-decoration: none;padding-left: 25px;
}
#WeChat{width: 19px;height: 18px; background: url(../tu/QQ-weixin.png) ;background-position: 19px;
}
#WeChat a{text-decoration: none;width: 50px;padding-left: 25px;display: inline-block;
}
.login{text-decoration: none;float: right;margin-top: -17px;background-color: rgb(red, green, blue);
}
/* 第四部分 底部*/
#four{width: 990px;height: 100px;padding-top: 20px;text-align: center;background-color: rgb(255, 255, 255);
}
#four a{padding: 10px;color: black;text-decoration: none;text-align: center;
}
#copyright{color: black;
}

需图找我噢~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1544021.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

OmniPeek 空口抓包软件安装指导

OmniPeek 空口抓包软件安装指导 1 双击omnp75安装包---Unzip解压缩 生成install包 2 进入install文件夹点击setup开始进入安装界面 3 点击install Omnipeek 4 点击next,勾选手动安装

基于微信小程序的竞赛答题小程序开发笔记(一)

开发背景调研 中小学学科答题小程序&#xff0c;适合各中小学校方&#xff0c;老师或者家长。通过互动和参与式学习&#xff0c;小程序能够通过游戏化元素提升学习的积极性和参与度&#xff0c;从而提升学习效率&#xff0c;促进学生自主学习 功能规划 分类题库&#xff1a;…

①大缓存ModbusRTU485数据集中采集器寄存器线圈重映射从站并发采集Modbus 串口RS485 转 RS485

大缓存ModbusRTU485数据集中采集器寄存器线圈重映射从站并发采集https://item.taobao.com/item.htm?ftt&id811821574300 产品型号&#xff1a; 一分一路 MS-A1-C011 一分2路 MS-A1-C021 一分4路 MS-A1-C041 一分7路 MS-A1-C071 一般技术规格 1.串口 MS-A1…

扩大产品库存怎么破?手把手教你,全开源哦!

要在产品上扩大库存&#xff1f;&#xff01;这太常见了&#xff0c;短视频时代&#xff0c;有大量东西要储存&#xff1a;视频、音频、文件等。 提到外扩&#xff0c;就不得不提到编写各种驱动&#xff0c;还有Flash替换。。。又是落发时刻啊&#xff01; 来吧&#xff01;也…

【鸿蒙HarmonyOS NEXT】用户首选项Preference存储数据

【鸿蒙HarmonyOS NEXT】数据存储之用户首选项Preference 一、环境说明二、Preference运作机制三、示例代码加以说明四、小结 一、环境说明 DevEco Studio 版本&#xff1a; API版本&#xff1a;以12为主 二、Preference运作机制 应用场景&#xff1a; 用户首选项为应用提…

从零开始之AI面试小程序

从零开始之AI面试小程序 文章目录 从零开始之AI面试小程序前言一、工具列表二、部署流程1. VMWare安装2. Centos安装3. Centos环境配置3.1. 更改子网IP3.2. 配置静态IP地址 4. Docker和Docker Compose安装5. Docker镜像加速源配置6. 部署中间件6.1. MySQL部署6.2. Redis部署 7.…

专属文生图助手——SD3+ComfyUI文生图部署步骤

SD3ComfyUI文生图部署步骤 我们使用DAMODEL来实现文生图的部署。 根据提供的操作步骤与代码段落&#xff0c;本文旨在介绍如何下载并部署 Stable Diffusion 3 模型&#xff0c;并通过 ComfyUI 架构实现基于 Web 界面的图像生成应用。本文将剖析各个步骤&#xff0c;并详细解释…

AOT源码解析4.1-model主体解析

1 输入数据 VOS的数据集处理操作可见数据集操作&#xff0c;这里是进行数据集提取完毕后的操作。 图2&#xff1a;如图所示&#xff0c;使用datasets提取出数据之后&#xff0c;在模型训练阶段对数据做图中操作。即&#xff1a;将batch_size大小的ref_imgs、prev_imgs&#x…

IDEA 关闭自动补全功能(最新版本)

文章目录 一、前言二、关闭自动补全三、最终效果 一、前言 在最新的 IDEA 中发布了自动补全功能&#xff0c;当你输入代码时&#xff0c;IDEA 会自动显示你可能想输入的代码&#xff0c;减少手动输入的工作量&#xff0c;它会根据上下文提供正确的选项&#xff0c;提高代码的准…

基于C#+SQL Server(CS界面)学生选课及成绩查询管理系统

学生选课及成绩查询管理系统的设计与开发 1、项目背景 学生选课及成绩查询系统是一个学校不可缺少的部分&#xff0c;传统的人工管理档案的方式存在着很多的缺点&#xff0c;如&#xff1a;效率低、保密性差等&#xff0c;所以开发一套综合教务系统管理软件很有必要&#xff…

对onlyoffice进行定制化开发

基于onlyoffice8.0源码&#xff0c;进行二次开发&#xff0c;可实现包括但不限于以下的功能 1、内容控件的插入 2、内容空间的批量替换 3、插入文本 4、插入图片 5、添加&#xff0c;去除水印 6、修改同时在线人数限制 7、内容域的删除 8、页面UI的定制化 9、新增插件开发 10、…

华为全联接大会HUAWEI Connect 2024印象(四):上海大学的脑机接口演示

在HC上&#xff0c;除了华为自己的技术展示&#xff0c;也包括一些合作伙伴的展示。一个印象比较深的是上海大学的韶脑传感脑机接口。 上海大学现场准备了一个可以被脑机接口控制的电动轮椅供参观者现场体验。体验者需要先戴上一个头套&#xff0c;上面有各种传感器。据上海大…

STL队列

一、队列的介绍 队列是一种操作&#xff08;或者说运算&#xff09;受到限制的特殊线性表。其插入操作限定在表的一端进行&#xff0c;称为入队&#xff1b;其删除操作则限定在表的另一端进行&#xff0c;称为出队。插入一端称为队尾&#xff08;rear&#xff09;&#xff1b;删…

鸿蒙 OS 开发单词打卡 APP 项目实战 20240922 笔记和源码分享

配套有完整的录播课, 需要的私信. 零基础入门级别, 有点前端基础都能学会. 效果截图: 代码截图: 页面完整代码: import { AnswerStatus } from ../enums/AnswerStatus import { PracticeStatus } from ../enums/PracticeStatus import { getRandomQuestions, Question …

❤Node11-登录人token信息接口

❤Node11-登录人token信息接口​ 上一章我们已经从登录部分拿到了用户的登录jwt返回的token信息&#xff0c;接下来我们就通过token来换取用户信息 这里我们可以将其理解为一种加密以及解密的思想来思考这个jwt和token的关系&#xff0c;token就是一个加密的字符串&#xff0c…

python 斑马打印模板

打印代码逻辑如下&#xff1b; 包括样式、表格 import win32printdef print_zpl_from_usb_printer(printer_name, zpl_content):# 打开打印机hPrinter win32print.OpenPrinter(printer_name)if hPrinter is None:print(f"Failed to open printer: {printer_name}")…

Spring Cloud Alibaba-(6)Spring Cloud Gateway【网关】

Spring Cloud Alibaba-&#xff08;1&#xff09;搭建项目环境 Spring Cloud Alibaba-&#xff08;2&#xff09;Nacos【服务注册与发现、配置管理】 Spring Cloud Alibaba-&#xff08;3&#xff09;OpenFeign【服务调用】 Spring Cloud Alibaba-&#xff08;4&#xff09;Sen…

商标管理软件如何助力企业实现商标数字化管理?

商标作为企业的无形资产和品牌形象的核心&#xff0c;其管理方式的数字化升级已成为企业不可回避的课题。启服云商标管理软件凭借其强大的功能和灵活的解决方案&#xff0c;正帮助企业商标管理向数字化、智能化方向迈进&#xff0c;为企业品牌保护和市场拓展提供了强有力的支撑…

apache paimon简介(官翻)

介绍 如下架构所示: 读/写操作: Paimon 支持多样化的数据读写方式,并支持 OLAP 查询。 读取: 支持从历史快照(批处理模式)中消费数据,从最新偏移量(流处理模式)中读取数据,或以混合方式读取增量快照。写入: 支持从数据库变更日志(CDC)进行流式同步,从离线数据中…

QT菜单栏设计(二级菜单栏)

目的&#xff1a;创建一级菜单栏&#xff0c;添加对应选项&#xff0c;并向一级菜单栏中添加二级菜单栏选项。 #include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindo…