案例效果图
案例结构分析
本案例一共包含六部分。
第一部分是第一行内容，包括主页的LOGO和导航。其中LOGO通过加载外部字体实现，而导航采用列表实现。
第二部分是第二行内容，主要有一些文字组成，对文字添加各种样式效果。
第三部分是四栏文本内容，每个栏目由一个标题和一段文字组成。
第四部分是第四行内容，由“GALLERY”这几个字母组成。
第五部分是四栏图片内容，每个栏目包含了一张图片。
第六部分是主页的底部，主要包含了一些版权信息。
案例样式分析
对于第一部分内容，页面的LOGO由5中颜色组成，并且加载了外部BoycottRegular字体。页面的导航由无序列表组成，其中列表项通过向左浮动实现在同一行显示。导航的文本在第一部分的底部，这个可以通过控制内外边距实现。
对于第二、四部分，主要对文字添加颜色特效以及一些旋转特效。
对于第三、五部分，通过4个向左浮动的DIV来实现多栏布局。对于第五部分的图片，通过绝对定位对每张图片加上边框图片。
对于第六部分，则主要是黑底白字的版权信息。
案例源码
index.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>GrungeSet- Home</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<!--start header-->
<header>
<div class="container1">
<!--start title-->
<h1 class="fontface" id="title"><span class="orange">Gr</span><span class="pink">un</span><span class="purple">ge</span><span class="blue ">Se</span><span class="green ">t</span></h1>
<!--end title-->
<!--start menu-->
<nav>
<ul>
<li><a href="index.html" class="grn">Home</a></li>
<li><a href="#" class="pnk">About</a></li>
<li><a href="#" class="orng">Gallery</a></li>
<li><a href="#" class="blu">Tour Dates</a></li>
<li><a href="#" class="prpl">Contact</a></li>
</ul>
</nav>
</div>
<div class="bottom"> </div>
<!--end menu-->
<!--end header-->
</header>
<div id="container">
<!--start intro-->
<section id="intro">
<div class="quote">
<section class="welcome"/>
<h2 class="fontface"> <span class="pink medium">100% Wild </span><span class="green small rotate">and </span>Crazy<span class="orange medium"> Grunge</span></h2>
</div>
</section>
<!--end intro-->
<div class="group3">
<h2> Music</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="group3">
<h2> Tour Dates</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="group3">
<h2> News</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="group3">
<h2> Rock On!</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<section id="main">
<div class="portfolio">
<h2 class="fontface"> <span class="orange ">Gal</span><span class="pink">lery</span></h2>
</div>
<br><br>
<ul class="gallery">
<li><a href="#"><span></span><img src="images/11.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="images/9.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="images/4.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="images/7.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="images/5.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="images/6.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="images/3.jpg" alt="image" /></a></li>
<li><a href="#"><span></span><img src="images/1.jpg" alt="image" /></a></li>
</ul>
</section>
</div>
<!--start footer-->
<footer>
<div class="container1">
<p> Copyright © 2011 | GrungeSet Web Template </p>
</div>
</footer>
<!--end footer-->
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #fff;
background-image: url(images/stucco.png);
color: #191919;
margin: 0 0 1px; height: 100%;
line-height: 1.5;
}
header {
position: relative;
background: #191919 ;
width: 100%;
height: 100px;
display: block;
}
.container1 {
width: 980px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
background-color: transparent;
padding-top: 20px;
position: relative;
}
div.bottom {
content: "";
position: absolute;
left: 0;
bottom: 0px;
height: 3px;
width: 100%;
background: #00aeff; /* Old browsers */
background: -moz-linear-gradient(left, #00aeff 1%, #71fc00 15%, #ffff00 30%, #fc7a00 50%, #cc00a6 70%, #ff0084 85%, #ff0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#00aeff), color-stop(15%,#71fc00), color-stop(30%,#ffff00), color-stop(50%,#fc7a00), color-stop(70%,#cc00a6), color-stop(85%,#ff0084), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #00aeff 1%,#71fc00 15%,#ffff00 30%,#fc7a00 50%,#cc00a6 70%,#ff0084 85%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #00aeff 1%,#71fc00 15%,#ffff00 30%,#fc7a00 50%,#cc00a6 70%,#ff0084 85%,#ff0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #00aeff 1%,#71fc00 15%,#ffff00 30%,#fc7a00 50%,#cc00a6 70%,#ff0084 85%,#ff0000 100%); /* IE10+ */
background: linear-gradient(left, #00aeff 1%,#71fc00 15%,#ffff00 30%,#fc7a00 50%,#cc00a6 70%,#ff0084 85%,#ff0000 100%); /* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00aeff', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
}
#title {
float: left;
width: 250px;
height: 100px;
}
.green { color: #9acd32; }
.pink { color: #FF3399; }
.orange { color: #FF6600; }
.blue { color: #00d0ff; }
.purple {color: #cc00ff; }
@font-face {
font-family: 'BoycottRegular';
src: url('BOYCOTT_-webfont.eot');
src: url('BOYCOTT_-webfont.eot?#iefix') format('embedded-opentype'),
url('BOYCOTT_-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1.fontface {
font: 60px/68px 'BoycottRegular', Arial, sans-serif;
letter-spacing: 0;
}
h2.fontface {
font: 48px/52px 'BoycottRegular', Arial, sans-serif;
letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
position: relative;
}
h1 {
font-size: 45px;
line-height: 0.9;
color: #191919;
text-align: left;
margin-bottom: 10px;
padding-bottom: 10px;
}
h2 {
font-size: 28px;
line-height: 1.3;
color: #191919;
text-transform: none;
font-style: bold;
text-align: center;
margin-top: 7px;
padding-bottom: 6px;
}
/************************ Navigation Menu ************************/
nav {
position: relative;
width: 980px;
height: 40px;
margin: 0 auto;
padding-top: 30px;
}
nav ul li {
float: left;
line-height: normal;
margin-left: 55px;
list-style: none;
}
nav ul li a{
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color:#fff;
text-transform:capitalize;
font-weight:normal;
display:block; /* IE6, IE7 line height fix */
background-color:transparent;
text-decoration:none;
margin-top:3px;
padding:5px;
-moz-opacity: 0.66;
-khtml-opacity: 0.66;
opacity: 0.66;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=66)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=66);
filter:alpha(opacity=66);
}
a, p a {
text-decoration: none;
color: #333;
}
nav ul li a.grn:hover{
color:#9acd32;
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
}
nav ul li a.orng:hover{
color:#ff6600;
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
}
nav ul li a.pnk:hover{
color:#FF3399;
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
}
nav ul li a.blu:hover{
color:#00d0ff;
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
}
nav ul li a.prpl:hover{
color:#CC00FF;
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
}
#container {
position: relative;
width: 1000px;
margin: 0 auto;
background-color: transparent;
min-height: 100%;
}
#intro {
width: 960px;
position: relative;
float: left;
height: auto;
padding: 10px;
background: transparent;
}
.quote { position: relative;
float: left;
width: 100%;
margin-top: 6px;
margin-bottom: 30px;
background: none;
}
.welcome {
width: 945px;
position: relative;
padding: 15px 15px 25px 15px;
background: transparent;
}
.large {font-size: 72px; }
.medium {font-size: 50px; }
.small {font-size: 25px; }
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg); display: block;
}
.group3 {
float: left;
width: 200px;
position: relative;
background: transparent;
padding: 15px;
margin-bottom: 10px;
}
p {
margin-bottom: 7px;
text-indent: 20pt;
}
#main {
position: relative;
float: left;
width: 100%;
margin-top: -12px;
margin-bottom: 20px;
}
.portfolio {
width: 945px;
position: relative;
padding: 15px 15px 25px 15px;
background: transparent;
}
/* ---------- gallery styles start here ----------------------- */
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 15px 10px;
padding: 0 12px;
float: left;
position: relative;
width: 180px;
height: 130px;
background: none;
}
.gallery img {
border: none;
padding: 0;
}
.gallery span {
width: 185px;
height: 134px;
display: block;
position: absolute;
top: -6px;
left: 3px;
background: url(images/brush-border.png) no-repeat;
}
footer {
height: 100px;
clear: both;
width: 100%;
margin: 0 auto;
background-color: #191919;
color: #fff;
}
图片
百度网盘地址： 百度网盘
字体
百度网盘地址： 百度网盘