700字范文 > web前端基础 html5+css3（十三.移动端）

web前端基础 html5+css3（十三.移动端）

时间：2024-01-30 01:34:11

一、移动端基础

1.视口

2.meta视口标签

3.二倍图做法

4.背景缩放background-size

5.背景图片2倍图

6.css3盒子模型

7.移动端特殊样式

二、移动端的常见布局

三、流式布局（百分比布局）

1.流式布局示例

2.京东首页流式布局案例

四、flex弹性盒子布局

1.flex布局体验

2.flex-direction设置主轴的方向

3.justify-content：设置主轴上子元素排列方式

4.flex-wrap：设置子元素是否换行

5.align-items设置侧轴上的子元素的排列方式（单行）

6.align-content：设置侧轴子元素排列方式（多行）

7.flex-flow：设置主轴方向和是否换行简写

8.子项flex属性使用

9.flex-self：控制子项自己在侧轴排列方式（属性与flex-items相同），order：设置单个子元素的排列位置，这两个属性都是可以控制单个子元素的

10.flex携程首页案例

css：

Html：

五、rem+less+媒体查询布局

1.rem单位

2.媒体查询@media

3.媒体查询案例修改背景颜色

4.媒体查询+rem实现元素动态变化

5.引入资源

6.Less+css

7.rem适配方案

8.苏宁易购项目实战（less+rem+媒体查询）

9.rem适配方案2（flexbie.js+rem（cssrem））

六、黑马公开课-黑马面面项目

html:

less:

七、响应式开发

1.响应式基本布局

2.响应式导航栏

3.Bootstrap简介

八、总结

一、移动端基础

1.视口

2.meta视口标签

<meta name="viewport" content="with=device-width,user-scalabel=no,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0">

3.二倍图做法

4.背景缩放background-size

background-size:背景高度背景宽度

单位：长度|百分比|cover|contain

cover：把背景图像扩展至足够大，使背景图像完全覆盖背景区域

contain：把图像扩展至最大尺寸，使其宽度和高度完全适应内容区域

5.背景图片2倍图

/*1.我们有一个50*50的盒子需要一个背景图片，但是根据分析这个还是要准备2倍 100*100*//*2.我们需要把这个图片缩放一把，也就是50*50 background-size*/div{width: 50px;height: 50px;border:1px solid pink;background: url(images/apple100.jpg) no-repeat;background-size: 50px 50px;}<div></div>

6.css3盒子模型

div:nth-child(1){/*传统盒子模型= width +border + padding*/width: 200px;height: 200px;background: skyblue;padding:10px;border: 1px solid #c00;}div:last-child{/*有了这句话就让盒子变成css3盒子模型*//*padding和border不会再撑大盒子了*/box-sizing:border-box;width: 200px;height: 200px;background: purple;padding: 10px;border: 1px solid #c00;}</style></head><body><div></div><div></div></body>

7.移动端特殊样式

css3盒子模型：box-sizing:border-box

-webkit-box-sizing:border-box

-ms-box-sizing:border-box

-moz-box-sizing:border-box

-o-box-sizing:border-box

点击高亮我们需要清除设置为transparent 完成透明

-webkit-tap-highlight-color:transparent

在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance:none;

禁用长按页面时的弹出菜单

img,a{-webkit-touch-callout:none;}

二、移动端的常见布局

三、流式布局（百分比布局）

max-width：最大宽度（max-hieght：最大高度）

min-width：最小宽度（min-height：最小高度）

1.流式布局示例

*{margin: 0;padding: 0;}section{width: 100%;max-width: 980px;min-height: 320px;margin: 0 auto;}section div{width: 50%;float:left;height: 400px;}section div:nth-child(1){background: pink;}section div:last-child{background: blue;}</style></head><body><section><div></div><div></div></section>

2.京东首页流式布局案例

body{width: 100%;max-width: 640px;min-width: 320px;margin:0 auto;font-size: 14px;font-family:-apple-system,Helvetica,sans-serif;color: #666;line-height: 1.5;}/*点击高亮我们需要清除清除设置为transparent 完成透明*/* {-webkit-tap-highlight-color: transparent;}/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/input {-webkit-appearance: none;}/*禁用长按页面时的弹出菜单*/img,a {-webkit-touch-callout: none;}img{vertical-align:middle;}ul{margin: 0;padding: 0;height: 45px;background: #333;}li{list-style: none;}.app{height: 45px;}.app ul li{float: left;height: 45px;line-height: 45px;color: #fff;text-align: center;}.app ul li:hover{cursor: position;}.app ul li:nth-child(1){width: 8%;}.app ul li:nth-child(1) img{width: 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: #f63515;}.search_swap{position: fixed;z-index: 1;height: 44px;overflow: hidden;max-width: 640px;min-width: 320px;width: 100%;}.search_swap .search_left{position: absolute;left: 0;top: 0; width: 40px;height: 44px;}.search_swap .search_left::after{content:'';background: url(../images/s-btn.png);width: 20px;height: 15px;display: inline-block;background-size: 20px 15px;margin: 15px 0 0 10px;}.search_swap .search{height: 30px;background: #fff;margin: 7px 50px 0;border-radius: 15px;position: relative;}.search .search_btn{content:'';background: url(../images/jd.png);width: 20px;height: 15px;background-size: 20px 15px;display: inline-block;position: absolute;top: 8px;left: 15px;}.search .search_btn::after{content:'';width: 1px;height: 15px;background: #ccc;display: inline-block;left: 30px;position: absolute;}.search .sou{background: url(../images/jd-sprites.png) -81px 0;width: 18px;height: 15px;position: absolute;left: 55px;top: 8px;background-size: 200px auto;}.search_swap .search_login{position: absolute;right: 0;top: 0; width: 40px;height: 44px;color: #fff;line-height: 44px;text-align: center;margin-right: 5px;}.search input{float: left;width: 80%;border: 0;height: 25px;margin: 2px 15px 0 85px;}.main_content{}.main_content .sider{position: relative;}.main_content .sider img{width: 100%;position: relative;}.nav_icon{position: absolute;height: auto;bottom: 20px;text-align: center;left: 43%;background: transparent;}.nav_icon li{width: 10px;height: 10px;border: 1px solid #fff;float: left;margin: 0 5px;border-radius: 5px;}.nav_icon .active,.nav_icon li:hover{background: #c00;cursor: pointer;}.sbanner{overflow: hidden;}.sbanner div{width: 33.33%;float: left;}.sbanner div img{width: 100%;}nav{clear: both;padding-top: 5px;overflow: hidden;}nav a{width: 20%;float: left;display: block;text-align: center;}nav a span{display: block;}nav a img{width: 40px;margin: 10px 0;}.news{margin: 20px 0 10px;overflow: hidden;}.news a{width: 50%;float: left;box-sizing: border-box;}.news a img{width: 100%;}.news a:nth-child(n+2){width: 25%;border-left: 1px solid #ccc;}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>www.</title></head><body><header class="app"><ul><li><img src="images/close.png"/></li><li><img src="images/logo.png"/></li><li>打开京东App，购物更轻松</li><li>立即打开</li></ul></header><div class="search_swap" id="search_swap"><div class="search_left"></div><div class="search"><div class="search_btn"></div><div class="sou"></div><input type="text" /></div><div class="search_login">登录</div></div><div class="main_content"><div class="sider"><img src="upload/banner.dpg"/><ul class="nav_icon"><li class="active"></li><li></li><li></li><li></li><li></li></ul></div><div class="sbanner"><div><a><img src="upload/pic11.dpg"/></a></div><div><a><img src="upload/pic22.dpg"/></a></div><div><a><img src="upload/pic33.dpg"/></a></div></div></div><nav><a><img src="upload/nav2.webp"/><span>jd超市</span></a><a><img src="upload/nav1.webp"/><span>jd超市</span></a><a><img src="upload/nav2.webp"/><span>jd超市</span></a><a><img src="upload/nav2.webp"/><span>jd超市</span></a><a><img src="upload/nav2.webp"/><span>jd超市</span></a><a><img src="upload/nav2.webp"/><span>jd超市</span></a><a><img src="upload/nav2.webp"/><span>jd超市</span></a><a><img src="upload/nav2.webp"/><span>jd超市</span></a><a><img src="upload/nav3.webp"/><span>jd超市</span></a><a><img src="upload/nav2.webp"/><span>jd超市</span></a></nav><div class="news"><a><img src="upload/new1.dpg"/></a><a><img src="upload/new2.dpg"/></a><a><img src="upload/new3.dpg"/></a></div><script type="text/javascript">window.onload=function(){window.onscroll = function() {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;if(scrollTop>40){document.getElementById('search_swap').style.setProperty('top', 0);document.getElementById('search_swap').style.setProperty('background','#c82519');}else{document.getElementById('search_swap').style.setProperty('top','45px');}}}</script></body></html>

四、flex弹性盒子布局

1.flex布局体验

div{display: flex;width: 60%;height:300px;background: pink;/*! justify-content:center; */}span{height: 100px;background: skyblue;margin:0 50px;flex:1;width: 47px;}<body><div><span></span><span></span><span></span></div></body>

这种布局方式小小的震撼到了我，get到了一种新技能

父盒子设为flex布局以后，子元素的float,clear,vertical-align属性将失效

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

2.flex-direction设置主轴的方向

flex-direction:row

row：默认值从左到右

row-reverse：从右到左

column：从上到下

column-reverse：从下到上

3.justify-content：设置主轴上子元素排列方式

flex-start：（默认）左→右 1→4

flex-end：左←右 4←1

center：居中对齐

space-around：平分剩余空间

space-between：先两边贴边，再平分剩余

x轴

div{display: flex;width: 800px;height: 300px;background: pink;/*默认的主轴是x轴 row*/flex-direction:row;/*justify-content：是设置主轴上子元素的排列方式*//*justify-content:flex-start;*//*justify-content:flex-end;*//*子元素居中对齐*//*justify-content:center;*//*平分剩余空间*//*justify-content:space-around;*//*先两边贴边，再平分剩余空间*/justify-content:space-between;}div span{width: 150px;height: 100px;background: skyblue;}<body><div><span>1</span><span>2</span><span>3</span><span>4</span></div></body></html>

y轴

div{display: flex;width: 800px;height: 500px;background: #c00;flex-direction:column;/*justify-content:flex-start;*//*justify-content:flex-end;*//*justify-content:center;*//*justify-content:space-around;*/justify-content:space-between;}div span{width: 150px;height: 100px;background: skyblue;}<body><div><span>1</span><span>2</span><span>3</span><span>4</span></div></body>

4.flex-wrap：设置子元素是否换行

nowrap：（默认）不换行

wrap：换行

div{display: flex;width: 800px;height: 500px;background: #c00;/*flex-direction:column;*//*justify-content:flex-start;*//*justify-content:flex-end;*//*justify-content:center;*//*justify-content:space-around;*/justify-content:space-between;flex-wrap: wrap;}div span{width: 150px;height: 100px;background: skyblue;}<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span></div></body>

5.align-items设置侧轴上的子元素的排列方式（单行）

flex-start：从上到下

flex-end：从下到上

center：挤在一起居中，垂直居中

stretch：拉伸（默认值）子元素不能设高度

baseline: 项目的第一行文字的基线对齐。

div{display: flex;width: 600px;height: 400px;background: #c00;/*默认的主轴是x轴 row*//*justify-content:center;*//*我们需要一个侧轴居中*//*拉伸，但是子盒子不要给高度*//*align-items:stretch;*//*align-items:center;*//*align-items:flex-start;*/align-items:flex-end;align-items:baseline;}div span{width: 150px;height: 100px;background: skyblue;color: #fff;margin: 0 10px;}<body><div><span>1</span><span>2</span><span>3</span><span>4</span></div></body>

6.align-content：设置侧轴子元素排列方式（多行）

只能用于子项出现换行的情况（多行），在单行下是没有效果的

flex-start：（默认值）在侧轴的头部开始排列

flex-end：在侧轴的尾部开始排列

center：在侧轴中间显示

space-around：子项在侧轴平分剩余空间

space-between：子项在侧轴先分布在两头，再平分剩余空间

stretch：设置子项元素高度平分父元素高度

div{display: flex;background: pink;width: 800px;height:400px;/*换行*/flex-wrap:wrap;/*因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-content*//*align-content:flex-start;*//*align-content:flex-end;*//*align-content:center;*//*align-content:space-around;*//*平分剩余空间*//*align-content:space-between;*//*先两边贴边，再平分剩余空间*/align-content:stretch;}div span{width: 150px;/*height: 100px;*/background: skyblue;color: #fff;margin: 0 10px;}<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span></div></body>

7.flex-flow：设置主轴方向和是否换行简写

flex-flow:colum wrap;

div{display: flex;background: pink;width: 800px;height:400px;/*flex-direction:column;flex-wrap:wrap;*//*把设置主轴方向和是否换行（换列）简写*/flex-flow:column wrap;}div span{width: 150px;height: 100px;background: skyblue;color: #fff;margin: 0 10px;}<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span></div></body>

8.子项flex属性使用

flex：1（默认0）

（1）京东移动端的菜单搜索和登录

section{display: flex;justify-content:center;width: 60%;height: 150px;background: pink;margin:0 auto;align-items: center;}section > div:nth-child(1){width: 100px;height: 120px;background: yellow;/*! align-items:center; */}section > div:nth-child(2){flex:1;background: green;height: 120px;}section > div:nth-child(3){width: 100px;height: 120px;background: skyblue;}</style></head><body><section><div></div><div></div><div></div></section></body>

（2）3等分，设置指定子元素宽度

p{display: flex;width: 60%;height: 200px;background: skyblue;margin: 100px auto;}p span{flex:1;background: #333;}p span:nth-child(2){flex:50%;background: #ddd;}<body><p><span>1</span><span>2</span><span>3</span></p></body>

9.flex-self：控制子项自己在侧轴排列方式（属性与flex-items相同），order：设置单个子元素的排列位置，这两个属性都是可以控制单个子元素的

flex-self可覆盖flex-items属性

p span{width: 150px;height: 100px;background: #333;margin-right: 5px;color: #fff;}p span:nth-child(1){order:-1;}p span:nth-child(3){order:-2;align-self:flex-end;}<body><section><div></div><div></div><div></div></section><p><span>1</span><span>2</span><span>3</span></p></body>

10.flex携程首页案例

css：

body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;color: #000;background: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;box-sizing: border-box;}ul {list-style: none;margin: 0;padding: 0;}a {text-decoration: none;color: #222;}.search_index{position: fixed;display: flex;min-width: 320px;max-width: 540px;height: 44px;background: #f6f6f6;width: 100%;top: 0;left: 50%;transform: translateX(-50%);border-top:1px solid #ccc;border-bottom: 1px solid #ccc;}.search_index .search{position:relative;flex:1;height: 26px;line-height: 24px;font-size: 12px;color: #666;border: 1px solid #ccc;margin: 8px 10px;padding-left: 30px;border-radius: 5px;box-shadow:0 2px 4px rgba(0,0,0,.2);/*水平,垂直,模糊,透明度*/}.search_index .search::before{content:'';position: absolute;top:5px;left: 8px;width: 15px;height: 15px;background: url("../images/sprite.png") no-repeat -59px -279px;background-size: 104px auto;}.search_index .user{width: 44px;height: 44px;font-size: 12px;text-align: center;color: #2eaae0;}.search_index .user::before{content:'';display: block;width: 23px;height: 23px;background: url("../images/sprite.png") no-repeat -59px -194px;background-size: 104px auto;margin: 4px auto -2px;}.focus {padding-top:44px;}.focus img{width: 100%;}.local_nav{display: flex;height: 64px;background: #fff;margin: 3px 4px;border-radius: 8px;text-align: center;}.local_nav li{flex:1;}.local_nav a{display: flex;flex-direction:column;align-items:center;font-size: 12px;}.local_nav li [class^="local-nav-icon"]{width: 32px;height: 32px;background: blue;background: url("../images/localnav_bg.png") no-repeat 0 0;background-size: 32px auto;margin: 8px auto 3px;}.local_nav li .local-nav-icon-c2{background-position:0 -32px;}.local_nav li .local-nav-icon-c3{background-position:0 -64px;}.local_nav li .local-nav-icon-c4{background-position:0 -96px;}.local_nav li .local-nav-icon-c5{background-position:0 -128px;}.nav{overflow: hidden;border-radius: 8px;margin: 0 4px 3px;}.nav .nav_common{display: flex;/*background: orange;*/background: -webkit-linear-gradient(left,#6ccbc9,#56cd78,#6ad45a);height: 88px;text-align:center;}.nav .nav_common:first-child{/*背景渐变必须加上浏览器的私有前缀-webkit-*/background: -webkit-linear-gradient(left,#fa6d53,#fb8450,#ffcb4f);}.nav .nav_common:nth-child(2){/*背景渐变必须加上浏览器的私有前缀-webkit-*/background: -webkit-linear-gradient(left,#4d99ed,#72c0eb,#73c6eb);}.nav .nav_common .nav_items{display:flex;flex-direction:column;flex:1;}.nav .nav_common .nav_items:first-child a{border: 0;background: url("../images/hotel.png") no-repeat bottom center;background-size: 121px auto;}.nav_items a{flex:1;line-height: 44px;color: #fff;font-size: :14px;/*文字阴影（水平,垂直,透明度）*/text-shadow:1px 1px rgba(0,0,0,.8);}.nav_items a:first-child{border-bottom:1px solid #fff;}/*-n+2:选择前两个元素*/.nav .nav_items:nth-child(-n+2){border-right: 1px solid #fff;}/*第二个元素加左右边框*//*.nav .nav_items:nth-child(2){border-left: 1px solid #fff;border-right: 1px solid #fff;}*/.nav .nav_common:nth-child(2){margin: 3px 0;}.subnav-entry{display: flex;flex-wrap:wrap;border-radius: 8px;background: #fff;margin: 0 4px;text-align: center;padding:5px 0;}.subnav-entry li{/*里面的盒子可以写%,相对于父级来说的*/flex:20%;}.subnav-entry a{display: flex;flex-direction:column;align-items:center;}.sybnav-entry-icon{width: 28px;height: 28px;margin-top:4px;background: url(../images/subnav-bg.png) no-repeat;background-size: 28px auto;}.subnav-entry li:nth-child(2) .sybnav-entry-icon{background-position:0 -28px;}.subnav-entry li:nth-child(3) .sybnav-entry-icon{background-position:0 -60px;}.sales_box{border-top:1px solid #bbb;background: #fff;margin: 4px;}.sales_hd{height: 44px;border-bottom: 1px solid #ccc;position: relative;}.sales_hd h2{position:relative;text-indent:-999px;overflow: :hidden;}.sales_hd h2::after{position: absolute;top:8px;left:8px;content: '';width: 79px;height: 15px;background: url("../images/hot.png") no-repeat 0 -20px;background-size: 79px auto;}.more{position: absolute;right: 10px;top: 0px;background: -webkit-linear-gradient(left,#FF506C,#FF6BC6);border-radius: 15px;padding:3px 20px 3px 10px;color: #fff;}.more::after{content:'';width: 7px;height: 7px;position: absolute;border-left: 2px solid #fff;border-top: 2px solid #fff;transform: rotate(135deg);top: 9px;right: 10px;}.row{display: flex;}.row a{flex: 1;border-bottom: 1px solid #eee;display: inherit;}.row a:first-child{border-right: 1px solid #eee;}.row a img{max-width: 100%;}.foot_nav{display: flex;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background: #fff;padding-bottom: 7px;margin-top: 5px;}.foot_nav li{flex: 1;} .foot_nav a{display: flex;flex-direction: column;align-items: center;}.foot_nav span{}.foot_nav .icon{width: 32px;height: 32px;background: url("../images/localnav_bg.png") no-repeat 0 0;background-size: auto;background-size: 32px auto;margin: 8px auto 2px;}

Html：

<!DOCTYPE html><html lang="Zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="shortcut icon" href="images/ico.png"/><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>携程在手，天下我有</title></head><body><div class="search_index"><div class="search">搜索：目的地/酒店/景点/航班号</div><a href="#" class="user">我的</a></div><div class="focus"><img src="upload/focus.jpg" alt="焦点图"/></div><ul class="local_nav"><li><a href="#" title="景点娱乐"><span class="local-nav-icon-c1"></span><span>景点娱乐</span></a></li><li><a href="#" title="景点娱乐"><span class="local-nav-icon-c2"></span><span>景点娱乐</span></a></li><li><a href="#" title="景点娱乐"><span class="local-nav-icon-c3"></span><span>景点娱乐</span></a></li><li><a href="#" title="景点娱乐"><span class="local-nav-icon-c4"></span><span>景点娱乐</span></a></li><li><a href="#" title="景点娱乐"><span class="local-nav-icon-c5"></span><span>景点娱乐</span></a></li></ul><div class="nav"><div class="nav_common"><div class="nav_items"><a href="#">海外酒店</a></div><div class="nav_items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav_items"><a href="#">团购</a><a href="#">民宿.客栈</a></div></div><div class="nav_common"><div class="nav_items"><a href="#">海外酒店</a></div><div class="nav_items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav_items"><a href="#">团购</a><a href="#">民宿.客栈</a></div></div><div class="nav_common"><div class="nav_items"><a href="#">海外酒店</a></div><div class="nav_items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav_items"><a href="#">团购</a><a href="#">民宿.客栈</a></div></div></div><ul class="subnav-entry"><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="sybnav-entry-icon"></span><span>电话费</span></a></li></ul><div class="sales_box"><div class="sales_hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div></div><div class="sales-bd"><div class="row"><a href="#"><img src="upload/pic1.jpg" alt=""/></a><a href="#"><img src="upload/pic2.jpg" alt=""/></a></div><div class="row"><a href="#"><img src="upload/pic3.jpg" alt=""/></a><a href="#"><img src="upload/pic4.jpg" alt=""/></a></div><div class="row"><a href="#"><img src="upload/pic5.jpg" alt=""/></a><a href="#"><img src="upload/pic6.jpg" alt=""/></a></div></div><ul class="foot_nav"><li><a href="#"><span class="icon"></span><span>电话预定</span></a></li><li><a href="#"><span class="icon"></span><span>下载客户端</span></a></li><li><a href="#"><span class="icon"></span><span>我的</span></a></li></div></body></html>

五、rem+less+媒体查询布局

1.rem单位

.（1）em是相对于父元素的字体大小来说的

div{font-size: 12px;}p{/*em相对于父元素的字体大小来说的*/width: 10em;height: 10em;background: #c00;}<div><p>21</p></div>

（2）rem相对于html元素字体大小来说的（rem的优点就是可以通过修改html里面的文字大小来对页面中元素的大小整体控制）

html{font-size: 14px;}p{background: #c00;width: 10rem;height: 10rem;}<div><p>21</p></div>

2.媒体查询@media

@media 查询类型关键字媒体特性

查询类型：all - 用于所有设备 print - 用于打印机和打印预览 screen - 用于电脑屏幕,平板电脑,智能手机等

关键字： and - 可以将多个媒体特性连接到一起，相当于且的意思 not - 排除某个媒体类型，相当于非，可以省略 only - 指定某个特定的媒体类型，可以省略

媒体特性：width - 页面可见区域的宽度 min-width - 页面最小可见区域宽度 max-width - 页面最大可见区域宽度

<style type="text/css">body{background: #c00;}@media screen and (max-width: 800px){body{background: purple;}}@media screen and (max-width: 400px){body{background: pink;}}</style>

3.媒体查询案例修改背景颜色

<style type="text/css">@media screen and (max-width:539px){body{background: blue;}}@media screen and (min-width:540px) and (max-width: 996px){body{background: red}}@media screen and (min-width: 970px){body{background: orange}}</style>

简写（css层叠性，重复的代码会被后面覆盖）

<style type="text/css">@media screen and (max-width:539px){body{background: blue;}}@media screen and (min-width:540px){body{background: red}}@media screen and (min-width: 970px){body{background: orange}}</style>

4.媒体查询+rem实现元素动态变化

<style type="text/css">*{margin:0;padding:0;}@media screen and (min-width: 320px){html{font-size: 50px;}}@media screen and (min-width: 640px){html{font-size: 100px;}}.top{height: 1rem;line-height: 1rem;background: #c00;color: #fff;text-align: center;}</style></head><body><div class="top"></div></body>

5.引入资源

当我们屏幕大于等于640以上时，我们让div一行显示2个

当我们屏幕小于640时，我们让div一行显示1个

使用媒体查询最好的方法是从小到大

<!DOCTYPE html><html lang="Zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><link rel="stylesheet" href="css/style320.css" media="screen and (min-width:320px)"></style><link rel="stylesheet" href="css/style640.css" media="screen and (min-width:640px)"></style></head><body><div>1</div><div>2</div></body></html>

style640.css

div{float: left; width: 50%;height: 100px;}div:nth-child(1){background: #c00;}div:nth-child(2){background: pink;}

style320.css

div{width: 100%;height: 100px;}div:nth-child(1){background: #c00;}div:nth-child(2){background: pink;}

6.Less+css

1.less变量

必须有@为前缀

不能包含特殊字符

不能以数字开头

大小写敏感

//定义一个粉色的变量@color:deeppink;//错误的变量名 @1color @color~@#//变量名区分大小写@color和@Color是两个不同的变量//定义了一个字体为14像素的变量@font14:14px;body,div{background: @color;font-size: @font14;}

2.less嵌套

less嵌套子元素的样式直接写到父元素里面就好了

如果有伪类，交集选择器，微元素选择器，我们内层选择器的前面需要加&

.header{width: 500px;height:500px;background: @color;//less嵌套子元素的样式直接写到父元素里面就好了a{color:@bgBlue;//伪类元素 + &//如果有伪类，交集选择器，微元素选择器，我们内层选择器的前面需要加&&:hover{color: green;}}&::before{content:"sb";}}<header class="header"><a>2142</a></header>

3.less运算

(1).我们运算符左右两侧必须敲一个空格隔开

(2).两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准

(3)两个数参与运算，如果两个数都有单位，而且是不一样的单位，最后的结果以第一个单位为准

@border:5px + 5;@baseFont:50px;//1.我们运算符左右两侧必须敲一个空格隔开//2.两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准//3.两个数参与运算，如果两个数都有单位，而且是不一样的单位，最后的结果以第一个单位为准html{font-size: @baseFont;}div{width:400px - 50;height: (40px+50px) * 2;border:@border solid pink;background: #c00 - #444;}img{// width: 87/50rem;// height: 85/80rem;width:82rem / @baseFont;height: 82rem / @baseFont;}

7.rem适配方案

目前项目是把整个屏幕切为7.5等份

750/7.5 = 100px

320/7.5 = 42.6667px

html,body {width:100%;height:100%;overflow-x:hidden;word-break:break-all;-webkit-font-smoothing:antialiased;}@media (min-width: 320px){html{font-size: 42.6667px;} }@media (min-width: 360px){html{font-size: 48px;} }@media (min-width: 375px){html{font-size: 50px;} }@media (min-width: 384px){html{font-size: 51.2px;} }@media (min-width: 414px){html{font-size: 55.2px;} }@media (min-width: 448px){html{font-size: 59.7333px;} }@media (min-width: 480px){html{font-size: 48px;} }@media (min-width: 512px){html{font-size: 68.2667px;} }@media (min-width: 544px){html{font-size: 72.5333px;} }@media (min-width: 576px){html{font-size: 76.8px;} }@media (min-width: 608px){html{font-size: 81.0667px;} }@media (min-width: 640px){html{font-size: 85.3333px;} }@media (min-width: 750px){html{font-size: 100px;} }

html {font-size: 100px;}@media screen and (max-width: 320px) {html {font-size: 42.6667px;}}div {width: 1rem;height: 1rem;background: deeppink;}<div></div>

得到不同屏幕尺寸下1:1的rem设置

8.苏宁易购项目实战（less+rem+媒体查询）

在一个css文件中引入另外一个css文件

@import "common";

//引入首页common.css文件@import "common";//@import 导入的意思，可以把一个css样式引入到另一个css样式文件里

Css:

common.less

html{font-size: 50px;}//设置常见的屏幕尺寸修改里面的Html文字大小//我们此次定义的划分的分数为15@no:15;@media screen and (min-width:320px){html{font-size: 320px / @no;}}@media screen and (min-width:360px){html{font-size: 360px / @no;}}//375 iphone 678@media screen and (min-width:375px){html{font-size: 375px / @no;}}@media screen and (min-width:384px){html{font-size: 384px / @no;}}@media screen and (min-width:400px){html{font-size: 400px / @no;}}@media screen and (min-width:414px){html{font-size: 414px / @no;}}@media screen and (min-width:424px){html{font-size: 424px / @no;}}@media screen and (min-width:480px){html{font-size: 480px / @no;}}@media screen and (min-width:500px){html{font-size: 500px / @no;}}@media screen and (min-width:540px){html{font-size: 540px / @no;}}@media screen and (min-width:720px){html{font-size: 720px / @no;}}@media screen and (min-width:750px){html{font-size: 750px / @no;}}

index.less

//引入首页common.css文件@import "common";//@import 导入的意思，可以把一个css样式引入到另一个css样式文件里body{min-width: 320px;width: 15rem;margin:0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;}@baseFont:50;@Hfont25:25rem/@baseFont;.Hfont25{font-size: @Hfont25;}a{text-decoration: none;}//页面元素rem公式：页面元素的px / html字体大小.search-content{display:flex;position:fixed;top:0;left: 50%;transform: translateX(-50%);//自己宽度的50%width: 15rem;height: 88rem / @baseFont;background: #ffc001;// align-items: center;.classify{width: 44rem/@baseFont;height: 70rem/@baseFont;background: #c00;background: url(../images/classify.png) no-repeat;margin: 11rem/@baseFont 25rem/@baseFont 7rem/@baseFont 24rem/@baseFont;background-size:44rem/@baseFont 70rem/@baseFont;}.search{flex:1;input{outline:none;border: 0;height: 66rem/@baseFont;border-radius: 33rem/@baseFont;width: 100%;background: #fff2cc;margin-top: 12rem/@baseFont;font-size: 25rem/@baseFont;padding-left: 55rem/@baseFont;color: #757575;}}.login{width: 75rem/@baseFont;height: 70rem/@baseFont;margin:10rem/@baseFont;text-align:center;color: #fff;line-height: 70rem/@baseFont;}}//banner.banner{width: 750rem/@baseFont;height: 368rem/@baseFont;img{width: 100%;height: 100%;}}.ad{display: flex;a{flex:1;img{width:100%;}}}nav{width: 750rem/@baseFont;a{float: left;width: 150rem/@baseFont;height: 140rem/@baseFont;text-align:center;}img{display:block;width: 82rem/@baseFont;height: 82rem/@baseFont;margin: 10rem/@baseFont auto 0;}span{font-size: 25rem/@baseFont;color: #333;}}

Html：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><link href="upload/sn.ico" rel="shortcut icon" mce_href="upload/sn.ico" type="image/x-icon" /><title>看爱情公寓5，上苏宁易购</title></head><body><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action=""><input type="search" placeholder="张伟大律师事务所"/></form></div><a href="#" class="login Hfont25">登录</a></div><div class="banner"><img src="upload/banner.gif" alt="爱情公寓"></div><div class="ad"><a href="#"><img src="upload/ad1.gif" alt=""></a><a href="#"><img src="upload/ad2.gif" alt=""></a><a href="#"><img src="upload/ad3.gif" alt=""></a></div><nav><a href="#"><img src="upload/nav1.png" alt=""><span>诸葛大力</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>张伟</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>诸葛大力</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>张伟</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>诸葛大力</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>张伟</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>诸葛大力</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>张伟</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>诸葛大力</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>张伟</span></a></nav></body></html>

9.rem适配方案2（flexbie.js+rem（cssrem））

1.flexbie.js：直接设置页面为n等份，不用自己再写媒体查询进行设置

需要重新设置cssrem的默认字体（默认字体大小是16，如果是划分成10等份的话字体就为75，15等份是50,7.5等份是100,以屏幕宽度是750px来算）

2.cssrem：px直接转成rem,不用再通过less计算

px转rem插件（cssrem,vsCode）可以直接安装

总结：flexbie.js+cssrem是一种便捷的工具，省去了设置页面分割的份数和转换px为rem，但是其原理还是建立在媒体查询和less之上的，只是一种利于开发的工具

css：

body {min-width: 320px;max-width: 750px;/* flexible 给我们划分了 10 等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;}a{text-decoration:none;font-size: .333333rem;}img{width: 1.093333rem;height: 1rem;}@media screen and (min-width:750px){html{font-size: 75px !important;}}.search_content{display: flex;position:fixed;top: 0;left: 50%;transform: translateX(-50%);width: 10rem;height: 1.173333rem;background: #ffc001;}.classify{width: .586667rem;height: .933333rem;margin: .146667rem .333333rem .133333rem;background: url(../images/classify.png) no-repeat;background-size: .586667rem .933333rem ;}.search{flex: 1;}.search input{border: 0;outline: none;width: 100%;height: .88rem;font-size: .333333rem;background: #fff2cc;margin-top:.133333rem;border-radius: .44rem;color: #757575;padding:0 .733333rem;}.login{width: 1rem;height: .933333rem;margin: .133333rem;line-height: .933333rem;text-align:center;font-size: .333333rem;color: #fff;}

html：

<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><link href="upload/sn.ico" rel="shortcut icon" mce_href="upload/sn.ico" type="image/x-icon" /><script src="js/flexible.js"></script><title>看爱情公寓5，上苏宁易购</title></head><body><div class="search_content"><a href="#" class="classify"></a><div class="search"><input type="search" placeholder="猪大力和猪益达"/></div><a href="#" class="login">登录</a></div></body></html>

六、黑马公开课-黑马面面项目

Swiper演示 - Swiper中文网 (电脑端，移动端脚本)

html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>白马face to face</title><link rel="stylesheet" href="./css/normalize.css"/><link rel="stylesheet" href="./css/swiper.min.css"><link rel="stylesheet" href="./css/index.css"/><script src="./js/flexible.js"></script></head><body><section class="wrap"><header class="text_align">白马面面</header><nav class="nav"><a href="#" class="item"><img src="./icons/icon1.png" alt=""/><span>HR面试</span></a><a href="#" class="item"><img src="./icons/icon2.png" alt=""/><span>笔试</span></a><a href="#" class="item"><img src="./icons/icon3.png" alt=""/><span>技术面试</span></a><a href="#" class="item"><img src="./icons/icon4.png" alt=""/><span>模拟面试</span></a><a href="#" class="item"><img src="./icons/icon5.png" alt=""/><span>面试技巧</span></a><a href="#" class="item"><img src="./icons/icon6.png" alt=""/><span>薪资查询</span></a></nav><section class="go"><img src="./images/go.png"/></section></section><section class="content"><div class="con-hd"><h4><span class="icon"><img src="./icons/i1.png"></span>就业指导</h4><a href="#" class="more">更多>></a></div><div class="get_job_focus"><div class="swiper-container get_job_fo swiper-container-initialized swiper-container-horizontal"><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-427.5px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 255px; margin-right: 30px;"><a href="#"><img src="./images/ldh.jpg" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 255px; margin-right: 30px;"><a href="#"><img src="./images/3.jpg" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 255px; margin-right: 30px;"><a href="#"><img src="./images/pic.png" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 255px; margin-right: 30px;"><a href="#"><img src="./images/ldh.jpg" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="2" style="width: 255px; margin-right: 30px;"><a href="#"><img src="./images/3.jpg" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 255px; margin-right: 30px;"><a href="#"><img src="./images/pic.png" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 255px; margin-right: 30px;"><a href="#"><img src="./images/ldh.jpg" alt=""></a><p>老师教你应对面试技巧</p></div></div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div><div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div><div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div></div></section><section class="content"><div class="con-hd"><h4><span class="icon"><img src="./icons/i1.png"></span>充电学习</h4><a href="#" class="more">更多>></a></div><div class="study"><div class="swiper-container swiper_study"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./images/pic1.png" alt="" /><h5>说低调英语，告别中式英语</h5><p>156人学习</p></div><div class="swiper-slide"><img src="./images/pic2.png" alt="" /><h5>说低调英语，告别中式英语</h5><p>156人学习</p></div><div class="swiper-slide"><img src="./images/pic1.png" alt="" /><h5>说低调英语，告别中式英语</h5><p>156人学习</p></div><div class="swiper-slide"><img src="./images/pic1.png" alt="" /><h5>说低调英语，告别中式英语</h5><p>156人学习</p></div></div><div class="swiper-pagination"></div></div></div></section><footer class="footer"><a href="#" class="item"><img src="./icons/home.png" alt=""><p>首页</p></a><a href="#" class="item"><img src="./icons/ms.png" alt=""><p>模拟面试</p></a><a href="#" class="item"><img src="./icons/net.png" alt=""><p>技术面试</p></a><a href="#" class="item"><img src="./icons/user.png" alt=""><p>我的首页</p></a></footer><script src="./js/swiper.min.js"></script><script src="./js/flexible.js"></script><script>// 第一个函数里面是就业指导轮播图(function () {var swiper = new Swiper(".get_job_fo", {// 能够显示的 slider的个数slidesPerView: 2,// 每一个slide之间的距离spaceBetween: 30,centeredSlides: true,loop: true,// 添加左右箭头navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});})();(function(){var swiper = new Swiper('.swiper_study', {slidesPerView: 2.2,spaceBetween: 20});})()</script></body></html>

less:

body{min-width: 320px;max-width: 750px;margin: 0 auto;// height: 1200px;background-color: #f2f4f7;}.text_align{text-align: center;}a{text-decoration:none;color: #070707;}h4{margin:0;}//约束当屏幕大于750px的时候，html字体大小就不变化了@media screen and (min-width:750px){html{font-size: 37.5px !important;}}.wrap{background: #fff;padding-bottom: 1.146667rem;}header{height: 2.133333rem;line-height: 2.133333rem;border-bottom: 1px solid #eee;font-size: .933333rem;}.nav{display: flex;flex-wrap:wrap;padding: 1.2rem 0 1.6rem 0;.item{display: flex;flex-direction: column;align-items:center;/*水平居中*/width: 33.33%;img{width: 3.706667rem; height: 3.706667rem;}span{font-size: .666667rem;color: #070707;}//选择前面3个&:nth-child(-n+3)//&表示:{margin-bottom: 1.653333rem;}}}.go{margin: 0 .266667rem 0 .48rem;}.content{padding:1.066667rem .533333rem;background-color: #fff;margin-top: .266667rem;.con-hd{display: flex;justify-content: space-between;height: .746667rem;line-height: .746667rem;margin-bottom: 0.906667rem;}h4{font-size: .746667rem;color: #333;.icon{display: inline-block;width: 1.013333rem;height: 1.013333rem;vertical-align: middle;}}.more{font-size: .586667rem;color: #999;}}.get_job_focus {position: relative;.swiper-container {// width: 100%;height: 100%;// 根据需求把宽度定位 540pxwidth: 14.4rem;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;// 竖向显示flex-direction: column;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;transition: 300ms;// 其余的兄弟是 0.8transform: scale(0.8);opacity: 0.4;a {width: 9.013333rem;height: 10.026667rem;img {width: 100%;height: 100%;}}p {width: 9.013333rem;font-size: 0.666667rem;margin-top: 0.64rem;color: #333;}}// 当前选中的 slide 中间那个.swiper-slide-active,.swiper-slide-duplicate-active {transform: scale(1);z-index: 999;opacity: 1;}.swiper-button-next,.swiper-button-prev {outline: none;&:after {font-size: 1.066667rem;color: #333;}}}.study{.swiper_study{padding: .266667rem;margin-bottom: 2.666667rem!important;}.swiper-slide {font-size: 18px;background: #fff;width: 7.733333rem;height: 9.066667rem;background-color: #fff;border-radius: 0.266667rem;box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);h5{font-size: 0.693333rem;margin: 0.533333rem 0;font-weight: 400;padding: 0 0.266667rem;}p {font-size: 0.693333rem;color: #ff4400;padding: 0 0.266667rem;}}}.footer{position:fixed;z-index: 1;left: 0;bottom: 0;width: 100%;height: 2.933333rem;background: #fff;display: flex;border-top: 1px solid #ccc;.item{display: flex;flex-direction: column;flex: 1;align-items: center;justify-content: center;img{width: 1.04rem;height: 1.093333rem;}p{font-size: 0.586667rem;color: #666666;margin-top: 0.266667rem;}}}

七、响应式开发

1.响应式基本布局

<!DOCTYPE html><html lang="Zh-CN"><head><meta name="viewport" content="with=device-width,user-scalabel=no,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0"><meta charset="UTF-8"><title></title><style type="">.container{height: 150px;background: pink;margin: 0 auto;}/*1.屏幕小于768*/@media screen and (max-width:767px){.container{width: 100%;}}/*2.大于等于768 -- 屏幕为750px*/@media screen and (min-width:768px){.container{width: 750px;}}/*3.中等屏幕992px 布局容器修改为970px*/@media screen and (min-width:992px){.container{width: 970px;}}/*4.大屏幕大于等于1200 布局容器 1170*/@media screen and (min-width:1200px){.container{width: 1170px;}}</style></head><body><div class="container"></div></body></html>

2.响应式导航栏

<!DOCTYPE html><html lang="Zh-CN"><head><meta name="viewport" content="with=device-width,user-scalabel=no,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0"><meta charset="UTF-8"><title></title><style type="">*{margin: 0;padding: 0;}ul{list-style: none;}.container{width: 750px;margin: 0 auto;}.container ul li{float: left;text-align: center; width: 93.75px;border-radius:10px; height: 40px;line-height: 40px; background: purple;color: #fff;}@media screen and (max-width:767px){.container{width: 100%;}.container ul li{width: 33.333%;}}</style></head><body><div class="container"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div></body></html>

3.Bootstrap简介

网址：

<meta http-equiv="X-UA-Compatible" content="IE=edge">/*要求当前网页使用IE浏览器最高版本的内核来渲染*/

.container类：响应式布局的容器

.container-fluid类：流式布局，100%宽度，适用于移动端

lg（col-lg）：大 md（col-md）：中等 sm（col-sm）：小 xs（col-xs）：超小

col-lg-3：最后接切割的份数页面为12份

每一列都有默认的padding 15像素

（1）bootstarp栅格系统

0.列嵌套

列中再分成若干小份。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素刂已经存在的.col-sm-*元素内

.colpur{background: purple !important;} <div class="container"><div class="row"><div class="col-md-4"><div class="col-md-4 colpur">l</div><div class="col-md-8 colpur">h</div></div><div class="col-md-4">2</div><div class="col-md-4">3</div></div></div>

1.列偏移

.col-md-offset-*类可将列向右侧偏移。通过*选择器为当前元素增加了左侧的边距

<style>.row div {height:40px;line-height:40px;background:pink;color: #fff;text-align:center;}</style><div class="container"><div class="row"><div class="col-md-4">左侧</div><div class="col-md-4 col-md-offset-4">右侧</div></div><div class="row"><div class="col-md-8 col-md-offset-2">中间</div></div></div>

2.列排序

通过.col-md-push-* 和 .col-md-pull-*类就可以很容易的改变列（column）的顺序

<div class="contanier"><div class="row"><div class="col-md-4 col-md-push-8">左侧</div><div class="col-md-8 col-md-pull-4">右侧</div></div></div>

3.响应式工具

根据不同设备大小隐藏/显示不同内容

超小屏：.hidden-xs .visible-xs

小屏：.hidden-sm .visible-sm

中屏：.hidden-md .visible-md

大屏：.hidden-lg .visible-lg

.row div:nth-child(3){background: purple;} <div class="container"><div class="row"><div class="col-md-3"><span class="visible-sm visible-sm-md">我会显示哦</span></div><div class="col-md-3">2</div><div class="col-md-3 hidden-md hidden-xs">我最特别</div><div class="col-md-3">4</div></div></div>

4.阿里秀秀案例（响应式设计bootstarp）

html：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="bootstarp/css/bootstrap.min.css"/><link rel="stylesheet" href="css/index.css"/><title>阿里秀秀</title><style></style></head><body><div class="container"><div class="row"><header class="col-md-2"><div class="logo"><a href="#"><img src="images/logo.png" alt="logo" class="hidden-xs"/><span class="visible-xs">阿里秀秀</span></a></div><div class="nav"><ul><li><a href="#" class="glyphicon glyphicon-list-alt">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-home">自然汇</a></li><li><a href="#" class="glyphicon glyphicon-eye-open">刘亦菲</a></li><li><a href="#" class="glyphicon glyphicon-magnet">胡歌</a></li><li><a href="#" class="glyphicon glyphicon-education">古月文刂</a></li></ul></div></header><article class="col-md-7"><div class="news clearfix"><ul><li><a href="#"><img src="upload/lg.png" alt=""/><p>阿里秀秀</p></a></li><li><a href="#"><img src="upload/1.jpg" alt="4"/><p>奇了成都一小区护卫长得像马云市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/2.jpg" alt="3"/><p>奇了成都一小区护卫长得像马云市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/3.jpg" alt="1"/><p>奇了成都一小区护卫长得像马云市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/4.jpg" alt="2"/><p>奇了成都一小区护卫长得像马云市民纷纷求合影</p></a></li></ul></div><div class="publish"><div class="row"><div class="col-sm-9"><h3>生活馆关于指甲的10个健康知识你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/4.jpg" alt="新闻图片"/></div></div><div class="row"><div class="col-sm-9"><h3>生活馆关于指甲的10个健康知识你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/4.jpg" alt="新闻图片"/></div></div><div class="row"><div class="col-sm-9"><h3>生活馆关于指甲的10个健康知识你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 -11-23</p><p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/4.jpg" alt="新闻图片"/></div></div></div></article><aside class="col-md-3"><a href="#" class="banner"><img src="upload/zgboke.jpg"/></a><a href="#" class="hot"><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入中国博客联盟</h4><p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p></a></aside></div></div></body></html>

css：

ul{list-style-type: none;margin: 0;padding: 0;}body {background-color: #f5f5f5;}a{color:#666;text-decoration: none;}a:hover{text-decoration: none;}.container{background-color: #fff;}/*修改container的最大宽度为1280*/@media screen and (min-width:1280px){.container{width: 1280px;}}/*小屏幕，超小屏幕*/@media screen and(max-width:991px){.nav li{float:left;width: 20%;}article{margin-top: 10px;}.news li:last-child{padding-right: 0;}aside{padding-top: 10px;}}/*超小屏幕 nav文字会变成14px*/@media screen and(max-width:767px){header{padding-right: 0 !important;}.nav li a{font-size: 14px;padding:0 10px;text-align: center;}.news li:nth-child(1){width: 100% !important;padding-right: 0!important;}.news li:nth-child(3){padding-right: 0;}.news li{width:50%!important;}.publish h3{font-size: 14px;}}/*header*/header{padding-left:0!important;}.logo{background:#429ad9;}.logo img{max-width: 100%;display: block;margin: 0 auto;}.logo span{display: block;height: 50px;line-height: 50px;color: #fff;font-size: 18px;text-align: center;}.nav{background-color:#eee;border-bottom: 1px solid #ccc;}.nav a{display: block;height: 50px;line-height:50px;padding-left:30px;font-size: 16px;}.nav a:hover{background-color: #fff;color: #333;}.nav a::before{vertical-align:middle;padding-right: 5px;}.news li{ float: left;width:25%;height: 128px;padding-right: 10px;margin-bottom: 10px;}.news li a{position: relative;display: block;width: 100%;height: 100%;}.news li:nth-child(1){width: 50%;height: 266px;}.news li a img{width: 100%;height: 100%;}.news li a p {position:absolute;bottom: 0;left: 0;width: 100%;height: 41px;padding: 0 10px;font-size: 12px; margin-bottom: 0; background: rgba(0,0,0,.5);color:#fff;}.news li:nth-child(1) p {line-height: 41px;font-size: 20px;padding: 0 10px;}.publish{border-top:1px solid #ccc;}.publish .row{border-bottom:1px solid #ccc;padding: 10px 0;}.pic{margin-top:10px;}.pic img{width: 100%;}.banner img{width: 100%;}.hot{display: block;margin-top:20px;padding: 0 20px 20px; border: 1px solid #ccc;}.hot span{border-radius: 0;margin-bottom: 20px;}.hot p{font-size: 12px;}

八、总结

从.06.15开始今天.04.03历时10个月，终于把pink老师的前端基础528个视频全部学完，每个视频看完都认真跟着敲代码并做详细的笔记，在其中学到了许多html5和css3的新特性，把以前初略学过的知识详细/系统的学习了一遍，本来可以不超过3个月学完的东西，我却花了10个月，中间穿插了一些公司的项目又或者是自己懒不想学，以后要努力自律变成更好的自己，这一年的不自律其实也没有得到什么，反而觉得更加的焦虑.html5+css3的学习已经告一段落，接下来进阶Js.加油，干巴爹！！！ヾ(◍°∇°◍)ﾉﾞ

这个是HTML,CSS,HTML5思维导图我学习html这段时间来整理的思维导图，方便以后查阅

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。