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

<!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. navicat连接不上Linux服务器上的mysql的解决办法

    一开始,心情是沉痛的,截图如下: 转载请注明出处:https://www.cnblogs.com/NaughtyCat/p/how-to-connect-to-mysql-on-linux-by-na ...

  2. MS SQL 设置自增长字段默认值

    dbcc checkident(tablename,reseed,value) 其中tablename为你所要修改的表名,value为默认值.比如你要设置自增长字段值从1开始,则: )

  3. (办公)记事本_Linux常用的目录命令

    参考尚硅谷的谷粒学院:http://www.gulixueyuan.com/course/300/task/7078/show#(免费看,课程很全面,用手机登录一下就行.) .[root@localh ...

  4. 使用ClickOnce发布Windows应用程序

    前言 因本人工作需要,在一名非常非常好的老师的指导下,入门了C#,再次向老师表示感谢. 本人平时经常遇到的业务就是将数据下发给各部门,并让各部门再上报,此过程中经常会遇到数据格式不正确,数据错误等诸多 ...

  5. Mybatis基本类型参数非空判断（异常：There is no getter for property...）

    先看一小段代码 <select id="queryByPhone" parameterType="java.lang.String" resultType ...

  6. SpringBoot系列之@PropertySource读取yaml文件

    SpringBoot系列之@PropertySource支持yaml文件读取 最近在做实验,想通过@PropertySource注解读取配置文件的属性,进行映射,习惯上用properties都是测试没 ...

  7. go语言之面向对象

    Go 语言结构体 Go 语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数据类型. 结构体是由一系列具有相同类型或不同类型的数据构成的数据集合. 结构体表示一项记录,比如保存图 ...

  8. oracle将时间加一天，加小时，加分，加秒

    前言 oracle 时间类型可以直接相加,但加的是天,以天为单位,我们了解了这个,加一天,一小时,一分,一秒就都简单了. 加一天 select to_date('2019-08-15 22:03:10 ...

  9. 详解Condition的await和signal等待/通知机制

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  10. Java每日一面(Part1:计算机网络)[19/10/13]

    作者:晨钟暮鼓c个人微信公众号:程序猿的月光宝盒 1.说说TCP三次握手 1.0 在此之前,什么是TCP? ​ TCP(传输控制协议) ​ 1.面向连接的,可靠的,基于字节流的传输层通信协议 ​ 2. ...