实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站中常用固定广告位的制作</title>
<style>
body{margin: 0;padding: 0;}
.nav{
width:100%;
background: #2c73fa;
height: 40px;
}
.header{
width: 1000px;
margin: 0px auto;
}
.header ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.header ul li{
list-style-type: none;
}
.header ul li a{
color:#fff;
text-decoration:none;
font-size:16px;
line-height:40px;
float: left;
text-align: center;
width: 200px;
}
.header ul li a:hover{
background:#f60;
}
.content{
width: 600px;
height: 500px;
margin: 5px auto;
background: #ccc;
}
.content p{
margin: 0px;
color:#fff;
font-size: 16px;
line-height: 500px;
text-align: center;
}
.mail{
width: inherit;
min-height: 500px;
background: #2c73fa;
}
.left{
width: 200px;
height: 500px;
background: orange;
margin-left: -100%;
position: relative;
left:-200px;
}
.right{
width: 200px;
height: 500px;
background: orange;
margin-left: -200px;
position: relative;
left:200px;
}
.mail,.left,.right{
float: left;
}
.footer{
width: 100%;
background:#000;
}
.footer .foot{
width: 1000px;
height: 100px;
margin: 0px auto;
}
.footer .foot p{
margin: 0;
text-align: center;
padding: 10px;
color: #fff;
}
.footer .foot p a{
color: #fff;
font-size: 14px;
text-decoration: none;
}
.footer .foot p a:hover{
color:#f60;
}
.ad{
width:300px;
height:250px;
border: #ddd;
background: coral;
right: 0px;
bottom: 0px;
position: fixed;
}
button{margin-right: 10px;float: right;margin-top:10px;}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="nav">
<div class="header">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">在线留言</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="mail"><p>主体部分</p></div>
<div class="left"><p>左侧部分</p></div>
<div class="right"><p>右侧部分</p></div>
</div>
<div class="footer">
<div class="foot">
<p><a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">产品分类</a> | </p>
<p>XXXX公司版权所有 沪ICP备：888888888</p>
</div>
<div class="ad">
<button onclick="">关闭</button>
<h2>这是一个广告标题</h2>
<p>html课程练习中</p>
</div>
<script>
$('button').click(function(){
$('.ad').hide()
})
</script>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
网页中常用简单广告位制作实例
