<html>
<head>
<title>box model</title>
<style type="text/css">
body{
background:url("acemaozi.jpg");
background-size:cover;
}
#parents{
width:1000px;
height:140px;
margin-top:10px;
margin-left:130px;
}
*{
padding:0px;
margin:0px;
texet-align:center;
}
#nav{
background:url("daohang.jpg");
margin-top:5px;
margin-left:145px;
width:970Px;
height:30px;
}
#nav ul{
list-style:none;
}
#nav ul li{
border:0px solid #999;
width:160px;
height:30px;
text-align:center;
float:left;
}
a.mz:link,a.visited{
text-decoration:none;
color:#226;
font-size:10px;
}
a.mz:visited:{
color:black;
}
/*当鼠标移动到上面的样式*/
a.mz:hover{
color:red;
}
#this{
border:0px solid gray;
width:1000px;
height:300px;
margin-left:130px;
margin-top:5px;
position:absolute;
}
#this1 {
border:1px solid gray;
width:300px;
height:300px;
float:left;
background:url("");
}
#this3 {
border:1px solid gray;
width:300px;
height:300px;
float:left;
background:url("gushi.jpg");
}
#this ul{
text-align:center;
margin-left:40px;
margin-right:40px;
margin-top:20px;
}
#this1 li{
border:1px solid #33CC99;
height:40px;
font-size:20px;
list-style:none;
}
#this3 li{
height:40px;
font-size:20px;
list-style:none;
}
#this1 span{
position:relative;
top:15px;
}
#this3 span{
position:relative;
top:15px;
}
#this3 h3{
height:40px;
}
#this2{
border:1px solid gray;
width:392px;
height:300px;
float:left;
}
#this1_1{
border:0px solid red;
width:294px;
height:115px;
text-align:center;
list-style:none;
background:gray;
padding-top:32px;
background:url("input.jpg");
}
#this1_2{
border:0px solid red;
width:294px;
height:148px;
text-align:center;
list-style:none;
}
#middle{
border:0px solid gray;
width:1000px;
height:80px;
margin-left:130px;
margin-top:310px;
}
#button{
border:0px solid red;
margin-left:130px;
background:url("wenzi.jpg");
width:1000px;
height:400px;
position:absolute;
}
#button1{
border:0px solid red;
width:300px;
height:400px;
float:left;
}
#button1_1{
border:2px solid gray;
width:294px;
height:195px;
}
#button1_1 ul{
border:1px solid gray;
margin-top:10px;
margin-left:40px;
width:200px;
text-align:center;
}
#button1_1 li{
border:1px solid gray;
height:25px;
font-size:15px;
color:black;
list-style:none;
}
#button1_1 li span{
position:relative;
left:20px;
top:3px;
}
#button2{
border:2px solid gray;
width:392px;
height:394px;
float:left;
}
#button2 li{
height:25px;
font-size:15px;
list-style:none;
color:red;
}
a.mm{
color:white;
}
a.mm:visited:{
color:red;
}
/*当鼠标移动到上面的样式*/
a.mm:hover{
color:red;
}
#button2 li span{
position:relative;
left:20px;
top:3px;
}
#end{
border:0px solid gray;
width:1000px;
height:80px;
margin-left:130px;
margin-top:400px;
}
</style>
</head>
<body>
<audio src="jiangnan.mp3" autoplay="true" playcount="-1"></audio>
<div id="parents">
<img src="image\top.jpg"/>
</div>
<div id="nav">
<ul>
<li> <a href="#" class="mz"><| 网站首页 |</a></li>
<li> <a href="#" class="mz"><| 江南社区 |</a></li>
<li> <a href="#" class="mz"><| 风景名胜 |</a></li>
<li> <a href="#" class="mz"><| 旅游组团 |</a></li>
<li> <a href="#" class="mz"><| 专家推荐 |</a></li>
<li> <a href="file:///F:/%E7%BD%91%E9%A1%B5/1105%E7%8F%AD%2026%E5%8F%B7%20%E6%9D%A8%E6%97%AD%E4%B8%9C/index.html" class="mz"><| 有关我们 |</a></li>
</ul>
</div>
<div id="this">
<div id="this1">
<div id="this1_1">
<tr>
<td><p>欢迎登陆</p>
<form action="01.html">
用户名：<input type="text"/><br/>
密 码 ：<input type="password"/><br/>
<input type="submit" value="登陆">
<input type="submit" value="注册">
</form></td></tr>
</div>
<div id=this1_2>
<tr><td b><b>通知信息</b> <p>
<marquee direction="up" scrollamount=3 height=105 onmouseover="this.stop()" onmouseout="this.start()">
<td>欢迎光临本网站<br/></td>
<td> <br/></td>
<td>祝你游览愉快<br/></td>
<td> <br/></td>
<td>更多精彩<br/></td>
<td> <br/></td>
<td>敬请期待</td>
</marquee></td></tr>
</div>
</div>
<div id="this2">
<img src="image\middle.jpg"/>
</div>
<div id="this3">
<h3><span>江南社区</span></h3>
<ul>
<li><span>知江南</span></li>
<li><span>水秀山清眉远长，</span></li>
<li><span>归来闲倚小隔窗。</span></li>
<li><span>春风不解江南雨，</span></li>
<li><span>笑看雨巷寻客尝。</span></li>
</div>
</div>
<div id="middle">
<img src="image\jiangnan.jpg"/>
</div>
<div id="button">
<div id="button1">
<div id=button1_1>
<img src="image\xiazai.jpg"/>
<ul>
<li><span>教学资源下载</span></li>
<li><span>美文预览</span></li>
<li><span>教学资源下载</span></li>
<li><span>美文预览</span></li>
<li><span>教学资源下载</span></li>
</ul>
</div>
<div id=button1_1>
<img src="image\yuedu.jpg"/>
<ul>
<li><span>教学资源下载</span></li>
<li><span>美文预览</span></li>
<li><span>教学资源下载</span></li>
<li><span>美文预览</span></li>
<li><span>教学资源下载</span></li>
</ul>
</div>
</div>
<div id="button1">
<div id=button1_1>
<img src="image\fenjing.jpg"/>
<ul>
<li><span>美文预览 填充文字</span></li>
<li><span>美文预览 填充文字</span></li>
<li><span>美文预览 填充文字</span></li>
<li><span>教学资源下载 填充文字</span></li>
<li><span>教学资源下载 填充文字</span></li>
</ul>
</div>
<div id=button1_1>
<img src="image\tuijian.jpg"/>
<ul>
<li><span>教学资源下载 填充文字</span></li>
<li><span>教学资源下载 填充文字</span></li>
<li><span>教学资源下载 填充文字</span></li>
<li><span>美文预览 填充文字</span></li>
<li><span>美文预览 填充文字</span></li>
</ul>
</div>
</div>
<div id="button2">
<img src="image\lianjie.jpg"/>
<ul>
<li><span><a href="#" class="mm">有关教学资源 敬请期待 更多精彩</a></span></li>
<li><span><a href="#" class="mm">有关教学资源 敬请期待 更多精彩</a></span></li>
<li><span><a href="#" class="mm">有关教学资源 敬请期待 更多精彩</a></span></li>
<li><span><a href="#" class="mm">有关教学资源 敬请期待 更多精彩</a></span></li>
<li><span><a href="#" clas
简单的html，适合新手查看
需积分: 28 87 浏览量
2017-12-28
19:20:06
上传
评论
收藏 5.03MB ZIP 举报
css+html综合.zip （32个子文件） 
css+html综合 css+html 
middle.jpg 39KB
文字背景009.png 7KB gushi.jpg 62KB 1698785.jpg 70KB image middle.jpg 39KB lianjie.jpg 15KB daohang1.jpg 13KB gushi.jpg 62KB 01_20.jpg 19KB fenjing.jpg 15KB daohang.jpg 37KB wenzi.jpg 72KB jiangnan1.jpg 30KB tuijian.jpg 16KB yuedu.jpg 15KB jiangnan.jpg 36KB xiazai.jpg 15KB jiangnan3.jpg 37KB input.jpg 44KB 01_201.jpg 6KB acemaozi.jpg 44KB top.jpg 51KB
表格作业.html 3KB daohang.jpg 37KB index.html 9KB wenzi.jpg 72KB
jiangnan.mp3 4MB jiangnan.jpg 36KB 导航图片111.png 328KB input.jpg 44KB 导航图片.jpg 74KB acemaozi.jpg 44KB资源评论
