HTML+CSS写一个简单的网页界面

最新推荐文章于 2024-07-17 18:42:40 发布

这个人好懒der

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量3.3k

点赞数 4

分类专栏：网页设计文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_47560372/article/details/126151479

版权

这篇博客介绍了作者在掌握HTML和CSS基础知识后，如何动手实现一个包含多个跳转页面的简单登录网页界面，包括登录后的交互效果。

摘要由CSDN通过智能技术生成

学习了HTML和CSS入门的基本命令后，写出来一个简单的登录网页界面，可以跳转、登录。

主界面代码(log.html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/logc.css">
	</head>
	<body>
		<!--首先写一个网页最上方的块-->
		<!--块也是从上往下依次放的，每个块设置了宽度或者高度，就会占据一定的位置-->
		<div style="width: 100%;height: 70px;background: url(img/snow_top.png);">
			<div style="float:right;"><!--最上方图片的右侧加入一个logo-->
				<img src="img/lazy.png">
			</div>
			<div style="height: 10px;"></div><!--左边图片有点小，位置不在中间，在左侧图片块上面加一个高度10px的块占据位置-->
			<div style="float: left;"><!--最上方图片的左侧加入一个logo图片-->
				<img src="img/egg.png">
			</div>	
		</div>
		<!--选择条-->
		<div style="height: 40px;background-color:skyblue;">
			<ul style="list-style: none;"><!--去除掉原有标签格式-->
				<li style="float: left;text-align: center;padding: 6px;">
					<a href="sky.html" class="connect">蓝天</a><!--设置一个链接标签-->
				</li>
				<li style="float: left;text-align: center;width: 8px;padding: 11px;"><img src="img/tiao.png" ></li>
				<li style="float: left;text-align: center;padding: 6px;">
					<a href="cloud.html" class="connect">白云</a><!--设置一个链接标签-->
				</li>
				<li style="float: left;text-align: center;width: 8px;padding: 11px;"><img src="img/tiao.png" ></li>
				<li style="float: left;text-align: center;padding: 6px;">
					<a href="sunset.html" class="connect