HTML参考代码
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Belgrano">
<link rel="stylesheet" href="06zuoye.css">
</head>
<body>
<!-- 上下两部分组成 -->
<!-- 内容区 -->
<div class="container">
<!-- 左侧栏 -->
<aside>
<div class="logo">
<h1><a href="#">Corn Food</a></h1><!-- h1标签在这里主要用于增加SEO用于收录关键字权重 -->
</div>
<nav>
<ul class="navlist">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Contact</a></li>
</ul>
<audio src="audio_video/myAudio.ogg" autoplay controls></audio>
</nav>
</aside>
<!-- 右侧栏 -->
<main>
<!-- 动画 -->
<section>
<object data="audio_video/spring.swf" type="appliction/x-shockwave-flash" width="719" height="428"></object>
<param name="movie" value="spring.swf">
</section>
<!-- 分类文章 -->
<section>
<article>
<a href="#">
<h2>Type and scrambled it to make a type</h2>
<video src="audio_video/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span>Jun 30, 2012</span><a href="#">{ Continue! }</a></p>
</article>
<article>
<a href="#">
<h2>Lorem Ipsum has been the industry's</h2>
<video src="audio_video/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span>Jun 30, 2012 </span><a href="#">{ Continue! }</a></p>
</article>
<article>
<a href="#">
<h2>The industry's standard dummy text</h2>
<video src="audio_video/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span>Jun 30, 2012</span><a href="#">{ Continue! }</a></p>
</article>
<article>
<a href="#">
<h2 class="title">With the release of Letraset sheets</h2>
<video src="audio_video/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span>Jun 30, 2012</span><a href="#">{ Continue! }</a></p>
</article>
<article>
<a href="#">
<h2>Desktop publishing software like</h2>
<video src="audio_video/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span>Jun 30, 2012</span><a href="#">{ Continue! }</a></p>
</article>
<article>
<a href="#">
<h2>It has survived not only five centuries</h2>
<video src="audio_video/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span>Jun 30, 2012</span><a href="#">{ Continue! }</a></p>
</article>
</section>
<div class="clear"></div>
<!-- 关于 -->
<section>
<h2>About</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>
<p class="read-more">
<a href="#">{ Read More! }</a>
</p>
</section>
</main>
</div>
<!-- 页尾 -->
<footer>
<p>
Copyright © lalalala. All rights reserved. xian, Validation <a href="#">HTML5</a> | <a href="">CSS3</a>
</p>
</footer>
</body>
ml>
css参考代码
*{
margin: 0;
padding: 0;
}
img,a,audio,video{
border:0;
outline:none;
}
a{
text-decoration: none;
color: #900000;
}
li{
list-style-type:none;
}
body{
font-family: Belgrano ,serif;
font-size: 14px;
background: url(images/siteBackground.jpg);
padding-top: 10px;
color: #452200;
}
.container{
width: 1100px;
margin: 0 auto;
overflow: hidden;
}
aside{
float: left;
width: 320px;
}
.logo{
float:left;
background: url(images/logoBackground.png) no-repeat;
width: 206px;
height: 206px;
}
.logo h1{
font-size: 60px;
font-family: Lobster,sans-serif;
line-height: 60px;
padding: 45px 0 0 43px;
}
.logo h1 a{
color: #5a270b;
text-shadow: 1px 1px 2px #fff;/* 设置文字阴影 横向偏移 纵向偏移 模糊度 颜色 */
}
.navlist{
padding-right:40px ;
text-align: center;
width: 206px;
}
.navlist li{
padding:5px 0;
font-family:Lobster,sans-serif;
text-shadow: 1px 1px 1px #fff;
font-size: 40px;
}
.navlist li a{
color: #ac8829;
}
.navlist li a:hover{
color: #452200;
}
.navlist li a.active{
color: #452200;
}
main{
float: right;
width: 750px;
}
main article{
width: 193px;
float: left;
margin: 0 57px 25px 0;
}
main h2{
font-family: Lobster, sans-serif;
font-size: 30px;
padding: 10px 0;
color: #883b12;
text-shadow: 1px 1px 2px #ffffff;
}
main .title{
line-height: 2em;
}
main article a h2:hover{
color: #452200;
}
main p{
line-height: 1.5em;
}
.date, .read-more{
font-weight: bold;
font-style: italic;
font-size: 14px;
margin-top: 10px;
}
main .date span{
color: #ac8829;
}
.clear{
clear: both;
}
/*页尾*/
footer{
width: 1100px;
margin: 30px auto 0;
text-align: center;
border-top: 1px solid #ac8829;
}
footer p{
padding: 30px 20px;
}
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
