CSS 强大的HTML5模板的CSS

Posted 2021-05-23

/***
	Name: CSS for an HTML5 Template
	Date: Jan 2011
	Description: Sample layout for HTML5 and CSS3 goodness.
	Version: 1.0
	Author: You're the author!
	Author: URI: www.example.com
***/

/* Imports */
@import url("reset.css");

/***** Global *****/
/***Body***/
body {
	background: #fff;
	color: #333;
	font-size: 62.5%; /* Base font size: 10px */
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	margin: 0;
	padding: 0;
}

/***Headings***/
h1 {font-size:3em;}
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}	/* 14px */

h1, h2, h3, h4, h5, h6
 {
	font-weight: 400;
	padding:10px;
}

/***Anchors***/
a {outline: 0;}
a img {border: 0px; text-decoration: none;}

a:link, a:visited 
{
	color: #740004;
	padding: 0 1px;
	text-decoration: underline;
}
a:hover, a:active 
{
	background-color: #740004;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}

/***Paragraphs***/
p {padding:10px;font-size:1.4em;}

address
{
	padding:10px;
}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #740004; color: #fff;}
::selection {background: #740004; color: #fff;}

/***Lists***/

ul li
{
	font-size:1.3em;
}

/***HTML5 tags***/
header, section, footer,
aside, nav, article, figure 
{
	display: block;
}

/***Layout***/

#page
{
	width:950px;
	margin:0 auto;
	min-height:300px;
}			

header 
{
	width:950px;
	border:1px #fff solid;
	background:#efefef;
}

section
{
	background:#efefef;
	width:800px;
	overflow:hidden;
	margin:0 auto;
	float:left;
	min-height:inherit;
}

aside
{
	background:#ccc;
	width:150px;
	float:right;
	overflow:hidden;
	min-height:inherit;	
}

footer 
{
	width:950px;
	height:50px;
	overflow:hidden;
	background:#666;
	color:#ccc;
}

footer p 
{
	padding:5px 10px;
}


/***Navigation***/

nav
{
	background:#ccc;
	color:#ccc;
}

nav ul 
{
	margin:0;
	padding:0;
	padding:10px 0 10px 10px;
}
nav ul li 
{
	display:inline;
	list-style-type:none;
}

nav li a:link , nav li a:visited
{
	font-weight:bold;
	font-size:1.5em;
}

nav li a:hover
{
	background:none;
	text-decoration:none;
}

/***Video Player***/

video
{
	width:500px;
	display:block;
	margin:0 auto;
	padding:20px 0 20px 0;
	
}