Tabla de contenido
Uno: ¿Qué es un diseño fluido?
Dos: cómo utilizar el diseño de flujo
Cuatro: ventajas y desventajas del diseño de flujo.
Uno: ¿Qué es un diseño fluido?
El diseño de flujo consiste en establecer el ancho del cuadro como un porcentaje para escalar según el ancho de la pantalla, sin estar limitado por píxeles fijos.
Dos: cómo utilizar el diseño de flujo
1. En primer lugar, hay que tener claro que tanto la página del lado de la PC como la página del lado del móvil están compuestas por pequeños cuadros. Cuando configuramos el ancho de cada cuadro pequeño como un porcentaje, la página se estira y el cuadro también se estirará junto con la página.
2. En segundo lugar, el diseño del flujo no tiene la forma de todos los diseños porcentuales, pero el cuadro está configurado en forma de diseño porcentual. En comparación con las imágenes y el texto del cuadro, todos tienen la forma de px o rem fijos. Cuando se estira la página web, el texto y las imágenes (sin establecer el porcentaje) se estirarán hasta cierto punto de acuerdo con el estiramiento y la reducción del cuadro.
Tres: caso de diseño de flujo
En este caso, la página de inicio del terminal móvil Jingdong.
estructura:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0"/>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title></title>
</head>
<body>
<!--顶部-->
<header class="app">
<ul>
<li><img src="img/叉号.png"/></li>
<li><img src="img/JD.png"/></li>
<li>打开京东App,购物更轻松</li>
<li>立即打开</li>
</ul>
</header>
<!--搜索-->
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon"></div>
<div class="fdj"></div>
</div>
<div class="search-login">登录</div>
</div>
<!--主体内容部分-->
<div class="main-content">
<div class="banner">
<img src="img/q70.jpg"/>
</div>
<!--蔡康永品牌日-->
<!--<div class="brand">
<div></div>
<div></div>
<div></div>
</div>-->
<!--nav部分-->
<nav>
<a href="">
<img src="img/超市.png"/>
<span>京东超市</span>
</a>
<a href="">
<img src="img/数码电视.png"/>
<span>数码电视</span>
</a>
<a href="">
<img src="img/京东新百货.png"/>
<span>京东新百货</span>
</a>
<a href="">
<img src="img/PLUS会员.png"/>
<span>PLUS会员</span>
</a>
<a href="">
<img src="img/jd速达.png"/>
<span>京东速达</span>
</a>
<a href="">
<img src="img/jd生鲜.png"/>
<span id="">
京东生鲜
</span>
</a>
<a href="">
<img src="img/jd国际.png"/>
<span>京东国际</span>
</a>
<a href="">
<img src="img/充值缴费.png"/>
<span>充值缴费</span>
</a>
<a href="">
<img src="img/附近好店.png"/>
<span>附近好店</span>
</a>
<a href="">
<img src="img/领卷.png"/>
<span>领卷</span>
</a>
</nav>
</div>
<div class="foods">
<div class="food_cols">
<div class="foods_one">
<img src="img/拖鞋.jpg!q70.dpg.webp"/>
</div>
<div class="foods_two">
<img src="img/皮鞋.jpg!q70.dpg.webp"/>
</div>
</div>
</div>
</body>
</html>estilo:
*{
margin: 0;
padding: 0;
}
/*ctrl+g可以跳转到想要到的行数*/
a{
text-decoration: none;
color:#666666;
}
body{
width:100%;
min-width:320px;
max-width: 640px;
margin: 0 auto;
background-color: #FFFF;
font-size: 14px;
line-height: 1.5;
color: #666;
/*background-color: gray;*/
}
.app{
height: 45px;
}
.app ul li{
height: 45px;
background-color: #333333;
float: left;
list-style: none;
line-height: 45px;
text-align: center;
color: #fff;
}
.app ul li:nth-child(1){
width: 8%;
}
.app ul li:nth-child(1) img{
width: 10px;
height: 10px;
}
.app ul li:nth-child(2){
width: 10%;
}
.app ul li:nth-child(2) img{
width: 30px;
vertical-align: middle;
}
.app ul li:nth-child(3){
width: 57%;
}
.app ul li:nth-child(4){
width: 25%;
background-color:#F3361C ;
}
.search-wrap{
height: 44px;
position: fixed;
/*position: absolute;*/
/*注意,子元素添加了margin-top,但没有起作用,为父元素添加0verflow-hiddn,
以实现作用*/
overflow: hidden;
background-color: #C6261D;
min-width: 320px;
max-width: 640px;
width: 100%;
}
.search{
height: 30px;
background-color: white;
margin: 0 50px;
border-radius: 15px;
margin-top: 7px;
position: relative;
}
.search-btn{
position: absolute;
left: 0;
top: 0;
/*background-color: pink;*/
width: 40px;
height: 44px;
}
.search-btn:before{
content: " ";
display: block;
width: 20px;
height: 18px;
background: url(../img/下载.png) no-repeat;
background-size: 20px 18px;
margin: 14px 0 0 15px;
}
.search-login{
position: absolute;
right: 0;
top: 0;
/*background-color: red;*/
width: 40px;
height: 44px;
text-align: center;
line-height: 44px;
color: white;
}
.jd-icon{
width: 20px;
height: 15px;
position: absolute;
left: 10px;
top: 8px;
background: url(../img/jd-sprites.png) no-repeat;
background-size:200px auto ;
}
.jd-icon::after{
position: absolute;
right:-10px;
top: 0;
content: "";
display: block;
width: 1px;
height: 15px;
background-color: #C0C0C0;
}
.fdj{
position: absolute;
width:18px;
height: 15px;
/*background-color: pink;*/
top: 8px;
left: 50px;
background: url(../img/jd-sprites.png) no-repeat -81px 0;
background-size:200px auto;
}
.banner img{
width: 100%;
/*height: 146px;*/
}
nav a{
float: left;
width: 20%;
text-align: center;
}
nav a img{
width: 40px;
margin: 10px 0;
}
nav a span{
display: block;
}
.foods .food_cols img{
width: 100%;
}
.foods_one,.foods_two{
width: 50%;
float: left;
}
Cuatro: ventajas y desventajas del diseño de flujo.
Ventajas: se estirará hasta cierto punto según el cambio de ancho de la página.
Desventaja: la imagen y el texto están configurados en un ancho fijo. Para un teléfono móvil de pantalla grande o una pantalla de PC, la imagen y el texto se estirarán demasiado. Por lo tanto, el uso flexible de diferentes métodos de diseño en la página es un problema en el que todo programador debería pensar.