html初探

HTML基础交互与样式应用

最新推荐文章于 2024-12-10 21:50:52 发布

淮南草

最新推荐文章于 2024-12-10 21:50:52 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端

本文链接：https://blog.youkuaiyun.com/zhuisaozhang1292/article/details/81087621

WEB前端专栏收录该内容

27 篇文章

订阅专栏

1：通过a标签 href属性跳转网页

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>LOVE YOU</title>
	<style >
		img{
			border:0;
		}
	</style>
</head>
	<body>
	<a href = 'http://www.baidu.com'>text</a>
	<a href = 'https://blog.youkuaiyun.com/zhuisaozhang1292/article/details/81087621'>
		<img src="1.jpg" style="width: 200px;height: 300px;">
	</a>
	</body>
</html>

效果图：

2：通过style中类的定义修饰div

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>LOVE YOU</title>
	<style >
		.pg-header{
			height:48px;
			background-color: black;
			color: #dddddd;
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
		}
		.pg-body{
			background-color: #dddddd;
			height:5000px;
			margin-top: 50px
		}
	</style>
</head>
	<body>
	<div class = 'pg-header'>头部</div>
	<div class = 'pg-body'>内容</div>
	</body>
</html>

效果图：

3：通过div onclick属性跳转

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>LOVE YOU</title>
	<style >
		img{
			border:0;
		}
	</style>
</head>
	<body>
	<div onclick="GoTop();" style = 'width:50px;height:50px;background-color: black;color: white;position:fixed;bottom:20px;right: 20px'>
		返回顶部
	</div>
	
	<div style = 'height:5000px;background-color: #dddddd;'>
		hello
	</div>
	
	<script >
		function GoTop(){
			document.body.scrollTop = 0;
		}
	</script>
	
	</body>
</html>

输出：