布局"/>
ACCP8.0Y2Web前端框架与移动应用开发第1章响应式布局
杂记：
1.实现弹性布局
①浮动+百分比
②display:flex布局：好处是可以让盒子里面的元素排成一行，盒子里面的高度保持一致
③flex的属性
伸缩流方向 flex-direction决定主轴的方向可改为垂直或水平
语法如下：
flex-direction:row | row-reverse | column | column-reverse
row:主轴水平
row-reverse:起点在右从右排列
column:垂直
column-reverse:主轴垂直起点在下
④伸缩换行flex-wrap
语法如下：
flex-wrap:nowrap | wrap | wrap-reverse
nowrap:默认单行不换行
wrap：多行显示
wrap-reverse：多行颠倒顺序
⑤主轴对齐justify-content
语法：
justify-content:
flex-start 伸缩项目向一行的起始位置靠齐 |
flext-ens 伸缩项目向一行的结束位置靠齐 |
center 伸缩项目向一行的中间位置靠齐 |
space-between平均分布在行里 第一个在开始最后一个在结尾 |
space-around评价分布在行里 两端保留一半空间 |
⑥侧轴对齐 align-items
语法：
align-items:
| stretch | 默认值。项目被拉伸以适应容器。 | |
| center | 项目位于容器的中心。 | |
| flex-start | 项目位于容器的开头。 | |
| flex-end | 项目位于容器的结尾。 | |
| baseline | 项目位于容器的基线上。 | |
| initial | 设置该属性为它的默认值。 | |
| inherit | 从父元素继承该属性。 |
⑦浮动+百分比方式布局可以适应屏幕但是如果两个元素高度不同则会出现空白部分
flex布局则会解决 上述问题
一.单词部分
①flex弹性布局 ②flex-direction伸缩方向 ③justify-content对齐 ④align-items对齐属性
⑤align-content垂直布局 ⑥media媒体 ⑦device-width设备宽度 ⑧orientation方向
⑨landscape竖屏 portraint横屏
二.预习部分
1.Flex布局的好处
可以适应不同屏幕大小的变化时元素位置的变化
2.媒体查询有什么作用
向不同设备提供不同样式的一种不错方式提升用户体验
3.响应式布局的优点
解决多设备显示
更少维护
缺点
工作量大
代码累赘
三.练习部分
1.制作爱V猫友情链接页面
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>爱V猫友情链接</title>
6 </head>
7 <style type="text/css">
8 #mainDiv{
9
10 }
11 #titDiv{
12 display: flex;
13 width: 100%;
14 justify-content: space-around;
15 align-items: center;
16
17 }
18 #leftAndright{
19
20 display: flex;
21 /*flex-direction: column;*/
22 background-color: darkgray;
23 justify-content:center;
24 }
25 #leftDiv{
26 margin-left: 100px;
27 background-color: azure;
28 display: flex;
29 flex: 1.5;
30 width: 5%;
31 /*justify-content:flex-start;*/
32 }
33 #rightSec{
34 /* background-color: crimson;*/
35 display: flex;
36 flex: 4;
37 margin-right: 100px;
38 /*width: 80%;*/
39
40
41 }
42 #pic{
43 display: flex;
44 flex-wrap: wrap;
45 justify-content: flex-start;
46 padding: 0 5%;
47 }
48 #pic li{
49 float: left;
50 margin: 5px;
51 }
52 ul li{
53 list-style-type: none;
54 }
55 #leftDiv ul li{
56 line-height: 30px;
57 }
58 footer{
59 display: flex;
60 flex-direction: column;
61
62 justify-content: center;
63 align-items: center;
64 }
65 footer ul li{
66 margin: 5px;
67 float: left;
68 }
69 footer ul.li{
70 list-style-type: none;
71 float: left;
72 /**/
73 justify-content: center;
74 }
75 </style>
76 <body>
77 <!--主div-->
78 <div id="mainDiv">
79 <!--头部-->
80 <div id="titDiv"><img src="image/logo.jpg" height="58" width="193"/><a>登录 注册</a></div>
81 <!--左和右div-->
82 <div id="leftAndright">
83 <!--左div-->
84 <section id="leftDiv">
85 <ul>
86 <li>公司介绍</li>
更多推荐
ACCP8.0Y2Web前端框架与移动应用开发第1章响应式布局
发布评论