html经常用到的css部分的案例

html经常用到的css部分的案例

html经常用到的css部分的案例

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
}
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	height: 100%;
}
body {
	font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 14px;
	height: 100%;
}
input, select, option, button, textarea {
	background: linear-gradient(to bottom, #fff, #fff);
	-webkit-background: linear-gradient(to bottom, #fff, #fff);
	-webkit-tap-highlight-color: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	outline: none;
	font-family: "Avenir Next", Avenir, "Helvetica Neue", "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
	border-radius: 1px;
}
img {
	border: none;
}
a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	text-decoration: none;
}
ul li {
	list-style-type: none;
}

/*	user extend
------------------------------------------------------------------------------*/
#wrapper {
	 100%;
	max- 800px;
	margin: 0 auto;
}
h1.title {
	padding-top: 2.2em;
	padding-bottom: 1em;
	font-size: 1.3em;
	padding-left: 3%;
	color: #000;
}
h1.title i.iconfont {
	font-size: 1em;
}
.line {
	padding-top: 0.9em;
	padding-bottom: 0.9em;
	 94%;
	padding-left: 3%;
	padding-right: 3%;
	position: relative;
}
.line:before {
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	bottom: -1px;
	border-bottom: 1px solid #ccc;
	 200%;
	height: 1px;
	transform: scale(0.5,0.5);
	transform-origin: 0 0;
	-webkit-transform: scale(0.5,0.5);
	-webkit-transform-origin: 0 0;
	box-sizing: border-box;
}
.line:after {
	content: "";
	display: table;
	clear: both;
}
.line .name {
	float: left;
	 30%;
	font-size: 1.2em;
	color: #444;
	font-weight: 100;
}
.line .content {
	float: right;
	 70%;
}
.line .content input {
	 100%;
	border: 0;
	font-size: 1.2em;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

.line .long input {
	 100%;
	border: 0;
	font-size: 1.2em;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}
.line .content select {
	 80%;
	border: 0px;
	margin: 0px;
	padding: 0px;
	font-size: 1.2em;
	font-weight: normal;
}
.line .content input[type=file] {
	font-size: 1.2em;
}
.line .long span {
	background: linear-gradient(to bottom, #04BE02, #04BE02);
	-webkit-background: linear-gradient(to bottom, #04BE02, #04BE02);
	position: absolute;
	top: 8px;
	right: 10px;
	color: #fff;
	padding: 5px 10px;
	border-radius: 3px;
}
.line textarea {
	 70%;
	border: 0;
	font-size: 1.2em;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}
.submit {
	 100%;
	padding-top: 2em;
	padding-bottom: 2em;
}
.submit input {
	 80%;
	margin-left: 10%;
	margin-right: 10%;
	background: linear-gradient(to bottom, #04BE02, #04BE02);
	-webkit-background: linear-gradient(to bottom, #04BE02, #04BE02);
	box-shadow: 0px 1px 2px #ccc;
	color: #fff;
	border-radius: 4px;
	border: 0;
	font-size: 1.18em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	cursor: pointer;
}
.photo-plus {
	padding-top: 0.9em;
	padding-bottom: 0.9em;
	 94%;
	padding-left: 3%;
	padding-right: 3%;
	position: relative;
}
.photo-plus:after {
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	bottom: -1px;
	border-bottom: 1px solid #ccc;
	 200%;
	height: 1px;
	transform: scale(0.5,0.5);
	transform-origin: 0 0;
	-webkit-transform: scale(0.5,0.5);
	-webkit-transform-origin: 0 0;
	box-sizing: border-box;
}
.photo-plus ul:after {
	content: "";
	display: table;
	clear: both;
}
.photo-plus ul {
	margin-left: -3%;
}
.photo-plus ul li {
	float: left;
	 30.33333333%;
	margin-left: 3%;
	margin-bottom: 3%;
	position: relative;
}
.photo-plus ul li img {
	 100%;
	display: block;
}
.photo-plus ul li.plus {
	text-align: center;
	border: 1px solid #555;
	box-sizing: border-box;
	position: relative;
	font-size: 18px;
}
.photo-plus ul li.plus i.iconfont {
	font-size: 2em;
	color: #555;
}
.photo-plus #photo-plus {
	position: absolute;
	top: 0;
	left: 0;
	 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
@keyframes dialog {
	0% {
		top: 60px;
		opacity: 0;
	}
	100% {
		top: 20px;
		opacity: 1;
	}
}
@-webkit-keyframes dialog {
	0% {
		top: 60px;
		opacity: 0;
	}
	100% {
		top: 15px;
		opacity: 1;
	}
}
.photo-plus .dialog {
	position: absolute;
	top: 15px;
	padding-right: 3%;
	left: 35%;
	height: 68px;
	animation: dialog 2s;
	-webkit-animation: dialog 2s;
	z-index: 2;
}
.photo-plus .dialog p {
	background-color: rgba(0,0,0,0.5);
	height: 56px;
	padding: 7px 10px;
	line-height: 1.4em;
	border-radius: 3px;
	color: #fff;
}
.photo-plus .dialog span {
	position: absolute;
	left: -12px;
	top: 14px;
	display: block;
	 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid #000;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	opacity: 0.5;
}
.dialog {
	position: fixed;
	top: 40%;
	 160px;
	height: 80px;
	line-height: 80px;
	border-radius: 5px;
	box-shadow: 0px 1px 2px #555;
	left: 50%;
	margin-left: -80px;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	text-align: center;
	z-index: 100000;
	font-size: 1.18em;
}