Java Web ------ CSS基础（定位补充）

最新推荐文章于 2024-11-14 15:33:48 发布

d1183

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量171

点赞数

分类专栏： Java 学习文章标签：定位 html css

本文链接：https://blog.csdn.net/d1183/article/details/106054896

版权

Java 学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>

效果图：