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

<!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. FloatingActionButton动态更换背景色

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/186 FloatingActionButton 动态更换背 ...

  2. MySQL数据库～～～～～索引

    1. 索引 索引在MySQL中也叫"键"或者"key",是存储引擎于快速找到记录的一种数据结构. 索引的数据结构: B+树 B+树性质: 索引字段要尽量小; 索 ...

  3. Unity3D VidoePlayer 加载StreamingAssets下视频

    using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;usi ...

  4. 桶排序（C语言）

    #include <stdio.h> int main(void) { int arr[5]={2,5,1,3,3}; //定义需要排序的数组 int res[6]={0}; //初始化& ...

  5. [译]Vulkan教程(17)帧缓存

    [译]Vulkan教程(17)帧缓存 Framebuffers 帧缓存 We've talked a lot about framebuffers in the past few chapters a ...

  6. celery beat - 心跳包

    celery -A 项目名 beat -l info -S django# 启动心跳任务 celery -A 项目名  worker -l info # 启动1个worker去执行

  7. Xmind软件——xmind 8 pro下载激活推荐！！

    亲测有效,在csdn上找到一个. 下载激活xmind 8 pro链接

  8. 38条技巧优化PHP代码，来复习总结下吧

    1.如果一个方法能被静态,那就声明他为静态的,速度可提高1/4; 2.echo的效率高于print,因为echo没有返回值,print返回一个整型; 3.在循环之前设置循环的最大次数,而非在在循环中; ...

  9. java获取当前年份、月份和日期字符串等

    Java获取当前年份.月份和日期是通过Calendar类的实例对象来获取的. 首先创建一个Calendar类的实例对象,Calendar类属于java.util包. Calendar calendar ...

  10. Python list遍历remove()时的一个小BUG

    有这样一个列表: s=list('abcdefg') 现在因为某种原因我们需要从s中踢出一些不需要的元素,方便起见这里直接以踢出所有元素的循环代替: for e in s: s.remove(e) 结 ...