<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="html5.css">
<style>
/*清楚样式*/
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6,p,pre,a,del, em, font, ins, q, s, samp,dl, dt, dd, ol, ul, li, form,label, legend, caption,textarea, tbody{
margin: 0;
padding: 0;
}
/*顶部样式*/
.top{width:100%; height:45px; background-color:#4b8f08;position:relative;}
.top h1{font-size:16px; line-height:40px; font-weight:600; color:#fff; text-align:center; }
.top a.aleft{background:url(../images/home.png) center 6px no-repeat; position:absolute; top:5px; left:5px; width:45px; height:35px; display:block; background-size:auto 20px;}
.top a.aright{background:url(../images/user.png) center 6px no-repeat; position:absolute; top:4px; right:5px; width:45px; height:35px; display:block; background-size:auto 23px;}
article {
border: 1px solid #f47d31;
display: block;
margin: 10px;
padding: 10px;
text-align: left;
}
.total{
border: 1px solid #f47d31;
display: block;
margin: 10px;
padding: 10px;
width:750px;
height:250px;
}
.yj{width:200px;
height:80px;
background-color:#E00;
border-radius:5px;
float:left;
padding:10px;
margin:10px;}
.yj ul li{ list-style:none;line-height: 22px; padding:10px;}
.hover{background:black ;}
</style>
</head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('div.yj').mouseover(function(){
$(this).addClass("hover").siblings().removeClass("hover");
})
})
</script>
<body>
<div class="wrap">
<div class="top">
<a href="#" class="aleft">返回</a>
<h1>双色球</h1>
<a href="#" class="aright">更多</a>
</div>
<article>
<header>
<h1>HTML5</h1>
</header>
<p>HTML5是下一代HTML的标准已经越来越丰富，同时也对互联网应用提出了更高的要求。</p>
<footer>
<p>编辑于2012.1.18</p>
</footer>
</article>
</div>
<div class="total">
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="html5.css">
<style>
/*清楚样式*/
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6,p,pre,a,del, em, font, ins, q, s, samp,dl, dt, dd, ol, ul, li, form,label, legend, caption,textarea, tbody{
margin: 0;
padding: 0;
}
/*顶部样式*/
.top{width:100%; height:45px; background-color:#4b8f08;position:relative;}
.top h1{font-size:16px; line-height:40px; font-weight:600; color:#fff; text-align:center; }
.top a.aleft{background:url(../images/home.png) center 6px no-repeat; position:absolute; top:5px; left:5px; width:45px; height:35px; display:block; background-size:auto 20px;}
.top a.aright{background:url(../images/user.png) center 6px no-repeat; position:absolute; top:4px; right:5px; width:45px; height:35px; display:block; background-size:auto 23px;}
article {
border: 1px solid #f47d31;
display: block;
margin: 10px;
padding: 10px;
text-align: left;
}
.total{
border: 1px solid #f47d31;
display: block;
margin: 10px;
padding: 10px;
width:750px;
height:250px;
}
.yj{width:200px;
height:80px;
background-color:#E00;
border-radius:5px;
float:left;
padding:10px;
margin:10px;}
.yj ul li{ list-style:none;line-height: 22px; padding:10px;}
.hover{background:black ;}
</style>
</head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('div.yj').mouseover(function(){
$(this).addClass("hover").siblings().removeClass("hover");
})
})
</script>
<body>
<div class="wrap">
<div class="top">
<a href="#" class="aleft">返回</a>
<h1>双色球</h1>
<a href="#" class="aright">更多</a>
</div>
<article>
<header>
<h1>HTML5</h1>
</header>
<p>HTML5是下一代HTML的标准已经越来越丰富，同时也对互联网应用提出了更高的要求。</p>
<footer>
<p>编辑于2012.1.18</p>
</footer>
</article>
</div>
<div class="total">
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
<div class="yj">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
5175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
