一、看一下注释即可，都是前面学到的知识，然后进行整合完成网页的制作，未完待续，这个网易界面跨度可大三天。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D139_FrameworkeOfNeteasyInterface</title>

    <style>

        .header{

            width:960px;

            height:80px;

            /*background-color: red;*/

            margin: 0 auto;

            overflow: hidden;

            padding-top:14px;

            box-sizing: border-box;/*这里我们采用内上边距的办法将logo挤下去达到垂直居中的目的*/

            /*同时这个box-sizing的属性就是将这个header固定住，不让他因为内边距而变化大小了*/

        }

        .content{

            width: 960px;

            height: 600px;

            background-color: blue;

            margin: 0 auto;

​

        }

        .footer{

            width: 960px;

            height: 48px;

            background-color: yellow;

            margin: 0 auto ;

        }

        .header .logo{

            width:748px;

            height: 47px;

            background:url("image/netEasyLogo.jpg") no-repeat 0 0;/*从图片的坐标（0，0）开始铺，no-repeat就是只铺这一张不要多铺*/

            /*margin-top: 12px;*/

            float:left;

        }

        .header .links{

            height: 42px;

            width: 150px;

            /*background-color: red;*/

            float:right;

        }

        .header .logo a {

            width:156px;

            height:45px;/*测量出那一块区域，然后这一块区域都是超级链接*/

            /*background-color: red;*/

            display: inline-block;/*转换为行内块级标签*/

        }

        .header .links a{

            text-decoration:none;/*去掉下划线*/

            font-size: 16px;

            color:black;

            line-height: 45px;/*这里复习了文字不能居中，使用这个属性让它和links盒子的高度一致，那就做到文字在盒子中居中*/

            text-align: right;/*复习了文字右对齐*/

        }

        .content{

            width: 960px;

            height: 600px;

​

        }

        .content .top{

            width: 960px;

            height: 38px;

            background-color: red;

            background: url("image/wangyi_center.jpg") 0 0;/*让这张小图片把top这个区域全部铺满*/

        }

        .content .bottom{

            width: 960px;

            height: 562px;

            background-color: green;

        }

</style>

</head>

<body>

<div class="header">

    <div class="logo" >

        <a href="https://www.163.com/" title="网易163免费邮箱"></a><a href="https://www.126.com/" title="网易126免费邮箱"></a><a href="#" title="网易yeah免费邮箱"></a>

        <!--复习了a标签的使用，title就是指鼠标放到超链接上就会显示的文字-->

    </div>

    <div class="links">

        <a href="http://www.baidu.com">了解更多</a>|<a href="#">反馈意见</a>

    </div>

</div>

<div class="content">

    <div class="top"></div>

    <div class="bottom"></div>

</div>

<div class="footer"></div>

</body>

</html>

三、源码：

D139_FrameworkeOfNeteasyInterface.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D139_FrameworkeOfNeteasyInterface.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载52-网易注册界面之上部完成、中部初探的更多相关文章

  1. HTML51-清除浮动overflow、网易注册界面基本结构搭建

    一.overflow:hidden;作用 (1)可以将超出标签范围的内容裁剪掉 (2)清除浮动 .box1{ background-color: red; /*border:1px white sol ...

  2. HTML连载56-网易注册界面实战之全部代码

    一.今天完成了网易邮箱注册界面的全部编写,编写一个小小的网页就需要这么多时间来进行设计.测量.排版.编写.测试,才能进行使用,同时编写这个网页复习了几乎前面的所有内容,最后来一个汇总就可以了. < ...

  3. HTML连载55-网易注册界面实战之input填充

    一.又学一招:想要让两个盒子高度对齐,那么让他们浮动起来 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. HTML连载54-网易注册界面实战之信息填写

    一.完成了内容中的右边的一部分.练习了三点:小盒子在大盒子中的位置,最好用大盒子的内边距完成布局,而不是用小盒子的外边距来进行布局:复习了ul,li的用法. <!DOCTYPE html> ...

  5. HTML连载53-网易注册界面实战之content的头部、content注册信息

    一. 这次完成了content部分的右边图片以及content的top部分的边角填充 <!DOCTYPE html> <html lang="en"> &l ...

  6. H5 71-网易注册界面4

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML登录注册界面怎么制作？

    在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登 ...

  8. iOS开发——UI进阶篇（八）pickerView简单使用,通过storyboard加载控制器，注册界面，通过xib创建控制器，控制器的view创建，导航控制器的基本使用

    一.pickerView简单使用 1.UIPickerViewDataSource 这两个方法必须实现 // 返回有多少列 - (NSInteger)numberOfComponentsInPicke ...

  9. HTML练习----注册界面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 关于SQL2005备份和还原的语法操作

    原数据库:restore database 练习版 from disk='D:\db-recovery\@@@.BAK' WITH REPLACE/WITH NORECOVERY备份数据库:backu ...

  2. Mysql模式匹配两种方法

    一.使用LIKE或NOT LIKE比较操作符 使用 "_" 匹配任何单个字符,而 "%" 匹配任意数量的字符(包括零字符): 例如: 1.要想找出以“b”开头的 ...

  3. RabbitMQ学习笔记（八、RabbitMQ总结）

    1.什么是消息中间件 Message Queue Middleware,简称MQ,是一种利用高效可靠的消息传递机制进行与平台无关的数据交互的技术. 2.MQ的作用 异步:类似于短信业务,将需要发送的消 ...

  4. 关于jQuery MiniUI

    jQuery MiniUI v3.0 jQuery MiniUI - 专业WebUI控件库.它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验. http ...

  5. MySQL数据库解决大数据量存储问题

    转载自:https://www.cnblogs.com/ryanzheng/p/8334915.html 提问:如何设计或优化千万级别的大表?此外无其他信息,个人觉得这个话题有点范,就只好简单说下该如 ...

  6. vue axios 在 edge 浏览器下的bug

    Edge 浏览器的版本: Microsoft Edge 42.17134.1.0Microsoft EdgeHTML 17.17134 当请求为POST 时,转换为  GET,并且始终报  “来自缓存 ...

  7. SSM实现mysql数据库账号密码加密连接

    引言 咱们公司从事的是信息安全涉密应用的一些项目研发一共有分为三步,相比较于一般公司和一般的项目,对于信息安全要求更加严格,领导要求数据量和用户的用户名及密码信息都必需是要密文配置和存储的,这就涉及到 ...

  8. PAT 1011 World Cup Betting 查找元素

    With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...

  9. 10分钟彻底理解Redis的持久化机制：RDB和AOF

    作者:张君鸿 juejin.im/post/5d09a9ff51882577eb133aa9 什么是Redis持久化? Redis作为一个键值对内存数据库(NoSQL),数据都存储在内存当中,在处理客 ...

  10. Asp .Net Core Excel导入和导出

    ASP .Net Core使用EPPlus实现Api导入导出,这里使用是EPPlus 4.5.2.1版本,.Net Core 2.2.在linux上运行的时候需要安装libgdiplus . 下面我们 ...