Springboot使用Thymeleaf时静态资源不起作用解决方法 Springboot项目将HTML与CSS，JS都分别放入了resources文件夹下的templates与static文件夹下了。 HTML中CSS与JS的引用部分需要做修改JS部分，增加了 th:src="@{路径}"，另外，图片的引用也需要添加<script th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js" th:></script> <script th:src="@{/js/semantic.min.js}" src="../static/js/semantic.min.js"></script>CSS部分，增加了 th:href="@{路径}" <link rel="stylesheet" href="../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}"> <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">然后在 application.yml 中增加配置： web: resources: static-locations: classpath:/static/,classpath:/templates/另外，最好也修改 thymeleaf 的缓存为 false thymeleaf: mode: HTML cache: false最后rebuild一下项目，通常问题就解决了。

Springboot+LayUI使用百度地图显示多个地点 因工作业务需要，使用百度地图API，通过输入多个地点的经纬度，显示在百度地图上，并结合springboot+layui进行展示页面模板用的是freemarker。JS代码：<script type="text/javascript"> var markerArr = [ {title: "名称：宜阳恒丰园烩面馆", point: "112.182404, 34.52419", address: "宜阳县文明路恒丰园食府", tel: "未知"}, {title: "名称：宜阳钓鱼岛酒店", point: "112.194981,34.521459", address: "洛阳宜阳县城关镇红旗中路 ", tel: "未知"}, {title: "名称：宜阳锦龙喜宴酒店", point: "112.1996,34.5269", address: "宜阳县城关镇锦龙大道锦龙广场内", tel: "未知"}, {title: "名称：百姓厨房", point: "112.196712,34.521718", address: "洛阳宜阳县城关镇红旗中路与丰源路交叉口", tel: "未知"} ]; var map; //Map实例 function map_init() { map = new BMap.Map("map"); //第1步：设置地图中心点，宜阳钓鱼岛酒店 var point = new BMap.Point(112.194981, 34.521459); //第2步：初始化地图,设置中心点坐标和地图级别。 map.centerAndZoom(point, 11); //第3步：启用滚轮放大缩小 map.enableScrollWheelZoom(true); //第4步：向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //第5步：向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //第6步：向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //第7步：绘制点 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var maker = addMarker(new window.BMap.Point(p0, p1), i); addInfoWindow(maker, markerArr[i], i); } } // 添加标注 function addMarker(point, index) { var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); return marker; } // 添加信息窗口 function addInfoWindow(marker, poi) { //pop弹窗标题 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '<\/div>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:<\/td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' <\/td>'); html.push('<\/tr>'); html.push('<\/tbody><\/table>'); var infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 200}); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("mouseover", openInfoWinFun); return openInfoWinFun; } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } window.onload = map_load; </script>完成以上代码后，打开页面即可看到百度地图，已经刚刚添加4个地点，鼠标移入的时候能够展示出信息。但是这时候有一个不是很好看的地方，那就是地图左下角有一个百度地图的logo和一行文字。如何去掉呢？通过css样式隐藏掉，在 标签内添加css样式：<#-- 删除百度地图左下角的logo以及文字 --> <style type="text/css"> .BMap_cpyCtrl, .anchorBL { display: none; } </style>

CSS3学习笔记 Background属性background-color 背景颜色 可用英文单词 或者 RGB(X,X,X)background-image 背景图片， background-image: url(xxxx.png);background-repeat 是否重复，比如，当图片不够大时，选择repeat则会用多张图片填满，边缘显示可能不完整，如果设置为 no-repeat 就只显示那张图片，不会出现多张同样的。background-position 这是设置图片的位置，分为 水平方向 和 垂直方向<br/>水平方向有 left center right<br/>垂直方向有 top center bottom<br/>用法： background-position: right top; // 显示在右上角 先 水平 再 垂直 <br/>当然 right 跟 top 可以替换成 像素 如 200px 200px 距离左边200像素 上边200像素。连写顺序：background: background-color background-image background-repeat background-position字体属性font-size: 20px;font-style: normal; // Italy 斜体 normal 是正常color: red;font-family: "楷体";font-weight: bold bolder lighter // 粗 加粗 细线连写顺序：font: font-style font-weight font-size font-family// font-size 跟 font-family 必须得有，而且必须得放在最后两个行内元素可以多个标签放在同一行，但不能设置宽高（其实不是不能，而是设置了但没效果）有这些元素： span u b i s ins strong del em a块级元素块级元素都是单独占一行的，可以设置宽和高有这些元素： div p h ul ol dl li通过设置 display 属性，可以让标签，既能够设置宽和高又能够在同一行（行内块级元素） display: inline-block; // 还可以是 block inlinea标签的字体颜色是不会从父级元素继承下来的，要想设置其颜色要直接指定，比如这个a标签有class或者id，就直接给它的class或者id设置属性h标签的字体大小也不会从父级元素中继承下来。如果 div不设置宽和高，那么这个div的宽会 从父级元素直接继承下来 ，但不会继承高度，也就是说高度为0（记住宽可以继承，高不可以继承）CSS初始化 *{margin: 0; padding: 0;}让一个div居中，（仅仅是水平居中） margin: 0 auto; 字体的居中用 text-align: center一个class可以被多个标签使用，一个标签也可以有多个class但是 一个个标签只能有一个id，一个id也只能被一个标签使用。通配符在进行选择时，会遍历页面上的所有标签，并给其设置相应的属性（所以一般情况下不建议使用）标签选择器子元素选择器（用大于号 > 进行选择）子元素选择器只作用于第一代子元素，也就是直接子元素<div class="father"> <p class="son1">abc</p> <p class="son2">def</p> <div class="son"> <p class="son4">gfh</p> </div> <p class="son3">jkl</p> </div>.father > p 则是 选择 father这个父div下的直接 p 元素（也就是son1 son2 son3 三部分）后代选择器 （父元素与子元素用 空格 隔开）还是上面的代码 如果是 .father .son p{样式} 则会选择所有的 p 标签也就是说，后代选择器，作用于 N（自然数） 代子元素。<br/><br/><br/><br/><br/><br/>CSS 3圆角效果border-radius: 10px; 设置圆角不同浏览器有不同的内核渲染，为了兼容要这样写：-webkit-border-radius: 50%; // chrome和Safari -moz-border-radius: 50%; // Firefox -ms-border-radius: 50%; // ie -o-border-radius: 50%; // opera border-radius: 50%; // 一般一个矩形分四个角，左上，右上，左下，右下。border-top-left-radius: 10px; // 左上角10px圆角 border-top-right-radius: 10px; // 右上角10px圆角 border-bottom-left-radius: 10px; // 左下角10px圆角 border-bottom-right-radius: 10px; // 右下角10px圆角四个属性可单独设置。另一种设置圆角的方法：参数值为1个：四个角都是该圆角属性border-radius: 10px 8px; // 左上角和右下角为10px 右上角和左下角为8px border-radius: 10px 8px 9px; // 左上角为10px 右上角和左下角为8px 右下角为9px border-radius: 10px 8px 9px 7px; // 左上角为10px 右上角为8px 右下角为9px 左下角为7px盒子阴影box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];假设扩展半径设置为10px;则阴影会向上向下向左向右增加10px； （可以有负值）阴影模糊半径设置后，阴影没那么生硬，会模糊。值越大，模糊面积越大。(没有负值)x轴偏移量是指阴影会超出背景图片横向多少px。 y则超出背景图片纵向多少。x 和 y可以有负值，x负的会向左，y负会向上。（正的是右下）如果要让阴影出现在盒子里面，则在 box-shadow: 作为第一个参数或者放在最后，其他位置无效。 有inset时，x和y正值为左和上。为边框应用图片使用 border-image, 语法：切割图片的宽度，也就是四个 70 那里，是根据 border: 70px solid red; 里面的70来设定的，如果里面是 60，则border-image上的也是设置60。颜色之RGBAcolor：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。渐变色彩第一个参数：指定渐变方向，可以用“角度”的关键词或“英文”来表示：图片中少了 to bottom left (从右上角到左下角) 和 to bottom right (从左上角到右下角)​​ 第一个参数省略时，默认为“180deg”，等同于“to bottom”。​​ 第二个和第三个参数，表示颜色的起始点 和 结束点，可以有多个颜色值。​ 比如background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);效果如下图：文字与字体text-overflow:ellipsis; (clip 为剪切，会显示边界前的，后面的是断的) 控制文字超出边界的部分以什么形式展示。要实现超出边界（溢出）的文字显示为省略号，则还需要强制使文字在同一行显示 white-space: nowrap; 以及溢出的文字隐藏起来 overflow: hidden;即，这样写：text-flow: ellipsis; overflow: hidden; white-space: nowrap;嵌入字体：@font-face{ font-family: "字体名"; src= url("字体在服务器上的路径"); }注意：这里设置以后，标签样式中的，font-family: "";必须跟上面的一样。这样即使电脑本地没有该字体，浏览器一样可以显示。给文字设置阴影text-shadow: X-Offset Y-Offset blur color;X-Offset: 是指阴影在x轴方向的偏移距离，为正值时，阴影在右边。负值反之。<br/>Y-Offset: 是指阴影在y轴方向的偏移距离，为正值时，阴影在下边。负值反之。 <br/>blur: 阴影模糊的程度，值越大越模糊。不能是负值。color: 就是阴影的颜色。背景大小 background-sizebackground-size: auto | <百分比> | <长度值> | cover | contain取值说明：1、auto 默认值。 不改变图片大小，将【以图片原来的大小显示】。2、百分比： 设为 100%一个值的时候，图片将完整的显示在盒子当中。 两个值时，将以盒子的宽高乘以相应的百分比以后显示。3、长度值就是设置相对应的长度。如果设置的宽高跟盒子的宽高一样，那效果跟百分百一样的。4、cover 图片会被等比缩放填 【满整个容器】5、cantain 将图片缩放至 【某一边贴合容器】css3属性选择器html代码：<a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a>css代码：a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }效果图：<br/>结构性伪类选择器-root:root{ background: orange; }       相当于 <br/>html{ background: orange; } 可以修改页面背景颜色。 按照字面意思其实就是根选择器。-not:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。<br/>想给表单中除submit按钮之外的input元素添加红色边框<br/>input:not([type="submit"]){border:1px solid red;}其他的例子： div:not([class="nav"]){border: 1px solid red;}-emptyempty 选择器表示的就是空。用来选择 没有任何内容 的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。p:empty{ display: none; } // 隐藏完全没有内容的p标签-target:target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。来个例子： <br/>html代码：<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div>css代码：.menuSection{ display: none; } #brand:target{ display:block; }效果图一开始 content for brand是不显示的，点击brand以后才显示。 href 里面的#后面的值要跟标签的 id 值相同-first-child顾名思义就是选择父元素的第一个子元素的元素E，记住是子元素而不是后代元素额外补充：子元素与后代元素的区别后代元素表达方式：例：#main p{ color:red; } 后代元素则是 父元素后面接空格再接子元素子元素：表达方式：例：#main>p{ color:red; } 即子元素使用大于号 > 进行连接后代元素包括子元素，孙子元素，重孙子元素.........假设 ul里面有6个li标签，则选用 ol>li:first-child{color:orange;} 则序号1（仅仅是数字1）会变橙色。其他不变-last-child跟first-child相反的，也就是最后一个。-nth-child:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。HTML代码：<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ol>css代码：ol > li:nth-child(2n){ background: orange; }效果图：-nth-last-child:nth-last-child(n)选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。-first-of-type (last-of-type 跟这个相反):first-of-type选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。-nth-of-type(n):nth-of-type(n)选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。-nth-last-of-type(n):nth-last-of-type(n)选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。-only-child:only-child选择器选择的是父元素中只有一个子元素。 也就是说，匹配的元素的父元素中仅有一个子元素。 也就是作用于子元素的。html代码：<div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div>css代码：.post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }效果图： 看到没？css里面是对p标签使用的。即对子元素使用，会自动选择出只有一个子元素的父标签。CSS3选择器:enabled在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。:disabled:disabled选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性，即 disabled: disabled;::selection::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：::selection{ // 设置网页中字体被选择时，背景颜色为灰色，字体颜色为粉色 background: #ccc; color: pink; }:read-only:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了readonly="readonly";设置处于只读状态元素的样式：textarea[name="comment"]:read-only{ width: 50px; height: 20px; background: red; }CSS3变形旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。div{ // 设置div 绕着原点逆时针旋转45度， deg相当于度 -webkit-transform: rotate(45deg); transform: rotate(45deg); }扭曲 skew()skew(x,y) 同时向x，y轴两个方向扭曲（注意所有的skew()都是不会旋转，是会改变外形的）skew(x) 只向x轴扭曲。 正值时，是left那条线，逆时针对x轴产生角度扭曲。相当于把y轴正半轴当x轴，逆时针产生角度。如果是负值，则是顺时针。skew(y) 只向y轴扭曲。 正值时，是bottom那条线，顺时针(负值则逆时针)对y轴产生角度扭曲。也就是相当于把x轴正半轴当y轴，与x轴正半轴形成角度。transform: skew();skew(45deg) skew(45deg , 45deg) skew(0, 45deg)translate()translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。一样的有 同时向x轴y轴移动，只向x轴移动，只向y轴移动。transform: translate(10px)过渡属性 transistion-property在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。transition-property:指定过渡或动态模拟的CSS属性transition-duration:指定完成过渡所需的时间,也就是从旧属性过渡到新属性花费的时间长度transition-timing-function:指定过渡函数transition-delay:指定开始出现的延迟时间 (多个值逗号 , 隔开)transition-property特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。用一个简单的例子来说明这个问题：假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。transition-timing-functiontransition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：KeyframesKeyframes 被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } }在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和@keyframes定义的动画名称完全一致（区分大小写），比如上面的 changecolor 动画名,其实和css中的： div:hover{animation-name: changecolor} 里面动画名一样。如果不一致将不具有任何动画效果。animation-duration跟上面的transition-duration作用是一样的，用来指定动画播放时间长。animation-timing-function 跟 transition-timing-function 作用一样，也是那几个函数。animation-delay 设置动画开始的延迟时间。animation-iteration-count属性主要用来定义动画的播放次数。animation-direction 属性主要用来设置动画播放方向，主要有两个值，一个是 normal 一个是 alternateanimation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。CSS3多列布局columnscolumns语法： columns: || 实现类似报刊，杂志的分栏 <br/>举例： 实现分2栏，没栏200px columns: 200px 2; 没有列数的话，会根据文本长度以及列宽定列数。column-gapcolumn-gap主要用来设置列与列之间的间距, 语法：column-gap: normal || length: 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。normal: 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。column-rulecolumn-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。column-rule:|| 属性值 column-rule-width column-rule-style column-rule-color 属性值说明 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) column-spancolumn-span 是分列元素的子元素能跨越多少列。column-span: none | all 可以配合 nth-child(n) 使用，来设置哪个子元素要跨列伸缩布局创建一个flex容器.flexcontainer{ display: -webkit-flex; display: flex; }项目的显示Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; // 也可以设为 row 行显示 flex-direction: column; }Flex项目移到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。(上一个图是水平，上图是垂直).flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; // 把flex-start改为flex-end就是移动到底部 justify-content: flex-start; }Flex项目移动到左边flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; // 把row改为column就是竖着移动到左边 flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }Flex项目移动到右边.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; // 其实就是上面的移到左边的start改成end justify-content: flex-end; }Flex项目的水平居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }如果需要使用上面中间垂直，或者左右居中，就删除相应的属性就行。媒体类型随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示： 值设备类型 ALL所有设备 Braille盲人用点字法触觉回馈设备 Embossed盲文打印机 Handheld便携设备 Print打印用纸或打印预览视图 Projection各种投影设备 Screen电脑显示器 Speech语音或音频合成器 Tv电视机类型设备 Tty使用固定密度字母栅格的媒介，比如电传打字机和终端 说白了就是通过设置媒体类型，让不同你的web在不同设备上尽量最可能的显示，这就需要不同的设备具有不一样的css文件。常用引用方式有： link @import @medialink:<link rel="stylesheet" type="text/css" href="style.css" media="screen" />@import:一种 是在样式中通过@import调用另一个样式文件；另一种方法 是在标签中的中引入，但这种使用方法在IE6~7都不被支持method 1:@importurl(reset.css) screen; @importurl(print.css) print;method 2:<head> <style type="text/css"> @importurl(style.css) all; </style> </head>@media@media是CSS3中新引进的一个特性，被称为媒体查询。（1）在样式文件中引用媒体类型：@media screen {选择器{/你的样式代码写在这里…/}}（2）使用@media引入媒体类型的方式是在标签中的中引用。<head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>media queries的使用方法@media 媒体类型and （媒体特性）{你的样式}最大宽度 max-width跟名字差不多，意思就是最大的宽度是多少，换句话说就是小于等于。@media screen and (max-width:480px){ .ads { display:none; // 意思是当屏幕宽度小于或等于480px时或者是电脑屏幕时，广告部分就隐藏起来 } }最小宽度 min-width意思就是最小的宽度是多少，换句话说就是@media screen and (min-width:480px){ .ads { display:none; // 意思是当屏幕宽度大于或等于480px时或者是电脑屏幕时，广告部分就隐藏起来 } }Resposive设计维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。流体风格流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。弹性图片img{ max-width: 100%; }Resposive设计--技巧大胆的毫无保留的丢弃：尽量少用无关紧要的div<br/>不要使用内联元素inline<br/>尽量少用JS或flash<br/>丢弃无用的绝对定位和浮动样式<br/>丢弃任何冗余结构和不使用100%设置<br/>哪些东东能帮助Responsive确定更好的布局呢？保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。Resposive设计--meta标签最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。个meta标签被称为可视区域meta标签，其使用方法如下。<meta name="viewport" content="" />在content中的属性主要包括以下属性值，用来处理可视区域。在实际的项目开发中，为了让resposive设计在智能设备中显示正常，也就是web的屏幕自适应大小，显示在屏幕上，可以通过重置meta来控制，告诉它设备的宽度或者视图的宽度，也就是禁用设备默认的自适应的效果。<meta name="viewport" content="width = device-width, initial-scale = 1.0" />自由缩放属性resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。resize: both | horizontal | vertical | inherit // `both` 宽高 都能够拉伸； `horizontal`：允许水平拉伸； `vertical`：允许垂直拉伸； inherit： 从父元素中继承拉伸属性。 none当然是水平跟垂直都不给啦。外轮廓属性外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。（换句话说也就是比如一个按钮当你点击它的时候，它周围有一个光环一样）outline: outline-color | outline-style | outline-width | outline-offset | inheritoutline-color: 是设置轮廓的属性的。outline-sytle: 在实际应用中可以将这个属性忽略掉，一般设为noneoutline-width: 在实际应用中也可以将这个属性忽略掉，一般设为mediumoutline-offset: 定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。最后一个是继承父元素的outline效果。生成内容使用 :before 或者 :after 配合 content：能实现插入功能；在h1的前面插入文字： h1:before{ content: "我是被插到h1前面的"; color: red; }