<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {
background-color: #066;
}
ul {
/*border: 1px solid red;*/
width: 1350px;
margin: 20px auto;
/*去掉列表前的符號*/
list-style-type: none;
}
li {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
float: left;
background-color: #FFF;
}
P {
text-align: center;
font-family:
"微軟雅黑","文泉驛正黑","黑體";
}
/*鼠標懸停時，讓li向右上方偏移2px,
從而實現抖動。*/
li:hover{
position: relative;
left: 2px;
top:-2px;
}
</style>
</head>
<body>
<ul>
<li>
<img src="../images/01.jpg"/>
<p>西遊記</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>紅樓夢</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>水滸傳</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>三國演義</p>
</li>
<li>
<img src="../images/01.jpg"/>
<p>西廂記</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p style="width:218px">三國志</p>
</li>
</ul>
</body>
</html>
效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
border: 3px solid #ccc;
width:400px;
hefight: 571px;
margin:30px auto;
/*只設置position，但不設置偏移量
目的是爲了讓它成爲子元素絕對定位
的目標。並不是讓他真的偏移*/
position: relative;
}
p{
position: absolute;
bottom: 40px;
width:400px;
background-color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="../images/03.jpg"/>
<p>李老師到此一遊</p>
</div>
</body>
</html>
效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
width: 50px;
border: 1px solid #ccc;
text-align: center;
line-height: 25px;
position:fixed;
bottom:20px;
right:10px;
}
</style>
</head>
<body>
<h1>iphone</h1>
<p>asdas </p>
<p>asdfa</p>
<p>trw</p>
<p>啊啊</p>
<p>愛人</p>
<p>夫人</p>
<p>帥哥帥哥和</p>
<p>士大夫鬼勝</p>
/*....儘量多加直到出現滾動條*/
<div>
<a href="">頂部</a>
</div>
</body>
</html>
效果圖：
