HTML5前端开发入门之网易注册界面实战

最新推荐文章于 2022-09-26 21:22:10 发布

小韩同学哇

最新推荐文章于 2022-09-26 21:22:10 发布

阅读量1k

点赞数

分类专栏：从零玩转Html5前端开发

本文链接：https://blog.csdn.net/qq_41886761/article/details/85397686

版权

本文是HTML5前端开发的入门教程，通过实际制作网易注册界面，介绍HTML5的基础语法、CSS样式应用及布局技巧。适合初学者快速掌握网页制作。

摘要由CSDN通过智能技术生成

代码如下：

图片可通过谷歌浏览器在网易邮箱官网直接下载
<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>网易邮箱注册界面</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
        form,fieldset,legend,input,textarea,p,blockquote,th,td
        {
            margin:0;
            padding:0;
        }
        body{
            background-color: #f9f9f9;
            font-size: 12px;
        }
        .header{
            width: 960px;
            height: 81px;
            margin: 0 auto;
            padding-top: 30px;
            box-sizing: border-box;
        }
        .header .logo{
            width: 644px;
            height: 27px;
            background:url("../images/wy.png") no-repeat 0 0;
            float: left;
        }
        .header .logo a{
            display: inline-block;
            width: 128px;
            height: 27px;
        }
        .header .links{
            width: 200px;
            height: 19px;
            text-align: right;
            float: right;
            color: #999;
        }
        .header .links a{
            text-decoration: none;
            line-height: 19px;
            color: #039;
        }
        .header .links a:hover{border-bottom:1px solid #039;}
        .content{
            width: 960px;
            height: 727px;
            margin: 0 auto;
        }
        .content .top{
            width: 958px;
            height: 38px;
            background-color: #6495C6;
            border: 1px solid #5B88B8;
            border-radius: 3px 3px 0 0;
        }
        .content .top h1{
            font-size: 14px;
            color: white;
            line-height: 38px;
            padding-left: 20px;
        }
        .content .bottom{
            width: 960px;
            height: 687px;
            background-color: white;
        }
        .content .bottom .left{
            width: 642px;
            height: 687px;
            float: left;
            padding-left: 60px;
            padding-top: 50px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-top: none;
            border-right: none;
        }
        .content .bottom .left .leftTop{
            width: 582px;
            height: 58px;
            padding-left: 55px;
            box-sizing: border-box;
        }
        .content .bottom .left .leftTop ul{
            width: 412px;
            height: 35px;
            background-image: url("../images/wy3.jpg");
            background-repeat: no-repeat;
            list-style: none;
        }
        .content .bottom .left .leftTop ul li{
            float: left;
            width: 137px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        .content .bottom .left .leftBottom{
            width: 573px;
            height: 543px;
            margin-left: 9px;
        }
        .content .bottom .left .leftBottom .txt-tips{
            color: rgb(153, 153, 153);