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

<!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. C++ 进阶笔记之一

    优化相关 使用灵活的.动态分配的数据,不要使用固定大小多数组: 优先使用线性算法或者尽可能快的算法: push_back 散列表查询:O(1) set/map lower_bound/upper_bo ...

  2. React每隔0.2s颜色变淡 之settimeOut变成setInterval

    案例 每隔0.2s颜色变淡 公共数据是放在state中的哦! 代码如下 import React, { Component } from "react"; import { set ...

  3. 九、ITK-VTK混合编程--将序列dcm图像通过ITK读去并通过VTK显示出来

    一.初步介绍 上一个博客里面我记录了VTK的安装,以及相关的工程代码的构建,但是实际上上一个博客测试的代码的例子仅仅只是VTK程序的例子.而我实际上希望能够实现的是VTK和ITK混合编程. 在这里还是 ...

  4. BZOJ2820/LG2257 YY的GCD 莫比乌斯反演

    问题描述 BZOJ2820 LG2257 题解 求 \(\sum\limits_{i=1}^{n}{\sum\limits_{j=1}^{m}{[gcd(i,j)==p]}}\) ,其中 \(p\)为 ...

  5. Win10 中 Git clone github上内容保存到指定文件夹

    在要存储的右键→Git Bash Here 弹出命令窗口 输入 git clone 链接 很快就下载完成

  6. Spring Cloud Alibaba 实战(十一) - Spring Cloud认证授权

    欢迎关注全是干货的技术公众号:JavaEdge 本文主要内容: 如何实现用户认证与授权? 实现的三种方案,全部是通过画图的方式讲解.以及三种方案的对比 最后根据方案改造Gateway和扩展Feign ...

  7. router-view 与 动态组件 区别

    提问:router-view 可以页面跳转,使用 is特性 也可以进行页面跳转,有什么区别? 参考链接 https://segmentfault.com/q/1010000010750059

  8. JavaWeb中验证码校验的功能实现

    后台生成验证码工具方法 /* * 设置图片的背景色 */ public static void setBackGround(Graphics g, int WIDTH, int HEIGHT) { / ...

  9. [IDA] 自动下载符号

    当现实无法自动下载符号时,看下面交互窗口,提示安装 VC++ 2008. 安装成功之后就会自动下载符号.

  10. 小程序Canvas性能优化实战

    以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...