网站建设的背景有哪些,山西省网站制作,济宁网站建设 田振,网站建设项目经理一、【圆角效果】 border-radius: 5px 4px 3px 2px; border-top-right-radius:10px 右上解圆滑
二、【阴影效果】 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; box-shadow: 0 0 15px blue inset; 内阴影
三、【颜色之RGBA】 colo…一、【圆角效果】 border-radius: 5px 4px 3px 2px; border-top-right-radius:10px 右上解圆滑
二、【阴影效果】 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; box-shadow: 0 0 15px blue inset; 内阴影
三、【颜色之RGBA】 colorrgba(R,G,B,A) 或 background-color:rgba(100,120,60,0.5);
四、【渐变色彩】 background-image:linear-gradient([to 设置方向][开始颜色][多种过度颜色][结束颜色])red红orange橙yellow黄green绿blue蓝black黑white白 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); ★渐变透明 background-image: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);}
五、【文字与字体】 1、设置溢出显示省略号 white-space: nowrap;强制文本在一行内显示 overflow: hidden; 溢出内容为隐藏 text-overflow: ellipsis;三段配合使用尾段才显示省略号…clip表示溢出剪切
2、嵌入字体
font-face能够加载服务器端的字体文件让浏览器端可以显示用户电脑里没有安装的字体。
font-face {font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径;}3、文本阴影
text-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影颜色] 六、【背景设置】 1、设置元素背景图片的原始起始位置 】 background-origin border-box边框| padding-box内边距| content-box内容区域);
2、设置元素背景图片裁剪
配合background-origin使用图片会根据它作为开始展示
background-clip border-box边框| padding-box内填充| content-box内容区域| no-clip3、设置背景图片大小
background-size: auto | 长宽度值 | 百分比 | cover | contain4、多重背景background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);background-position: left top, 100px 0, 200px 0;background-repeat: no-repeat, no-repeat, no-repeat;七、【伪类选择器】
【伪类】伪类是对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。1、 CSS3选择器
属性选择器 元素[属性^属性值] 如a[title*more]{ background: orange;}
^是选择开头位置包含的
$是选择结尾位置包含的
*是选择任意位置包含的
作用通过各种各样的属性给元素增加信息2、:root
结构性伪类选择器—root :root选择器从字面上我们就可以很清楚的理解是根选择器他的意思就是匹配元素E所在文档的根元素。在HTML文档中根元素始终是html。
:root {background:orange;} 改变背景颜色3、 :not
结构性伪类选择器—not :not选择器称为否定选择器可以选择除某个元素之外的所有元素。input:not([typesubmit]){border:1px solid red;}input typetext /input typefile /input typesubmit /4、:empty
选择器表示的就是空。用来选择没有任何内容的元素这里没有内容指的是一点内容都没有哪怕是一个空格也是字符。
p:empty{display: none;}5、:target
选择器称为目标选择器用来匹配文档(页面)的url的某个标志符的目标元素。用记锚点的方式好记
#bank:target{ color:blue;} a href#bank显示蓝色/a div classshow idbank爱你/div6、:first-child
选择器表示的是选择父元素的第一个子元素的元素E。简单理解就是选择父元素后面所有元素中的第一个元素包含这个子元素的所有后代元素 如将无序列表的第一个项目符号设置为红色 ul li:first-child7、:last-child
选择器表示的是选择父元素的最后一个子元素的元素E。简单理解就是选择父元素后面所有元素中的最后一个元素包含这个子元素的所有后代元素 如将无序列表的第一个项目符号设置为红色 ul li:last-child8、:nth-child(n)
选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数而且可以是整数值(1,2,3,4)也可以是表达式(2n1、-n5)和关键词(odd、even)但参数n的起始值始终是1而不是0。
ol li:nth-child(2n-1){ background-color:#CCC;}9、正方向范围
li:nth-child(n6)
选中从第6个开始的子元素10、负方向范围
:nth-child(-n9)
选中从第1个到第9个子元素。使用 :nth-child(-n9) 就相当让你选中第9个和其之前的所有子元素11、前后限制范围
:nth-child(n4):nth-child(-n8)
选中第4-8个子元素。使用 nth-child(n4):nth-child(-n8) 我们可以选中某一范围内子元素上面的例子里是从第4个到第8个子元素12、奇数单数、偶数位双数:nth-child(odd):nth-child(even)13、隔选择子元素
:nth-child(3n1),
选择1,4,7,1014、范围高级用法
nth-child(n2):nth-child(odd):nth-child(-n9)
使用 nth-child(n2):nth-child(odd):nth-child(-n9) 我们将会选中的子元素是从第2位到第9位并且只包含奇数位。15、:nth-last-child(n)
选择器和前面的“:nth-child(n)”选择器非常的相似只是这里多了一个“last”所起的作用和“:nth-child(n)”选择器有所区别从某父元素的最后一个子元素开始计算来选择特定的元素。16、:first-of-type
选择器类似于“:first-child”选择器不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
如定位div容器中的第一个p元素p不一定是容器中的第一个子元素并设置其背景色为橙色。
div classwrapperp我是第一个段落/pp我是第二个段落/pp我是第三个段落/pdiv我是第一个Div元素/divdiv我是第二个Div元素/divdiv我是第三个Div元素/div
/div
.wrapper p:first-of-type { background: orange;}第一个
.wrapper p:last-of-type { background: orange;}最后一个
多种类型的元素用frist-of-type同一种元素用frist-child,如有序列表17、:nth-of-type(n)
选择器和“:nth-child(n)”选择器非常类似不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样可以是具体的整数也可以是表达式还可以是关键词。
.wrapper p:nth-of-type(2n){ background: orange;} 从第一个开始计起
.wrapper p:nth-last-of-type(2n){ background: orange;} 从最后一个开始计起18、:only-child
独生子选择器选择器选择的是父元素中只有一个子元素而且只有唯一的一个子元素。也就是说匹配的元素的父元素中仅有一个子元素而且是一个唯一的子元素。
.post p:only-child { background: orange;}
div classpost p我是一个段落/p p我是一个段落/p/div
div classpost p我是一个段落/p /div19、:only-of-type 选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。选择父元素下面子元素中单一的一种类型的子元素时就可以适应 我是一个段落 我是一个段落 我是一个段落 .post p:only-of-type { background: orange;} :only-child 小明的爸爸只有小明一个孩子 :only-of-type 小明的爸爸有龙凤胎小明是唯一的儿子 20、enabled
Web的表单中有些表单元素有可用“:enabled”和不可用“:disabled”状态比如输入框密码框复选框等。在多个相同表单中如文本框若使用类标记会很烦锁使用enabled会相当的方便具体用法如下input[typetext]:enabled //CSS定义文本框样式input typetext / 样式被添加input typetext disableddisabled / 样式被取消 21、disabled 设置不要用的输入框样式input[typetext]:disabledinput typetext disabled/22、checked 覆盖单选按钮和复选按钮的选中和未选中的状态 http://www.imooc.com/code/86523、::selection “::selection”伪元素是修改用鼠标选择文本时的文本样式。浏览器默认情况下用鼠标选择网页文本是以“深蓝的背景白色的字体”显示的
::selection{background: orange;color: white;
}::-moz-selection{background: orange;color: white;
} //兼容其他浏览器要求24、read-only 用来指定处于只读状态元素的样式。
input[typetext]:-moz-read-only{ border-color: #ccc;} //兼容其他浏览器要求
input[typetext]:read-only border-color: #ccc;}input typetext namename idname placeholder大漠 /
input typetext nameaddress idaddress placeholder中国上海 readonlyreadonly /25、:read-write
:read-write选择器刚好与:read-only选择器相反主要用来指定当元素处于非只读状态时的样式。
input[typetext]:-moz-read-only{ border-color: #ccc;} //兼容其他浏览器要求
input[typetext]:read-only{ border-color: #ccc;}input typetext namename idname placeholder大漠 /
input typetext nameaddress idaddress placeholder中国上海 readonlyreadonly /26、::before和::afterp::before{ content:我爱你; ;}p我也爱你/p输出结果我爱你我也爱你a::after{ content:attr(title);} //还支持url插入哦a href## title我是被插入的内容我是元素/a输出结果我是元素我是被插入的内容八、【图形变换】1、旋转 rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作设置一个角度值用来指定旋转的幅度。正值元素则相对原点中心顺时针旋转负值元素则相对原点中心逆时针旋转
transform: rotate(45deg);2、skew(x,y)
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
transform:skew(10deg10deg);3、scale(X,Y)
让元素根据中心原点对对象进行缩放,单位是“倍”scale()的取值默认的值为1小于10.01~0.99使一个元素缩小大于1是让元素放大。transform: scale(0.9); 缩小transform: scale(1.2); 放大4、translate()
可以将元素向指定的方向移动类似于position中的relative。使用translate()函数可以把元素从原来的位置移动而不影响在X、Y轴上的任何Web组件。translate(x,y)水平方向和垂直方向同时移动translateX(x)仅水平方向移动X轴移动translateY(y)仅垂直方向移动Y轴移动transform:translate(50%,50%);5、matrix(a,b,c,d,e,f)
是一个含六个值的(a,b,c,d,e,f)变换矩阵用来指定一个2D变换相当于直接应用一个[a b c d e f]变换矩阵。a为元素的水平伸缩量1为原始大小b为纵向扭曲0为不变c为横向扭曲0不变d为垂直伸缩量1为原始大小e为水平偏移量0是初始位置f为垂直偏移量0是初始位置6、原点 transform-origintransform-origin 可以更改起始位置transform-origin: left top; 起始位置是左上角注意同时使用多种方法transform: translateX(90px) rotate(360deg) 移动和旋转九、【绘制图形】
右三角形
border-style: solid;
border-width: .146667rem 0 .146667rem .173333rem;
border-color: transparent transparent transparent rgba(0,0,0,.67);
position: absolute;十、【动画】第一段div { width:2px; transition:all .5s ease-in .18s; or 第一段div{transition-property: height; //指定过渡或动态模拟的CSS属性transition-duration:3s; //动画持续时间transition-timing-function: ease-in; //过渡函数transition-delay:0.1s;} //指定动画开始执行时间第二段div:hover {height: 300px;
} //这个是最终效果,或换成border-radius: 20px;也可以ease 速度由快到慢ease-in 逐渐加速ease-out 逐渐变慢ease-in-out 先加速再减速渐显渐隐linear 恒速transition-property 指定过渡或动态模拟的CSS属性【关键帧动画】
第一段keyframes changecolor{
0%{background: red;
}
20%{background:blue;
}
40%{background:orange;
}
60%{background:green;
}
80%{background:yellow;
}
100%{background: red;
}
}第二段div:hover {animation: changecolor 5s ease-out .2s;
}
根据时段用动画完成不同的任务【关键帧动画--不间断运动】
第一段keyframes around{
0% {transform: translateY(0);
}
25%{transform: translateX(180px);
}
50%{transform: translate(180px, 180px);
}
75%{transform:translate(0,180px);
}
100%{transform: translateY(0);
}
}第二段div span{{animation-name:around;
animation-duration: 10s;
//过程为10秒
animation-timing-function: ease;
//播放方式
animation-delay: 1s;
//开始播放时间
animation-iteration-count:infinite;
//播放次数infinite为无数次
animation-direction:alternate; } //动画播放方向
animation-fill-mode: both; forwards 完成后到最后帧 backwards 完成后到初始帧
div:hover span {animation-play-state:running;//播放状态
} // 当鼠标经过时自动播放,
or 第二段div span{ animation:around 10s ease-in 0.5s infinite; }//注意这行需另外写播放方式ease 速度由快到慢ease-in 逐渐加速ease-out 逐渐变慢ease-in-out 先加速再减速渐显渐隐linear 恒速十一、【Columns 多列布局】columns: 200px 2; //显示2栏每栏宽度为200pxcolumn-gap:6px; //列间距为6pxcolumn-rule: 3px solid green; //列间竖条/边框为3px绿色column-span:all;; //当文件每段都有个P时可以根据需要跨列设置是否需要分列十二、【box-sizing 盒子模型】
按W3C的盒子模型计算padding后会把元素撑出来想要解决问题只需加box-sizing:border-box后padding不会被影响十三、【Flex 伸缩布局】1、采用Flex布局的元素它的所有子元素自动成为容器成员称为Flex项目flex item2、容器默认存在两根轴水平的主轴main axis和垂直的交叉轴cross axis3、主轴的开始位置与边框的交叉点叫做main start结束位置叫做main end4、交叉轴的开始位置叫做cross start结束位置叫做cross end。5、以下6个属性设置在容器上。■ flex-direction 属性决定主轴的方向即项目的排列方向:row 主轴为水平方向起点在左端:row-reverse 主轴为水平方向起点在右端:column 主轴为垂直方向起点在上沿:column-reverse 主轴为垂直方向起点在下沿。■ flex-wrap nowrap不换行 wrap换行第一行在上方 wrap-reverse换行第一行在下方■ flex-flow 是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。■ justify-content 定义了项目在主轴上的对齐方式:flex-start默认值 左对齐:flex-end 右对齐:center 居中:space-between 两端对齐项目之间的间隔都相等。:space-around 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。■ align-items 定义项目在交叉轴上如何对齐:flex-start 交叉轴的起点对齐。:flex-end 交叉轴的终点对齐。:center 交叉轴的中点对齐。:baseline 项目的第一行文字的基线对齐。:stretch默认值 如果项目未设置高度或设为auto将占满整个容器的高度。■ align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。:flex-start 与交叉轴的起点对齐。:flex-end 与交叉轴的终点对齐。:center 与交叉轴的中点对齐。:space-between 与交叉轴两端对齐轴线之间的间隔平均分布。:space-around 每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。:stretch默认值 轴线占满整个交叉轴。6、项目的属性■ order 定义项目的排列顺序。数值越小排列越靠前默认为0■ flex-grow 定义项目的放大比例默认为0即如果存在剩余空间也不放大■ flex-shrink 属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小■ flex-basis 定义了在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto即项目的本来大小。■ flex 是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto个快捷值auto (1 1 auto) 和 none (0 0 auto)。■ align-self 允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性该属性可能取6个值除了auto其他都与align-items属性完全一致。 注意设为Flex布局以后子元素的float、clear和vertical-align属性将失效。十四、【Media Queries 媒体控制】1. 最大宽度max-widthmedia screen and (max-width:480px){.ads {display:none;}}上面表示的是当屏幕小于或等于480px时,页面中的广告区块.ads都将被隐藏。2.最小宽度min-widthmedia screen and (min-width:900px){.wrapper{width: 980px;}}上面表示的是当屏幕大于或等于900px时容器“.wrapper”的宽度为980px。3、最小和最大区间media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;}}当屏幕在600px~900px之间时body的背景色渲染为“#f5f5f5”4、设备屏幕的输出宽度Device Widthlink relstylesheet mediascreen and (max-device-width:480px) hrefiphone.css /在智能设备上例如iPhone、iPad等还可以根据屏幕设备的尺寸来设置相应的样式或者调用相应的样式文件。5、not关键词media not print and (max-width: 1200px){样式代码}面代码表示的是样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。6.only关键词linkrelstylesheet typetext/css hrefstyle.css mediahandheld and (max-width:480px), screen and (min-width:960px) /上面代码中style.css样式被用在宽度小于或等于480px的手持设备上或者被用于屏幕宽度大于或等于960px的设备上。十五、【Responsive 不同设备的分辨率设置相应样式】1.1024px显屏media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphonesmedia screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ } 十六、【resize 自由绽放】textarea { resize: both;}none 不能绽放 both 可改变宽高度 horizontal 仅可改变宽度 vertical 仅可以改变高度 inherit 继承父元素resize属性值想要在div用上这效果必须加一个overflow:hidden十七、【outline 外轮廓边框】
1、与border相似但outline边线不会占用空间
2、outline 的效果将随元素的 focus 而自动出现相应的由 blur 而自动消失。这些都是浏览器的默认行为无需JavaScript配合CSS来控制。
3、outline-offset: 2px; 设置边框与元素边缘的距离
3D菜单http://www.imooc.com/code/1963十八、box-sizing: border-box 用法
当加入padding时边框的宽高就会发生变化如果想加入padding后又不想宽高发生变化就用box-sizing: border-box 【一些实例】
1、平行四边型
width: 200px;
height: 200px;
background: blue;
transform: skewX(-20deg);2、梯形
width:50px;
height:50px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid transparent;
border-bottom:50px solid blue;3、直角三角形上三角型将四条边都填充100px就知道怎么弄了
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid blue;
