大家好，我是梅巴哥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;
}
以上。