wangyuanti-优快云博客

原创响应式

0816响应式响应式：根据不同的设备、不同的宽度、不同的特性、对页面上内容的样式做出相应的调整媒询媒体查询显示设备 @media 只有满足所有查询条件的时候，里面的样式才会被解析 all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print ...

2018-03-08 21:15:46 274

原创盒模型美化

0815盒模型美化盒模型阴影 box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.6); 盒模型阴影 X轴偏移量 Y轴偏移量模糊半径扩散半径

2018-01-16 21:18:06 413

原创弹性盒模型相关

0814弹性盒模型.box{ height: 200px; border:10px solid #000; display: -webkit-box; display: -moz-box; -webkit-box-orient:horizontal;

2018-01-16 20:51:05 200

原创移动端

0810移动端配饰head> meta charset="UTF-8"> meta name="viewport" content="width=640,user-scalable=no"> title>Titletitle> style> .box{ width:400px; heig

2018-01-16 17:03:28 182

原创过渡与2D变换

0808Transition过渡transition 属性是一个简写属性，用于设置四个过渡属性： transition-property ：规定设置过渡效果的 CSS 属性的名称（all || [attr] || none） transition-duration ：运动时间 transition-delay :延迟时间 transition-timing-function :

2018-01-16 16:37:25 218

原创 less

0807less在less 里面 &代表当前的class本身.box{ width:100px; height:100px; background-color: #00a1d6; &:after{ content: ''; } .mian{ border:1px solid #f00; } .name{ heigh

2018-01-12 21:18:55 144

原创 css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略

0804css3伪类target突出显示活动的 HTML 锚div:target{ background: #0e3757; }表单控件伪类style> input:enabled{ background-color: #FFF2AB; } input

2018-01-06 17:21:38 569

原创 css复习——结构性伪类

0803结构性伪类<style> p:nth-child(3){ background-color: #000000; }</style>p:nth-child(n) 表示p元素的父级中的第n个子元素并且这个子元素必须是p，否则没有反应。<style> p:nth-last-child(2){ ba

2017-10-14 15:21:49 214

原创 css复习——表格与表单

0719表格表格标签： table 表格 thead 表格头 tbody 表格主体 tr 表格行 th 元素定义表头 td 元素定义表格单元表格样式重置：table{border-collapse:collapse;} /*单元格间隙合并*/th,td{padding:0;}/*重置单元格默认填充*/colspan 属性规定单元格可横跨的列数。<td colspan="2"></

2017-10-11 10:57:55 320

原创 css复习——opacity（不透明度）、IE6固定定位、border-radius（圆角）

0718opacityopacity 不透明度能够改变元素以及元素里面的所有内容的（不）透明度 IE8以及IE8以下的浏览器不支持opacity filter:alpha(opacity=0~100); 兼容IE9以及IE9以下的浏览器.main{ width:500px; height:300px; colo

2017-10-08 11:27:13 390

原创 css复习——定位、全屏div、div居中、calc函数

0714相对定位相对（比较安全）定位 position: relative; a、不影响元素本身的特性； b、不使元素脱离文档流（元素移动之后原始位置会被保留）； c、如果没有定位偏移量，对元素本身没有任何影响； d、相对于其正常位置进行定位不影响元素本身的特性（元素的特性（

2017-09-27 21:18:45 1398

原创 css复习——overflow

0712overflowoverflow 属性规定当内容溢出元素框时发生的事情。 overflow属性值： visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit

2017-09-21 20:44:24 214

原创 css复习——浮动与BFC

0710浮动float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动的值： left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性

2017-09-18 16:32:28 429

原创 css复习——鼠标

0707鼠标cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。url 需使用的自定义光标的 URL。请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 cross

2017-09-18 16:11:47 435

原创 css复习——前段规范与多行文字居中

0706前段规范1、所有书写均在英文半角状态下的小写； 2、id，class必须以字母开头； 3、所有标签必须闭合； 4、html标签用tab键缩进； 5、属性值必须带引号； 6、 7、/* css注释 */ 8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签； 9、p,dt,h标签里面不能嵌套块属性标签； 10、a标签不能嵌套a；

2017-09-18 15:49:17 411

原创 css复习——常用标签、选择器与优先级、块元素与内联元素 day6

0704常用标签<header>页眉，主要用于页面的头部的信息介绍，也可用于板块头部</header><nav><a>导航,里面必须用a标签</a></nav><footer>页脚页面的底部或者版块底部</footer><section> 页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节<section><article>用来在页面中表示一套结构完整且独立的内容部分</

2017-09-14 16:32:34 405

原创 css复习——a标签 day5

0703a标签使用a标签记得样式重置 a{ color: inherit; text-decoration: none; }字体颜色继承父级、去掉下划线 target 链接打开方式 _blank 新窗口 _self 当前窗口定义页面链接默认打开方式target=”_blank” 例子<a href="http://www.

2017-09-14 15:43:48 330

原创 css复习——选择器、padding、margin day4

0630选择器标签选择器 div(标签的名字) ID选择器 ID名称（ID不能重复）类选择器 .class名字（可以重复使用）div{ width:100px; height:200px; border:1px solid #0b9380; }#box{ width:500px; height:700px; border:3px s

2017-09-13 16:46:54 315

原创 css复习——文字与文本 day3

0629文字文字加粗 font-weight: bold 加粗 normal (正常，不加粗)默认值文字大小 font-size:文字样式 font-style： italic 倾斜 normal 正常字体 font-size:例子#box{ /*font-weight:bold;*/ /*font-size:50px;*/

2017-09-13 16:22:36 198

原创 css复习——背景background day2

0628背景背景颜色 backgroud-color 背景图片 backgroud-image 背景图平铺 repeat 平铺（默认值）no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺背景图位置 background-position 第一个值 X轴 num center left right 第二个值 Y轴 num

2017-09-11 21:29:37 215

原创 css复习----边框border day1

从今天开始复习假期的学习，不然在下次学习的时候就把之前的忘得一干二净了。0627css是什么？（凡是写在标签名后面的，都是标签的属性） style=”” 属性名称 = “属性值” height: 100px; 样式名：样式值比如:<div id="box" style="width: 100px; height: 100px; border: 1px solid #

2017-09-10 21:20:17 358

wangyuanti的博客