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.rhkb.cn/news/435973.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AR 眼镜之-蓝牙电话-来电铃声与系统音效

目录 &#x1f4c2; 前言 AR 眼镜系统版本 蓝牙电话 来电铃声 系统音效 1. &#x1f531; Android9 原生的来电铃声&#xff0c;走的哪个通道&#xff1f; 2. &#x1f4a0; Android9 原生的来电铃声&#xff0c;使用什么播放&#xff1f; 2.1 来电铃声创建准备 2.2 来…

联宇集团:如何利用CRM实现客户管理精细化与业务流程高效协同

在全球化的浪潮中&#xff0c;跨境电商正成为国际贸易的新引擎。作为领先的跨境电商物流综合服务商&#xff0c;广东联宇物流有限公司(以下称“联宇集团”)以其卓越的物流服务和前瞻的数字化战略&#xff0c;在全球市场中脱颖而出。本文将基于联宇集团搭建CRM系统的实际案例&am…

PV大题--专题突破

写在前面&#xff1a; PV大题考查使用伪代码控制进程之间的同步互斥关系&#xff0c;它需要我们一定的代码分析能力&#xff0c;算法设计能力&#xff0c;有时候会给你一段伪代码让你补全使用信号量控制的操作&#xff0c;请一定不要相信某些人告诉你只要背一个什么模板&#…

国庆偷偷卷!小众降维!POD-Transformer多变量回归预测(Matlab)

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现POD-Transformer多变量回归预测&#xff0c;本征正交分解数据降维融合Transformer多变量回归预测&#xff0c;使用SVD进行POD分解&#xff08;本征正交分解&#xff09;&#xff1b; 2.运行环境Matlab20…

MobaXterm基本使用 -- 服务器状态、批量操作、显示/切换中文字体、修复zsh按键失灵

监控服务器资源 参考网址&#xff1a;https://www.cnblogs.com/144823836yj/p/12126314.html 显示效果 MobaXterm提供有这项功能&#xff0c;在会话窗口底部&#xff0c;显示服务器资源使用情况 如内存、CPU、网速、磁盘使用等&#xff1a; &#xff08;完整窗口&#xff0…

BEVDet---论文+源码解读

论文链接&#xff1a;https://arxiv.org/pdf/2112.11790.pdf&#xff1b; Github仓库源码&#xff1a;https://github.com/HuangJunJie2017/BEVDet&#xff1b; BEVDet这篇论文主要是提出了一种基于BEV空间下的3D目标检测范式&#xff0c;BEVDet算法模型的整体流程图如下&…

汽车总线之---- LIN总线

Introduction LIN总线的简介&#xff0c;对于传统的这种点对点的连接方式&#xff0c;我们可以看到ECU相关的传感器和执行器是直接连接到ECU的&#xff0c;当传感器和执行器的数量较少时&#xff0c;这样的连接方式是能满足要求的&#xff0c;但是随着汽车电控功能数量的不断增…

基于单片机的指纹打卡系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52RC&#xff0c;采用两个按键替代指纹&#xff0c;一个按键按下&#xff0c;LCD12864显示比对成功&#xff0c;则 采用ULN2003驱动步进电机转动&#xff0c;表示开门&#xff0c;另一个…

RTMP、RTSP直播播放器的低延迟设计探讨

技术背景 没有多少开发者会相信RTMP或RTSP播放器&#xff0c;延迟会做到150-300ms内&#xff0c;除非测试过大牛直播SDK的&#xff0c;以Android平台启动轻量级RTSP服务和推送RTMP&#xff0c;然后Windows分别播放RTSP和RTMP为例&#xff0c;整体延迟如下&#xff1a; 大牛直播…

深度学习后门攻击分析与实现(二)

前言 在本系列的第一部分中&#xff0c;我们已经掌握了深度学习中的后门攻击的特点以及基础的攻击方式&#xff0c;现在我们在第二部分中首先来学习深度学习后门攻击在传统网络空间安全中的应用。然后再来分析与实现一些颇具特点的深度学习后门攻击方式。 深度学习与网络空间…

探索甘肃非遗:Spring Boot网站开发案例

1 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。这样的大环境让那些止步不前&#…

SpringBoot框架下体育馆管理系统的构建

1引言 1.1课题背景 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理&#xff0c;这正是计算机被广泛应用于信息管理系统的环境。计算机的最大好处在于利用它能够进行信息管理。使用计算机进行信息控制&#xff0c;不仅提高了工作效率&#xff0c;而且大大的提高了其…

工具介绍---效率高+实用

Visual Studio Code (VS Code) 功能特点&#xff1a; 智能代码提示&#xff1a;内置的智能代码提示功能可以自动完成函数、变量等的输入&#xff0c;提高代码编写速度。插件丰富&#xff1a;支持成千上万的扩展插件&#xff0c;例如代码片段、主题、Linting等&#xff0c;能够…

通信工程学习:什么是CSMA/CD载波监听多路访问/冲突检测

CSMA/CD&#xff1a;载波监听多路访问/冲突检测 CSMA/CD&#xff08;Carrier Sense Multiple Access/Collision Detect&#xff09;&#xff0c;即载波监听多路访问/冲突检测&#xff0c;是一种用于数据通信的介质访问控制协议&#xff0c;广泛应用于局域网&#xff08;特别是以…

vue仿chatGpt的AI聊天功能--大模型通义千问(阿里云)

vue仿chatGpt的AI聊天功能–大模型通义千问&#xff08;阿里云&#xff09; 通义千问是由阿里云自主研发的大语言模型&#xff0c;用于理解和分析用户输入的自然语言。 1. 创建API-KEY并配置环境变量 打开通义千问网站进行登录&#xff0c;登陆之后创建api-key&#xff0c;右…

李宏毅机器学习2023-HW10-Adversarial Attack

文章目录 TaskBaselineFGSM (Fast Gradient Sign Method (FGSM)I-FGSM(Iterative Fast Gradient Sign Method)MI-FGSM(Momentum Iterative Fast Gradient Sign Method)M-DI2-FGSM(Diverse Input Momentum Iterative Fast Gradient Sign Method) Reportfgsm attackJepg Compress…

Iceberg 基本操作和快速入门

安装 Iceberg 是一种适用于大型分析表的高性能工具&#xff0c;通过spark启动并运行iceberg&#xff0c;文章是通过docker来进行安装并测试的 新建一个docker-compose.yml文件 文件内容 version: "3" services: spark-iceberg: image: tabulario/spark-iceberg co…

数据结构之链表(2),双向链表

目录 前言 一、链表的分类详细 二、双向链表 三、双向链表的实现 四、List.c文件的完整代码 五、使用演示 总结 前言 接着上一篇单链表来详细说说链表中什么是带头和不带头&#xff0c;“哨兵位”是什么&#xff0c;什么是单向什么是双向&#xff0c;什么是循环和不循环。然后实…

微信小程序map组件自定义气泡真机不显示

最近遇到一个需求需要使用uniapp的map自定义气泡 &#xff0c;做完之后发现在模拟器上好好的&#xff0c;ios真机不显示&#xff0c;安卓页数时好时不好的 一番查询发现是小程序的老问题了&#xff0c;网上的方法都试了也没能解决 后来看到有人说用nvue可以正常显示&#xff0c…

word2vector训练代码详解

目录 1.代码实现 2.知识点 1.代码实现 #导包 import math import torch from torch import nn import dltools #加载PTB数据集 &#xff0c;需要把PTB数据集的文件夹放在代码上一级目录的data文件中&#xff0c;不用解压 #批次大小、窗口大小、噪声词大小 batch_size, ma…