移动端开发3（前端一）
④align-items设置侧轴上的子元素排列方式（适用于单行，多行不行）
flex-start(默认)从上到下 flex-end从下到上
center 垂直居中 stretch 拉伸
⑤align-content为设置侧轴子元素排列方式（适用于多行，单行不行）
特性同④
⑥flex-flow
是flex-decoration和flex-wrap的合写
3.子项属性
①flex:;默认为0；占据分配剩余空间的份数
②align-self:剩余子项在自己侧轴的排列方式
auto(默认)表示继承父元素align-items属性
③order:定义项目的排列顺序（数值越小，排列越靠前）
4.颜色渐变（要求加浏览器私有前缀）
background: -(webkit)-liner-gradient（方向（默认从上柒起始），起始颜色，终止颜色）
------以上为Day12的内容
Day16
1.rem布局
rem优点可通过修饰html里文字大小改变页面元素
2.媒体查询
@media mediatype(screen) and/not/only(media feature){ css-code… };
媒体查询可根据不同尺寸改变不同的样式
3.媒体查询+rem实现元素变化
<link=“stylesheet” media=“screen and (minwidth: 30px )” href="">
针对不同尺寸调用不同css文件
Day17
1.响应式开发
@media screen and(max-width: 30px ){ };
2.Bootstrap(twiter推出)
框架：已有样式 移动端优先web项目 通过class类来使用 同是响应式开发
3.Bootstrap使用四部曲
创建文件结构----创建HTML骨架结构----引入样式文件----书写内容
4.Bootstrap可用类进行适当修改
5.布局容器
①container类（响应式布局，固有宽度）②container-fluid类（流式布局，百分比宽度）==>移动端适用
6.栅格系统
①实现类的平均划分，需给列前加类前缀（一行默认12等份—1200px）
②多种屏幕下显示时直接在类前类后空格加内容即可（加style样式），即多类名排列
③嵌套系统即在div下加份数（父盒子也相当于12等份）
7.响应式开发工具
hidden-xs/sm/md/lg
(超小屏)(小屏)(中屏)(大屏)
附练习代码：
生活馆
生活馆
生活馆
生活馆
生活馆
阿里百秀
是最优秀
阿里百秀
美的令人惊叹的旋风
美的令人惊叹的旋风
美的令人惊叹的旋风
美的令人惊叹的旋风
自然汇
自然汇 世界真美 令人惊叹 卫星拍地球风景地貌
据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 …
阅读(3868)赞 (65)标签：世界 / 全球 / 卫星 / 地貌 / 真美
自然汇
自然汇 世界真美 令人惊叹 卫星拍地球风景地貌
据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 …
阅读(3868)赞 (65)标签：世界 / 全球 / 卫星 / 地貌 / 真美
自然汇
自然汇 世界真美 令人惊叹 卫星拍地球风景地貌
据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 …
阅读(3868)赞 (65)标签：世界 / 全球 / 卫星 / 地貌 / 真美
自然汇
自然汇 世界真美 令人惊叹 卫星拍地球风景地貌
据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 …
阅读(3868)赞 (65)标签：世界 / 全球 / 卫星 / 地貌 / 真美
自然汇
自然汇 世界真美 令人惊叹 卫星拍地球风景地貌
据英国《每日邮报》9月6日报道，近日，由人造卫星拍摄的地球上最美妙的风景地貌图片将会在奥地利的林茨电子艺术中心展出。这些绝美的图片由欧洲空 …
阅读(3868)赞 (65)标签：世界 / 全球 / 卫星 / 地貌 / 真美
欢迎 4
欢迎加入中国博客联盟
欢迎来到中国博客联盟！这里只收录优秀独立博客，纯手工审核机制！
@media screen and(min-width: 1280px) {
.container {
width: 1280px;
width:1280px;
}
}
ul {
list-style-type: none;
}
a:hover {
text-decoration: none;
}
/* part of header */
header {
padding-left: 0!important;
}
.logo {
background-color: aqua;
}
.logo img {
/* logo图像不需要缩放 (调小时文字可居中)*/
max-width: 100%;
display: block;
margin: 0 auto;
}
.logo span {
display: block;
height: 50px;
font-size: 20px;
line-height: 50px;
color: #fff;
text-align: center;
}
@media screen and (max-width: 776px) {
.nav ul li a {
margin: 10px auto;
}
}
.nav li {
height: 50px;
margin-left: -30px;
line-height: 50px;
border-bottom: 1px solid #ccc;
}
.nav li a {
color: #333;
}
/* part of middle */
.up {
border-bottom: 1px solid #ccc;
}
.up li:nth-child(1) {
width: 50%;
height: 266px;
}
.up li:nth-child(1) a img {
margin-top: 15px;
display: block;
height: 220px;
}
.up li:nth-child(1) a h2 {
text-align: center;
line-height: 26px;
color: aqua;
}
.up li:nth-child(1) a h5 {
text-align: center;
}
.up li {
float: left;
margin-bottom: 20px;
margin-top: 9px;
margin-right: 3px;
width: 24%;
height: 130px;
}
.up li a {
position: relative;
}
.up li p {
position: absolute;
bottom: -75px;
left: 5px;
font-size: 13px;
color: orange;
width: 96%;
background-color: rgba(0, 0, 0, .5);
}
.down {
float: left;
margin-top: 20px;
border-top: 1px solid #ccc;
}
.down .border {
float: left;
border-bottom: 1px solid #ccc;
}
.down .border img {
margin-top: 12px;
}
.down .border h4 {
color: olivedrab;
}
/* part of right */
aside .photo {
width: 100%;
}
aside .textarea {
margin-top: 20px;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
aside .textarea h2 {
color: aqua;
font-size: 27px;
margin-top: 20px;
margin-left: 15px;
}
aside .textarea button {
margin-left: 20px;
}
aside .textarea p {
margin-top: 30px;
color: #333;
}