猫眼网站建设/网站页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*一、盒模型html的元素可以看成是一个盒子，称为盒模型1、标准盒模型 w3c盒模型浏览器默认的盒模型1）组成部分content+padding+border+margin2）实际大小width+padding+border+margin2、怪异盒模型 IE盒模型box-sizing:border-box;1）组成部分content+padding+border+margin2）实际大小width+margin3、弹性盒模型 伸缩盒模型 flex box1）作用多用于移动端布局在弹性盒中float、clear、vertical不生效2）父元素上的属性①开启弹性盒模型display:flex;父元素开启弹性盒模型，子元素默认水平排列②设置弹性盒的方向flex-direction:row|column|row-reverse|column-reverse ;row:默认值 子元素从左往后水平排列column：子元素从上往下垂直排列row-reverse：子元素从右往左水平排列column-reverse：子元素从下往上垂直排列③设置子元素在主轴的对齐方式默认x轴为主轴，y轴为侧轴；当子元素垂直排列时，y轴为主轴，x轴为侧轴justify-content:flex-start|flex-end|center|space-between|space-around;flex-start:默认值 弹性盒的开始flex-end：弹性盒的结束center：居中space-between：在子元素之间平均分配父元素剩余的距离space-around：在子元素四周分配父元素剩余的距离，两端为中间的1/2④设置子元素在侧轴的对齐方式align-items:flex-start|flex-end|center;flex-start:默认值 弹性盒的开始flex-end：弹性盒的结束center：居中3）子元素上的属性父元素开启弹性盒模型后，子元素默认的宽度由内容撑开flex-grow:number;子元素分配父元素剩余距离的比例*/.box{height: 800px;background-color: deepskyblue;/*开启弹性盒模型 子元素默认水平排列*/display: flex;/*设置弹性盒的方向*//*flex-direction: column-reverse;*//*flex-direction: column;*//*设置子元素在主轴的对齐方式*//*justify-content: space-around;*//*设置子元素在侧轴的对齐方式*//*align-items: flex-end;*/}.one,.two,.three{height: 200px;flex-grow: 1;}.one{background-color: plum;/*flex-grow: 3;*/}.two{background-color: palegreen;/*flex-grow: 2;*/}.three{background-color: palegoldenrod;/*flex-grow: 3;*/}.four{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<div class="box"><div class="one">1</div><div class="two">2</div><div class="three">3</div><div class="four"></div>
</div></body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/iconfont.css"><link rel="stylesheet" href="css/03style.css">
</head>
<body>
<!--导航开始-->
<div class="nav"><div class="arrow"></div><div class="title"><img src="images/百度周边_05.png" alt="">发现周边服务</div><div class="search"></div>
</div>
<!--导航结束-->
<!--美食开始-->
<div class="food"><div><a href="#"><img src="images/百度周边_14.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_14.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_14.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_14.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_14.png" alt=""><p>美食</p></a></div>
</div>
<!--美食结束-->
<!--菜单部分开始-->
<div class="menu"><div class="menu-top"><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div></div><div class="menu-bottom"><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div><div><a href="#"><img src="images/百度周边_30.png" alt=""><p>美食</p></a></div></div>
</div>
<!--菜单部分结束-->
<!--为你优选开始-->
<div class="forU"><div class="wrap"><h1 class="forU-title">为你优选</h1><div class="forU-box"><div><a href="#"><img src="images/百度周边_66.png" alt=""></a></div><div><a href="#"><img src="images/百度周边_66.png" alt=""></a></div><div><a href="#"><img src="images/百度周边_66.png" alt=""></a></div></div></div>
</div>
<!--为你优选结束-->
<!--页脚开始-->
<div class="footer"><div><a href="#"><i class="iconfont"></i><p>首页</p></a></div><div><a href="#"><i class="iconfont"></i><p>首页</p></a></div><div><a href="#"><i class="iconfont"></i><p>首页</p></a></div>
</div>
<!--页脚结束--></body>
</html>