一、HTML代码如下：
命名为：QQ邮箱页面.html
<!DOCTYPE html> <html> <head> <style type="text/css"> @import"./QQ邮箱页面.css";</style> <!--引入“QQ邮箱页面.css”--> </head> <body> <!-- ------------------------------------ header/顶部 ------------------------------------------> <div class="header"> <a href=""><img src="./左上图1.jpeg"></a> <nav> <!--<nav> 元素作为标注一个导航链接的区域。--> <a href="">基本版</a> | <a href="">English</a> | <a href="">手机版</a> | <a href="">企业邮箱</a> </nav> </div> <!-- ------------------------------------ central/中部 ------------------------------------------> <div class="central"> <div class="word"><!--中部左文字--> <h1>QQ邮箱，常联系！</h1> <p>2500年前，人们飞鸽传书</p> <p>185年前，莫尔斯发明了电报</p> <p>52年前，第一封电子邮件发出</p> <p>今天，QQ邮箱联系你、我、他</p> </div> <img src="./中间图1.jpeg" /><!--中部中图片--> <div class="logon"><!--中部右登录框--> <div class="firstpart"> <ul> <li class="wx">微信登录</li> <li class="qq">QQ登录</li> </ul> </div> <input type="account" placeholder="支持QQ号/邮箱/手机号登录"/> <!--placeholder:占位符，显示在待输入框中--> <input type="password" placeholder="QQ密码"/> <input type="checkbox" class="checkbox" /> <!--设置“下次自动登录左边按钮”--> <p>下次自动登录</p> <input type="button" class="button" value="登 录" /> <a href=""><img src="./二维码图.jpeg" /></a> <div class="codeword"> <a href="">扫码快捷登录</a> </div> <a href="" class="FogretPassword">忘了密码？</a> <a href="" class="NewAccount">注册新账号</a> </div> </div> <!-- ------------------------------------ footer/底部 ------------------------------------------> <div class="footer"> <nav> <a href="">关于腾讯</a> | <a href="">服务条款</a> | <a href="">隐私政策</a> | <a href="">客服中心</a> | <a href="">联系我们</a> | <a href="">帮助中心</a> | ©1998 - 2021 Tencent Inc. All Rights Reserved. </nav> </div> </body> </html>
二、CSS代码如下：
命名为：QQ邮箱页面.css
* {/*全局设置*/ margin: 0; /*外边距*/ padding: 0;/*内边距*/ } body { font-size: 20px;/*文本大小*/ } /*----------------------------------------------header----------------------------------------------*/ .header{/*顶部设置*/ height:70px; width: 100%; background: #eff4fa; } .header img{/*顶部图片设置*/ height: 50px; width:210px; margin-left:20px; margin-top: 10px; } .header nav{ font-size:1px; color:darkgray; margin-top:-35px; margin-right: 50px; text-align: right; } .header nav a{ color:blue; text-decoration: none; } .header nav a:hover{/*鼠标悬停在a时*/ text-decoration: underline;/*显示下划线*/ } /*----------------------------------------------central----------------------------------------------*/ .central{/*中部设置*/ background-color:white; height: 600px; width: 1000px; margin:auto; margin-top:100px; /*边框顶部*/ } .central .word{ float:left; /*左浮动*/ margin-left:50px; margin-top: 30px; } .central .word h1{ font-size:25px; color:blue; margin-bottom:15px; } .central .word p{ font-size:15px; line-height: 25px;/*设置行间距*/ } .central img{ float:left; /*左浮动，该浮动元素会尽量向左，直到它的外边缘碰到包含框或另一个浮动框的边框为止。*/ height: 350px; width: 310px; margin-top: 20px; margin-right:60px; } .central .logon{/*设置登录边框*/ float:left; margin-top:15px; width:320px; height:350px; border-style: solid;/*设置边框为实线*/ border-radius: 5px; border-width:1px; border-color:gray; } .central .logon .firstpart{/*设置内横线分栏*/ border-bottom-width: 1px; border-bottom-style:solid; border-bottom-color:gray; height:50px; line-height: 50px; } .central .logon ul li{/*设置列表*/ list-style-type: none;/*对列表元素进行初始化*/ font-size: 15px; display: block;/*设置其为块级元素，占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；*/ height:25px; color:gray; } .central .logon ul .wx{/*微信登录*/ float: left; margin-left:50px; cursor: pointer;/*鼠标指针变成手的形状*/ } .central .logon ul .qq{/*QQ登录*/ float: right; margin-right:50px; cursor: pointer;/*鼠标指针变成手的形状*/ } .central .logon input[type=account]{/*账号输入框*/ display: inline-block;/*1、使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. */ /*2、能够改变元素的height，width的值. 3、可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.*/ height:18px; width:250px; padding: 10px;/*设置内边距*/ margin-top: 30px ; margin-left: 25px; } .central .logon input[type=password]{/*密码输入框*/ display: inline-block; height:18px; width:250px; padding: 10px;/*设置内边距*/ margin-top: 15px ; margin-left: 25px; } .central .logon .checkbox[type=checkbox]{/*选中按钮*/ float:left; height:15px; width:15px; margin-top:20px; margin-left:20px; border-width: 1px; border-style:solid; border-color:blue; background:white; } .central .logon p{/*设置按钮旁字体“ 下次自动登录 ”*/ margin-top:18px; margin-left:3px; float:left; font-size:5px; } .central .logon .button[type=button]{/*设置登录按钮*/ height:45px; width:260px; margin-top: 10px; margin-left: -3px; background-color: blue; text-align: center; font-size:10px; color:white; border-width: 1px; border-style:solid; border-color:blue; cursor: pointer; } .central .logon img{/* “扫码登录二维码示例图”设置*/ height: 25px; width: 30px; margin-left: 100px; margin-right: 0px; margin-top:10px; float:center; } .central .logon .codeword {/*设置二维码示例旁字体：“ 扫码快捷登录 ”*/ margin-top:15px; margin-bottom:5px; margin-left:3px; float:center; color: blue; font-size:5px; } .central .logon .codeword a{/*链接*/ text-decoration: none; } .central .logon .codeword a:hover{/*鼠标悬停在a时*/ text-decoration: underline;/*显示下划线*/ } .central .logon .FogretPassword{/*忘了密码?*/ float:left; color:blue; font-size:3px; margin-left:15px; margin-top:20px; } .central .logon .NewAccount{/*注册新账号*/ float:right; color:blue; font-size:3px; margin-right:15px; margin-top:20px; } .central .logon a{/*链接*/ text-decoration: none; } .central .logon a:hover{/*鼠标悬停在a时*/ text-decoration: underline;/*显示下划线*/ } /*----------------------------------------------footer----------------------------------------------*/ .footer{/* 底部设置*/ background: #eff4fa; bottom: 0;/*设置此部分据屏幕下边距距离为0*/ height:40px; width: 100%; /* 也可将此处换为“right:0; ”*/ text-align: center; position: fixed;/*相对于视图窗口定位 */ } .footer nav { font-size:1px; color:darkgray; margin-top:8px; text-align: center; } .footer nav a{ color:blue; text-decoration: none; } .footer nav a:hover{/*鼠标悬停在a时*/ text-decoration: underline;/*显示下划线*/ }
三、图片保存
1、命名为“二维码图”：
编辑
2、命名为“中间图”：
编辑
3、命名为“左上图1”：
编辑
四、存储与执行
将“ 一 ”中的HTML代码、“ 二 ”中的CSS代码，“ 三 ”中的三个图片按各自要求命名，放至同一文件夹下，打开“ QQ邮箱页面.html ”与“ QQ邮箱页面.css ”，在html中运行。
编辑
五、运行结果：
编辑
