HTML和CSS

最新推荐文章于 2024-10-19 15:55:42 发布
最新推荐文章于 2024-10-19 15:55:42 发布
阅读量226 收藏
点赞数
分类专栏： 笔记 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65224702/article/details/125044642
版权

用HTML和CSS编写QQ邮箱网页

##头部

HTML

<div class="head">
         <img src="photo.1/QQmail.png" alt="QQmaillog" weight="80" height="50">
       <var>
     <a href="#">基本版</a>|
     <a href="#">English</a>|
     <a href="#">手机版</a>|
     <a href="#">企业邮箱</a>
       </var>
    </div>

CSS

.head
        {
            height:50px;
            margin-top:0px;
            background-color:rgb(193, 225, 236);        
        }
        .head img
        {
            margin-top:0px;
            margin-left:0px;
        }
        .head var
        {
            font-size:20px;
            margin-top:5px;
             margin-left:800px;
            

        }

中间部分

HTML

<div class="central">
     <h1 >
         QQ邮箱,常联系!
     </h1>
      <word>
     <p>没有什么能够阻挡</p>
     <p>你对自由的向往</p>
     <p>天马行空的生涯</p>
     <p>你的心了无牵挂</p>
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
     <p>摘自《蓝莲花》</p>
     <p style="color:rgb(122, 126, 126)">听更多许巍音乐</p>
     </word>
     <img src="photo.1/QQlog.png" alt="qqlog" weight="40" hight="40">
     
     <div class="list">
         <input type="submit"value="微信登录" class="wx">
         <input type="submit"value="QQ登录"  class="qq">
         <p>&nbsp; </p>
         <input type="text" placeholder="支持QQ/邮箱/手机号登录" class="text">
         <p>&nbsp; </p>
         <input type="password" placeholder="QQ密码" class="password">
         <p>&nbsp;</p>
         <input type="checkbox" class="checkbox" >下次自动登录
         <p></p>
         <input type="submit" value="登&nbsp;录" class="submit">
         <p>&nbsp;</p>
         <a href="#" class="code">扫描二维码快捷登录</a>
         <p>&nbsp; </p>
         <a href="#" class="forgetpassword">忘记密码</a>
         <a href="#" class="newaccount">新用户注册</a>


     </div>
    </div>

CSS

.central
        {
            color:black;
        }
        .central h1
        {
            
            margin-top:60px;
            margin-left:200px;
            color:deepskyblue;    
        }
        .central word
        {

            margin-left:200px;
            font-size:15px;
            float:left;
            
        }

        .central .list
        {
            margin-top:-80px;
            float:right;
            width:350px;
            height:400px; 
            border:1px solid #447fc3;
            margin-right:200px;
        }
        .central .list .box
        {
            border-bottom:1px solid #447fc3;
            height:50px;
            line-height: 50px;
            
        }
        .central .list  .wx
        {
            float:left;
            width:175px;
            height:50px;
            background-color:rgb(143, 192, 239);
        }
        .central .list  .qq
        {
            float:right; 
            width:175px;
            height:50px;
            background-color:rgb(143, 192, 239);
            
        }
        .certral .list p
        {
            
            height:20px;
        }

        .central .list .text
        {
            float:left;
            margin-left:20px;
            width:300px;
            height:30px;

            
        }
        .central .list .password

        {
            float:left;
            margin-left:20px;
            width:300px;
            height:30px;
        }
       .certral .list .checkbox
        {
            float:left;
            border:1px solid black;
            background:white;
        }
        
        .central .list .submit
        {
            float:left;
            margin-left:20px;
            width:300px;
            height:30px;
            border:1px solid rgb(60, 121, 233);
            background-color:rgb(60, 121, 233);
            font-size:20px;
                
        }
        .central .list .forgetpassword
        {
            float:left;
            margin-left:10px;
            font-size:15px;
        }
        
        .central .list .newaccount
        {
            float:right;
            margin-right:10px;
            font-size:15px;
        }
        .central .list .code
        {
            float:left;
            margin-left:120px;
            font-size:10px;
        }

尾部

HTML

<div class="foot">
        <a href="#">关于腾讯</a>|
        <a href="#">服务条款</a>|
        <a href="#">隐私政策</a>|
        <a href="#">客服中心</a>|
        <a href="#">联系我们</a>|
        <a href="#">帮助中心</a>|
        ©1998 - 2022 Tencent Inc. All Rights Reserved.
     </div>

CSS

.foot
        {
            position: fixed;
            bottom:0;
            left:0;
            right:0;
            height:40px;
            text-align: center;
            margin-bottom:0px;
            background-color:rgb(193, 225, 236);

        }

完整代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录QQ邮箱</title>
    <style type="text/css">
        body
        {
            font-size:20px;
        }
        .head
        {
            height:50px;
            margin-top:0px;
            background-color:rgb(193, 225, 236);        
        }
        .head img
        {
            margin-top:0px;
            margin-left:0px;
        }
        .head var
        {
            font-size:20px;
            margin-top:5px;
             margin-left:800px;
            

        }
        .central
        {
            color:black;
        }
        .central h1
        {
            
            margin-top:60px;
            margin-left:200px;
            color:deepskyblue;    
        }
        .central word
        {

            margin-left:200px;
            font-size:15px;
            float:left;
            
        }

        .central .list
        {
            margin-top:-80px;
            float:right;
            width:350px;
            height:400px; 
            border:1px solid #447fc3;
            margin-right:200px;
        }
        .central .list .box
        {
            border-bottom:1px solid #447fc3;
            height:50px;
            line-height: 50px;
            
        }
        .central .list  .wx
        {
            float:left;
            width:175px;
            height:50px;
            background-color:rgb(143, 192, 239);
        }
        .central .list  .qq
        {
            float:right; 
            width:175px;
            height:50px;
            background-color:rgb(143, 192, 239);
            
        }
        .certral .list p
        {
            
            height:20px;
        }

        .central .list .text
        {
            float:left;
            margin-left:20px;
            width:300px;
            height:30px;

            
        }
        .central .list .password

        {
            float:left;
            margin-left:20px;
            width:300px;
            height:30px;
        }
       .certral .list .checkbox
        {
            float:left;
            border:1px solid black;
            background:white;
        }
        
        .central .list .submit
        {
            float:left;
            margin-left:20px;
            width:300px;
            height:30px;
            border:1px solid rgb(60, 121, 233);
            background-color:rgb(60, 121, 233);
            font-size:20px;
                
        }
        .central .list .forgetpassword
        {
            float:left;
            margin-left:10px;
            font-size:15px;
        }
        
        .central .list .newaccount
        {
            float:right;
            margin-right:10px;
            font-size:15px;
        }
        .central .list .code
        {
            float:left;
            margin-left:120px;
            font-size:10px;
        }


        .foot
        {
            position: fixed;
            bottom:0;
            left:0;
            right:0;
            height:40px;
            text-align: center;
            margin-bottom:0px;
            background-color:rgb(193, 225, 236);

        }


         

    </style>
</head>
<body>
     <div class="head">
         <img src="photo.1/QQmail.png" alt="QQmaillog" weight="80" height="50">
       <var>
     <a href="#">基本版</a>|
     <a href="#">English</a>|
     <a href="#">手机版</a>|
     <a href="#">企业邮箱</a>
       </var>
    </div>

    <div class="central">
     <h1 >
         QQ邮箱,常联系!
     </h1>
      <word>
     <p>没有什么能够阻挡</p>
     <p>你对自由的向往</p>
     <p>天马行空的生涯</p>
     <p>你的心了无牵挂</p>
     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
     <p>摘自《蓝莲花》</p>
     <p style="color:rgb(122, 126, 126)">听更多许巍音乐</p>
     </word>
     <img src="photo.1/QQlog.png" alt="qqlog" weight="40" hight="40">
     
     <div class="list">
         <input type="submit"value="微信登录" class="wx">
         <input type="submit"value="QQ登录"  class="qq">
         <p>&nbsp; </p>
         <input type="text" placeholder="支持QQ/邮箱/手机号登录" class="text">
         <p>&nbsp; </p>
         <input type="password" placeholder="QQ密码" class="password">
         <p>&nbsp;</p>
         <input type="checkbox" class="checkbox" >下次自动登录
         <p></p>
         <input type="submit" value="登&nbsp;录" class="submit">
         <p>&nbsp;</p>
         <a href="#" class="code">扫描二维码快捷登录</a>
         <p>&nbsp; </p>
         <a href="#" class="forgetpassword">忘记密码</a>
         <a href="#" class="newaccount">新用户注册</a>





     </div>
    </div>




     <div class="foot">
        <a href="#">关于腾讯</a>|
        <a href="#">服务条款</a>|
        <a href="#">隐私政策</a>|
        <a href="#">客服中心</a>|
        <a href="#">联系我们</a>|
        <a href="#">帮助中心</a>|
        ©1998 - 2022 Tencent Inc. All Rights Reserved.
     </div>
       

    
</body>
</html>
永不言弃的小白
关注
专栏目录
javaGUI编程用HTML和CSS布局，swing做壳。
jun_bai的博客
12-15 2565
由于一直从事BS架构开发，相对精通HTML+CSS模式布局，但要做本地应用程序，就头大了，研究了下各种java的GUI编程技术，感觉用swing加嵌入浏览器这种方式比较适合，既能用熟悉的方式编程，又能用BS的方式控制本地资源，相当舒服。下面是我用的组合套装。
一文读懂HTML和CSS的关系
博文视点（北京）官方博客
01-08 4682
Web开发是一个很依赖经验的领域，然而这对初学者很不友好。 知识一旦脱离了应用场景就会变得晦涩、空洞，且知识本身也满足“二八定律”，“抓大放小”是提高学习效率的关键。 下文向大家介绍了HTML和CSS之间的关系。内容选自《HTML 5与CSS 3核心技法（全彩）》一书。本书主线清晰，讲解简洁，并提供在线效果演示效果，非常适合小白上手！ 1 HTML是骨架 很难想象一个人在桌前对着一块砧板坐一夜，隔一会儿就噼里啪啦敲几下，一会儿哭一会儿笑，是一种什么景象。事实上，在猫眼中我们就是这...
html和css实现导航条
沃和莱特的博客
06-11 4230
当我们在浏览网页时，常常能发现各种导航条，这些小小的导航条可以很大的方便我们更好的获取我们想得到的信息，就拿百度中的一个导航条做例子，简单做一个仿照版的吧~
用html和CSS做个人简历
zsyabcd的博客
05-15 7040
很多刚学web的同学第一个项目应该都是做一个个人简历，这个是查了多方资料的刚刚写出来的一个简历，所以可能会参考网上的一些代码，兄弟们拿去复制就可以。里面有的注释可能不太对劲，不要太在意，毕竟我也是一个刚学一周的小菜鸟。也希望大佬们多来指正。 ​ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
HTML和CSS总结
m0_46275263的博客
06-15 3324
前端三剑客之二：HTML和CSS的初步了解
html和css分别有什么用,CSS是什么?和HTML有什么区别?
weixin_34797871的博客
06-17 2477
一、css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。二、HTML和CSS的区别?1、定义不同：html是HyperTextMark-upLanguage的缩写，即超文本标记语言；css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网...
vscode运行html和css方法
kaiser010的博客
05-26 5185
vscode是一款源代码编辑器软件，能够用于windows、macOS以及Linux系统，开发的时候经常需要用vscode运行html文件，vscode怎么运行html和css，下面列出vscode运行html和css方法，如下。3、完成安装之后直接退回到html界面，使用鼠标右击，在弹出的选项中，点击“Open in other browse”,然后在弹出的界面中选择对应的浏览器即可。参考文章：http://tishang.net/articles/1685096063.html。
html，css和js
weixin_44985964的博客
11-30 5832
访问某个变量。没有被定义创建函数/函数声明/函数定义function 函数名（形参列表）{函数体return 返回值；}
Html和css算是编程语言吗,不被承认的编程语言
weixin_35073008的博客
06-04 4297
众所周知，比较著名的编程语言有许多，比如PHP、Java、Python、C++等等，他们有着非常优秀的作用。但是基本每一个程序员都知道这一门不被承认的编程语言——HTML为什么他不被承认呢?HTML是 HyperText Markup Language (超级文本标记语言)首字母缩写。它属于网页编程语言(Web programming language)中的一种。它是人眼可识别的文本文件。HTML...
html个人简介css_HTML和CSS简介
weixin_26737625的博客
09-09 2832
html个人简介cssA beginners guide to web development Web开发初学者指南 At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and ...
网页设计期末大作业+html+css
05-25
但是代码的工整和文件夹的放置还是需要把这种表面功夫做好，这样你才能得到更好的分数而且不会被怀疑是代做的。适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业...
html+css模板 我的家乡有模板
04-21
【标题】"html+css模板 我的家乡有模板"所代表的知识点主要涉及网页设计领域，特别是HTML和CSS的应用。HTML（HyperText Markup Language）是网页内容的结构标准，而CSS（Cascading Style Sheets）则用于定义这些内容...
快速入门HTML和CSS
m0_54129816的博客
03-12 1857
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言这里只是讲一些我自己学习网页制作后认为可以快速掌握的学习方法和小技巧。因为不可能一篇本章就可以把HTML讲的非常清楚明白。感兴趣的可以向下看一看。一、HTML和CSS是什么？二、清楚要重点学什么说回来网页制作这块，我认为重点学习的话是css和javaScript，html的元素常用的会用后，拿过来知道几个结构我觉得差不多了，css才是能让你的网页焕然一新的工具。另外为什么说javascript也是重点？因为学到最后每个人做出来.
html和css学到什么程度可以去学js？
SiKi学院的博客
03-21 2421
​ HTML和CSS是前端开发的基础，学到什么程度可以去学JS的问题并没有一个确定的答案，因为这取决于个人的学习能力和目标。但是，以下是一些可以作为参考的建议： ​
HTML快速入门--第一节--五个基本标签
PangQinghua的博客
10-13 450
html，图片标签；超链接标签；列表标签；表格标签；表单标签
position定位静态定位/绝对定位/相对定位
qq_74861982的博客
10-13 412
position定位静态定位/绝对定位/相对定位
前端html css js 练习巩固沉淀2
阿乐的博客
10-19 146
步骤progress
web前端--html 5---qq注册
2301_81851270的博客
10-16 917
<input type="text" name="username" id="username" placeholder="昵称">登录繁体
前端js html css 基础巩固6
最新发布
阿乐的博客
10-19 165
这样可以当做一个字典 来使用 每次 点击 键盘上的字母或数字 就可以获得 keyCode。这个 在实际应用中还是有可能使到的 所以大家可以练习一下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值