一 、布局
网站布局是一种定义网站结构的模式(或框架)。
它具有为网站所有者和用户构造网站上存在的信息的作用。它为网页内的导航提供了清晰的路径，并将网站的最重要元素置于网站的正面和中心。
良好的布局可以使用户留在网站上，因为它可以轻松访问重要信息并直观地查找它们。不良的布局会使用户感到失望。然后他们会因为找不到所需的内容而迅速离开网站。 出于这个原因，最好花尽可能多的时间找到所需的布局，因为用户给你的时间不会超过几秒钟。布局与用户对网站的参与度之间有着很强的关系，它确定了他们在网站页面上停留了多长时间，浏览了多少页面以及它们回到网站的频率。
1）、基础布局
网页布局有很多种方式，一般分为以下几个部分︰头部区域、菜单导航区域、内容区域、底部区域。
1.头部区域位于整个网页的顶部，一般用于设置网页的标题、logo、导航条、
2.内容区域位于整个网页的中间，用于布置网页的内容。
3.底部区域位于整个网页的底部，网页结尾部分多用于设置公司的logo、官网、公司名、
二、响应式布局
响应式布局比较有代表性的前端UI框架如Bootstrap、LayUl等。
1、移动设备优先
为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width，initia1-scale=1">
2、栅格布局
使用@media查询，你可以针对不同的媒体类型定义不同的样式。·大屏幕(大桌面显示器，大于等于1200px)
栅格系统的宽度:
- 超小屏幕(手机，小于768px): .col-xs-1
- 小屏幕(平板，大于等于768px): .col-sm-3
- 中等屏幕(桌面显示器，大于等于992px): .col-md-6.大屏幕(大桌面显示器，大于等于1200px): .col-lg-12
<!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>Document</title>
<style>
main {
width: 100%;
overflow: auto;
}
main div {
background-color: red;
margin-bottom: 5px;
float: left;
}
@media screen and (max-width:768px) {
main div {
width: 100%;
height: 50px;
}
}
@media screen and (min-width:768px) {
main div {
width: 33.3%;
height: 50px;
}
}
@media screen and (min-width:992px) {
main div {
width: 16.6%;
height: 50px;
}
}
@media screen and (min-width:1200px) {
main div {
width: 8.3%;
height: 50px;
}
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</main>
</body>
</html>
@media screen and (min-width:1200px) {
main div {
width: 8.3%;
height: 50px;
}
}
@media screen and (min-width:992px) {
main div {
width: 16.6%;
height: 50px;
}
}
@media screen and (min-width:768px) {
main div {
width: 33.3%;
height: 50px;
}
}
最低0.47元/天 解锁文章
1038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
