JAVA前端———CSS练习—QQ会员网页头部练习—京东登录界面

最新推荐文章于 2021-07-06 16:34:31 发布
最新推荐文章于 2021-07-06 16:34:31 发布
阅读量359 收藏 4
点赞数
分类专栏： Java前端 文章标签： html css javaee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45673367/article/details/104095723
版权

QQ会员网页头部练习

 <style>
        .nav{
            background-color: black;
        }
        .tupian{
            margin-top: 50px;
            margin-left: 180px;
        }
        img{
            vertical-align:middle;
        }
        .nav-lianjie{
           display: inline-block;
            position: absolute;
            top: 42px;
            left: 366px;
        }
        a{
            color: white;
            margin-left: 20px;
            text-decoration: none;
        }
        a:hover{
            color: #ff150e;
        }
        .nav-denglu{
            display: inline-block;
            position: absolute;
            top: 35px;
            left: 1150px;
        }
        .nav-denglu a{
            display: inline-block;
            text-align: center;
            border-radius: 35px;
        }
        #fir {
            width: 80px;
            height: 40px;
            line-height: 35px;
            color: yellow;
            border: 1px yellow solid;
        }
        #fir:hover{
            background-color:lightpink;
            color: yellow;
        }
        #sec {
            width: 150px;
            height: 40px;
            line-height: 35px;
            color: yellow;
            border: 1px yellow solid;
        }
        #sec:hover{
            background-color: lightblue;
            color: yellow;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="nav-tupian">
        <a href="" class="tupian"><img src="qq会员.png" alt="QQ会员首页" width="140"></a>
    </div>
    <div class="nav-lianjie">
        <a href="">功能特权</a>
        <a href="">游戏特权</a>
        <a href="">生活特权</a>
        <a href="">装扮特权</a>
        <a href="">会员活动</a>
        <a href="">成长体系</a>
        <a href="">年费专区</a>
        <a href="">大王卡特权</a>
    </div>
    <div class="nav-denglu">
            <a href=""id="fir">登录</a>
            <a href=""id="sec">开通超级会员</a>
    </div>
</div>

京东登录界面

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        img{
            vertical-align:middle;
        }
        #logo{
            margin-top: 27px;
            margin-left: 341px;
            vertical-align: center;
        }
        #logoziti{
            font:normal x-large "Arial";
            position: fixed;
            top: 40px;
            left: 520px;
            color: gray;
        }
        #banner{
            width: 1000px;
            margin: 0 auto;
        }
        #image{
            width: 1600px;
            height: 480px;
            background-color: #e93854;
        }
        .hezi{
            width: 350px;
            height: 300px;
            position: fixed;
            top: 150px;
            right: 280px;
            background-color: white;
        }
        .shang{
               width: 320px;
               height:35px;
               line-height: 45px;
               margin: 20px;
        }
        .zhong{
            width: 350px;
            height: 150px;
        }
        h2{
            font-size: 20px;
            font-weight: normal;
            color: lightslategrey;
        }
        .ZHUCE{
            float: right;
        }
        .wenben{
            margin: 20px;
            padding-top: 15px;
        }
        .Xia{
            width:300px;
            height: 45px;
            background: #e4393c;
            margin: 10px auto;
            text-align: center;
        }
        .DENGLU{
            font-size: 20px;
            color: white;
            line-height: 45px;
        }
        footer{
            text-align: center;
        }
        .xia{
            margin: 12px 310px;
            color: lightslategrey;
        }
        .copy{
            color: lightslategrey;
            font-size: small;
        }
        a{
            color: gray;
            font-size: small;
            text-decoration:none;
        }
        a:hover{
            color: #ff150e;
            text-decoration: underline;
        }
        a[class="zhuce"]{
            color: red;
        }
    </style>
</head>
<body>
<header>
    <img src="logo.png" id="logo"><span id="logoziti">欢迎登录</span>
</header>
<middle>
    <div>
        <div id="image">
            <div id="banner">
                <img src="banner.png"  width="990" height="400">
            </div>
            <div class="hezi">
                <div class="shang">
                    <h2>京东会员
                        <div class="ZHUCE"> <img src="icon5.jpg" >
                            <a href="" class="zhuce">立即注册</a></div></h2>
                </div>
                <div class="zhong">
                    <div class="wenben">
                        <img src="icon1.jpg" ><input type="text"  placeholder="   邮箱 / 用户名 / 已验证手机"
                                                     style="width:240px; height:34px;">
                    </div>
                    <div class="wenben">
                        <img src="icon2.jpg"><input type="password" style="width:240px;height:34px;">
                    </div>
                </div>
                <div class="Xia">
                        <a href="" ><span class="DENGLU">登 录</span></a>
                </div>
            </div>
        </div>
    </div>
</middle>
<footer>
    <div class="xia">
        <a href="">关于我们</a> &nbsp;|&nbsp;
        <a href="">联系我们</a> &nbsp;|&nbsp;
        <a href="">人才招聘</a> &nbsp;|&nbsp;
        <a href="">商家入驻</a> &nbsp;|&nbsp;
        <a href="">广告服务</a> &nbsp;|&nbsp;
        <a href="">手机京东</a> &nbsp;|&nbsp;
        <a href="">友情链接</a> &nbsp;|&nbsp;
        <a href="">销售联盟</a> &nbsp;|&nbsp;
        <a href="">京东社区</a> &nbsp;|&nbsp;
        <a href="">京东公益</a>&nbsp;|&nbsp;
        <a href="">English Site</a>
    </div>
    <div class="copy">Copyright©2004-2017 京东JD.com 版权所有</div>
</footer>
追JAVA的小菜鸟
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5浮动-制作QQ会员页面导航
08-29
QQ登录导航
练习4_京东商品详情界面.rar
12-19
一写页面的功能实现，通过一个京东页面的练习，的里面有完整的html，css以及jq代码，具体的视频在b站的尚硅谷的全栈工程师jq最后一集有讲，感兴趣的可以去看看，纯看这个新手可能有点难度，因为他是跳着写的，可能理解起来有点难吧。
QQ会员首页HTML+CSS
Moliay的博客
03-08 2981
作为一个穷人，唯一一次逛这么久的会员首页还是因为要写最头大的web~苦涩 效果图 # 源码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;/&amp;gt; &amp;lt;link rel=&quot;icon&
最新版仿QQ会员首页—前端练习.zip
07-02
前端练习之仿QQ会员首页，静态页面，基于html+css，之前做练习写的，对数据的严格把控，使其更接近于原页面。
CSS第7章上机练习1(制作QQ会员页面导航)
热门推荐
拂欢
05-01 1万+
ps:上代码勒~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作QQ会员页面导航</title> <style> li { list-style: non...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
模仿京东登录web源码（html+css）
10-12
本教程将基于提供的"模仿京东登录web源码（html+css）"进行深入讲解，帮助你了解HTML和CSS3在构建网页登录界面中的应用。 首先，我们要理解HTML（HyperText Markup Language）的作用，它是网页内容的结构标记语言，...
HTML5+CSS3前端小案例——移动端购物支付页面
08-18
在练习HTML和CSS的同学们可以拿去参考，做个小案例练练手。 内容涉及flex布局、公共样式公共类的挑选、多个大盒子与多个小盒子的嵌套（div>li>span、p>span等）、多行内容的排版、字体图标的引入设置、图片的引入和...
HTML-CSS-JS学习-01百度登录界面练习.zip
最新发布
01-01
HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...
CSS3QQ会员项目
04-08
CSS动画效果，文字图片切入效果，仿QQ会员页面
仿京东商城登录页面.7z
06-04
仿京东商城登录页面上机练习4的项目答案，超级详细，绝对干货，没有水分！
QQ会员界面.rar
12-04
QQ会员界面，是模仿超级QQ网页界面，用CSS3和HTML5制作，加上JavaScript鼠标滑动转换页面
html作业 仿京东商城登录界面
07-17
本资源课为html新手作业的参考答案使用，运用html+css实现的页面布局
Web前端大作业.zip
05-22
漫步时尚广场完整项目，推荐使用火狐浏览器。后台登陆帐号只有一个，｛"admin","123456"｝，登陆后跳转后台页面时，谷歌浏览器和uc浏览器无效，不清楚原因，内附文档说明，推荐先看一下文档
用HTML5+CSS3实现qq会员页面的仿制
r643064456的博客
07-06 4091
取自本人大一小学期认识实习作业。 一 选题说明 为了做出一个好看的网站，我参考了许多制作精美的网站，但这些网站几乎都用到了JS技术，最后我找到了qq会员网站，里面虽然也应用了不少JS技术，但大部分都可以用CSS重做实现。于是，我决定对qq会员网站进行仿制。 以下是原网站链接： https://vip.qq.com/ 也可以打开我仿制的网页，点击左上方的logo进入官网。 二 功能说明 最上方是半透明导航条，固定于上方。 中间是一个轮播图，qq会员官网使用了JS代码，但我用CSS代码实现了，思路是用anima
CSS作业练习--JD登陆框
一条大河
09-07 1227
作业，下面是京东官网登陆框；制作一个这样的页面； HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <!--css作业，实现JD登陆界面--> <title>京东-欢迎登陆</title> &...
HTML练习4制作京东登录页,day4 CSS属性和京东登录
weixin_29164081的博客
06-05 849
1、盒子练习.div1{background-color: darkcyan;width: 100px;height: 100px;margin-left: 20px;margin-top: 20px;/*float: left;*/text-indent: 4em;}.f1{text-indent: 2em;}按时发达复活节啊奥斯卡房间里卡就分手了空间撒 阿发阿发阿发艾弗森adhfhkash发货...
32、用html制作QQ会员页面导航（半成品，需要素材）
天元白手的博客
05-22 8348
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>制作QQ会员页面导航</title> <style type="text/css"> *{ margin: 0px auto; padding: 0px; ...
使用CSS3制作首页登录界面实例
weixin_30610755的博客
05-28 242
响应式设计 在这个页面中,使用下面3点来完成响应式设计 1、最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容.； 2、margin : 30px auto; 使其保持时刻居中； 3、输入用户名，密码时需要将元素上移20px，使其为触发状态，并使字体缩小4px； 4、内容主色调采用#18B4ED； DEMO页面Html： <div class="c...
vscode:Web前端——登录、注册界面
06-07
好的，我可以帮你提供一些思路。首先，登录和注册界面是Web前端的常见功能，可以使用HTML、CSS、JavaScript等技术来实现。以下是一些简单的步骤： 1.设计页面布局：可以参考一些常见的登录、注册页面的设计，例如输入框、按钮的布局和样式等。 2.编写HTML代码：根据设计的页面布局，编写HTML代码，将页面元素放到合适的位置。 3.使用CSS美化页面：通过CSS样式，可以实现页面的美化，例如颜色、字体、边框、背景等。 4.编写JavaScript代码：登录和注册功能需要与服务器进行交互，可以使用JavaScript编写相关代码，例如发送请求、验证输入等。 5.测试和调试：完成以上步骤后，可以进行测试和调试，确保功能正常。 总的来说，实现登录和注册界面需要一些前端技术的知识和经验，建议你参考一些相关的教程和示例，逐步学习和实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值