所属关键字  css   html   
CSS2,CSS3,H4,H5 笔记
2018-06-16 08:26:41
0 474
@charset "utf-8";
/* CSS Document */

/* 重新定义标签 */
body{ 
/* color:#F00;  字的颜色 */
font-size:50px; /* 文字字号*/
font-family: "微软雅黑",Arial, Helvetica, sans-serif; /* 字体*/
font-weight:bold; /* 字体加粗效果 */
}

/* 自己定义标签 */
.diyi{ color:#F60;}
.dier{ 
color:#06F;
font-size:14px; /* 这里和body里的字号冲突了。这时以最下面写的效果为准*/
font-weight: 500;
font-family: Arial, Helvetica, sans-serif;

border-bottom:#900 dotted 10px;/*底部边线 */
border-top:#00F double 10px;/*顶部边线 */
border-left:#090 groove 10px;/*左边边线 */
border-right:#F60  outset 10px;/*右边边线 */
border-bottom-color: #F60; /* 底部 边框 的 颜色*/

border:#093 solid 1px; /* 一个属性三个值 边框:颜色 实线 1像素粗细 */

width:330px; /* 元素的宽度 */
height:200px; /* 元素的高度 */
background-color: #FFC; /* 背景颜色*/
/* background-image:url(../images/pic1.jpg); 背景图片 */
padding:10px;/* 填充 以边框为基准想里面隔开一段距离*/
padding-top:200px;/* 顶部填充 */
padding:10px 20px 30px 40px; /* 分别去指定四个方向的填充  方向:上 右 下 左*/
margin:2px 0px 0px 0px; /* 外边距   方向:上 右 下 左*/

}

自适应

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

样式表引用

@import url("stylemob.css") screen and (max-device-width:400px);
@import url("stylepad.css") screen and (min-device-width:400px) and (max-device-width:990px);
@import url("stylepc.css") screen and (min-device-width:990px);
@import url("swiper.min.css");

浏览器选择

<!--[if IE 6]>  
根据条件判断,这是Internet Explorer 6<br />  
< ![endif]-->  
  
<!--[if gte IE 6]>  
根据条件判断,这是Internet Explorer 6 或者更高<br />  
< ![endif]-->  
  
<!--[if lt IE 6]>  
根据条件判断,这是小于6的Internet Explorer版<br />  
< ![endif]-->  

表单类型

type:

email
file
hidden
image
month
number
password
radio
range
reset
submit
text
time
url

placeholder="要搜索的文字" 

过度动画

div
{
width:100px;
height:100px;
background:yellow;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}

div:hover
{
width:300px;
height:200px;
}

动画

@keyframes mydonghua
{
0%{
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
}
50%{
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
}
100%{
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
}
}

/* Firefox */
@-moz-keyframes mydonghua 
{
0%{-moz-transform: rotate(0deg);}
50%{-moz-transform: rotate(180deg);}
100%{-moz-transform: rotate(360deg);}
}

/* Safari 和 Chrome */
@-webkit-keyframes mydonghua 
{
0%{-webkit-transform: rotate(0deg);}
50%{-webkit-transform: rotate(180deg);}
100%{-webkit-transform: rotate(360deg);}
}

/* Opera */
@-o-keyframes mydonghua 
{
0%{-o-transform: rotate(0deg); }
50%{-o-transform: rotate(180deg);}
100%{-o-transform: rotate(360deg);}
}

.lxa{
border:#00F solid 4px;
border-radius:50%;
border-bottom:#FFF solid 4px;
width:100px; height:100px;
animation:mydonghua 2s linear infinite;
-moz-animation:mydonghua 2s linear infinite; /* Firefox */
-webkit-animation:mydonghua 2s linear infinite; /* Safari and Chrome */
-o-animation:mydonghua 2s linear infinite; /* Opera */
}

作者
william / 578610991@qq.com
做自己擅长的事,用技术改变生活.

评论
william

两个左右对齐的元素必须具备的条件

1、两个要对其的元素,要有一个共同的父窗口。
2、两个子元素的宽度之和要小于或等于父窗口的宽度。 
3、两个子元素要有飘起(对其方式)的属性

2018-06-03 16:11:06评论
william
.wai{ width:608px;}
.boxb{ 
width:300px; height:200px;
margin-left:2px;
border:#006 solid 1px; 
font-size:14px; 
font-weight:100;
float:left;/*飘起:左边 (向左看齐)*/
}
.btb{ 
background-color:#DEE3FE; 
border-bottom:#006 solid 1px;
}
.btb , .dlb{ padding:10px;} /* 并列式写法*/
2018-06-03 16:10:18评论


site design / logo © 2017 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 with attribution required. rev 2017.7.24.26599 辽ICP备 17012833号