CSS 實現的對聯廣告詳解

admin發表於2017-03-26
CSS

本章節分享一段程式碼例項，它實現了對聯廣告效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  margin:0; 
  padding:0;
  height:2000px;
}
#adleft,#adright{
  width:30px;
  height:100px;
  padding:20px;
  font:14px/20px arial;
  text-align:center;
  background:#06c;
  position:fixed;
  cursor:pointer;
  color:#fff
}
#adleft{
  left:0; 
  top:150px; 
}
#adright{
  right:0;
  top:150px;
}
</style>
</head>
<body>
<div id="adleft">左邊廣告</div>
<div id="adright">右邊廣告</div>
</body>
</html>

上面的程式碼例項實現了我們的要求，下面介紹一下它的實現過程。

相關文章