页面布局（3）：网易首页

最新推荐文章于 2021-05-26 13:42:03 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2021-05-26 13:42:03 发布

阅读量755

点赞数

分类专栏： html CSS

本文链接：https://blog.csdn.net/tuzi007a/article/details/117192471

版权

CSS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

本文详细介绍了网易首页的布局特点，包括悼念专栏、响应式设计、三栏布局（中间固定宽度，两边自适应）以及在不同设备上的显示效果。在页面宽度变化时，nav栏和wrap的宽度会相应调整，确保在手机模式下仍能保持良好布局，提供优秀的用户体验。

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

大家好，我是梅巴哥er。本篇介绍网易首页的布局。

悼念专栏

2021年5月22日，也就是昨天，吴孟超院士和袁隆平院士离世，沉痛悼念两位老人，愿两位老先生一路走好。

网易首页链接

https://www.163.com/

页面特点

公司常用布局形式
- 响应式
- 三栏布局，中间固定宽度，两边自适应
- 页面宽度缩小到一定宽度，中间宽度不变
- 手机模式下可以正常观看页面
文字新闻类型，内容以文字为主

图片说明

先来看看首页全部宽度的情况下，顶部是一个全宽的nav栏。
下面是一个wrap包裹。用于包裹住内容的。
当我们缩小页面宽度时
nav宽度是随着页面的宽度而缩小的
wrap两侧的空白栏也是跟着缩小宽度的
但是wrap的宽度是不变的

在这里插入图片描述

当页面缩小到一定宽度时
wrap两侧的空白栏宽度为0
wrap宽度不会缩小，并且会被控制台覆盖

在这里插入图片描述

当页面宽度设置为手机时
页面布局仍然不会乱
仍然维持正常布局，不会影响用户的观看体验

在这里插入图片描述

草稿样式图

在这里插入图片描述

案例代码

<!--demo.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>netEase index</title>
  <link rel="stylesheet" href="demo.css">
</head>
<body>
  <nav class="navBar">网易首页</nav>
  <div class="wrap">
    <header class="header">https://www.163.com/</header>
    <div class="main-lists"></div>
    <div class="ad"></div>
    <div class="main-wrap"></div>
  </div>
</body>
</html>

/*demo.css*/
* {
  padding: 0;
  margin: 0;
}

.navBar {
  width: 100%;
  height: 45px;
  background-color: #333;
  line-height: 45px;
  color: #fff;
}

.wrap {
  width: 960px;
  margin: auto;
}

.header {
  width: 100%;
  height: 109px;
  background-color: beige;
  padding-top: 35px;
  box-sizing: border-box;
  border-bottom: 2px solid red;
}

.main-lists {
  height: 98px;
  background-color: chartreuse;
}

.ad {
  height: 200px;
  background-color: cyan;
}

.main-wrap {
  height: 500px;
  background-color: cornsilk;
}