自制网页效果之家乡【开封】

最新推荐文章于 2024-10-10 20:59:20 发布

J_FOVik_L

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量344

点赞数 8

分类专栏： web前端开发文章标签： html5 前端

本文链接：https://blog.csdn.net/J_FOVik_L/article/details/135469140

版权

web前端开发专栏收录该内容

9 篇文章 2 订阅

订阅专栏

插入了两个表单用到了html+css 及视频此处可以看到详细页面

http://mcy1223.web3v.work/15%E8%92%8B%E5%8F%82%E8%A7%82%E5%AE%B6%E4%B9%A1/

以此来作为我的期末作业顺带介绍一下我的家乡----开封

开封，古称东京、汴京，简称“汴”，有“十朝古都”、“七朝都会”之称。是中原经济区的核心城市之一，也是中国历史文化名城之一。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录入口</title>
		<style type="text/css">
		a{text-decoration: none;}
		.center{
			text-align: center;
			margin:  0 auto;
			width: 500px;
			background-color: aliceblue;
		}
		.btn{
			width: 400px;
			height: 30px;
		}
		</style>
	</head>
	<body>
		<form>
			<div class="center">
		<h1>欢迎注册</h1>
		<p>已有账户？<a href="index2.html">登录</a></p>
		<hr />
		
			用户名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" placeholder="请设置用户名"   class="btn"/><br /><br />
			手机号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" placeholder="可用于登录和找回密码" class="btn"/><br /><br />
			密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="password" placeholder="请设置登录密码"class="btn" /><br /><br /><br />
			Email邮箱：&nbsp;
			<input type="text" placeholder="请输入Email邮箱" class="btn"/><br /><br />
			<a href="index2.html">提交</a><br /><br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="checkbox"  class="text"/><a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
		</div>
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>欢迎参观我的家乡</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			body{
				font-family: "微软雅黑";
				font-size: 14px;
			}
			.header{
				width: 100%;
				height: 70px;
			}
			.header-content{
				width: 1400px;
				height: 70px;
				margin:0 auto;
				overflow: hidden;
			}
			.logo{
				float: left;
				height: 800px;
			}
			.logo img{
				height: 70px;
			}
			.search{
				margin-top: 15px;
				float: left;
				height: 40px;
			}
			.search select{
				width: 202px;
				height: 40px;
				margin-right: 4px;
			}
			.search .btn{
				width: 76px;
				height: 40px;
				color: #FFF;
				background-color: #FF4500;
			    border: 1px solid #FF4500;
			}
			.usercebter{
				float: right;
				height: 70px;
				line-height: 70px;
			}
			.usercebter a{
				color: #000;
				margin-right: 10px;
			}
			.banner{
				width: 100%;
				height: 500px;
				text-align: center;
			}
			.main{
				margin-top:20px;
				margin-bottom:90px;
				width: 100%;
			}
			.main-content{
				width: 1140px;
				margin:0 auto;
			}
			.navs{
				overflow: hidden;
			}
			.navs a{
				float: left;
				width: 148px;
				height: 54px;
				line-height: 54px;
				text-align: center;
				color: #000;
				margin-right: 4px;
				border: 1px solid #d8d8d8;
			}
			.navs a:hover{
				color: #fff;
				background-color: #00848a;
				
				transition: all 0.3s ease; 
			}
			.list{
				margin-top: 15px;
				overflow: hidden;
			}
			.list li{
				float: left;
				margin: 0 11px;
			}
			.list li img{
				width: 358px;
				height: 238px;
				
			}
			.list li:hover img{transform: scale(1.1,1.1);} 
			.footer{
				width: 100%;
				height: 70px;
				color: #FFF;
				line-height: 34px;
				font-size: 16px;
				text-align: center;
				background-color: #000;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="header-content">
				<div class="logo">
					<img src="img/lg.jpg" />
				</div>
				<div class="search">
					<select>
						<option value="鼓楼">鼓楼</option>
						<option value="老河大">老河大</option>
						<option value="清明上河园">清明上河园</option>
					</select>
					<input type="submit" value="搜索" class="btn" />
				</div>
				<div class="usercebter">
					<a href="#">个人中心</a>
					<a href="123.html">登录</a>
					<a href="#">注册</a>
				</div>
			</div>
		</div>
		<div class="banner">
			<video src="img/开封.mp4" autoplay loop controls width="1200px" height="500px"/>
		</div>
		<div class="main">
			<div class="main-content">
				<h3 style="text-align: center;font-size: 36px;">更多风景</h3>
				<div class="navs">
					<a href="#">开封鼓楼</a>
					<a href="#">大梁门</a>
					<a href="#">开封府</a>
					<a href="#">龍亭</a>
					<a href="#">相国寺</a>
					<a href="#">鼓楼夜市</a>
					<a href="#">清明上河园</a>
				</div>
				<ul class="list">
					<li>
						<a href="#">
							<img src="img/img/开封.jpg"/>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/img/墙.jpg"/>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/img/开封府.jpg"/>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/img/龙亭.jpg"/>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/img/相国寺.jpg"/>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/img/鼓楼夜市.jpg"/>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<head>
			<meta charset="UTF-8">
			<title>登录入口</title>
			<style type="text/css">
			a{text-decoration: none;}
			.center{
				text-align: center;
				margin:  0 auto;
				width: 500px;
				background-color: aliceblue;
			}
			.btn{
				width: 400px;
				height: 30px;
			}
			</style>
		</head>
		<body>
			<form>
				<div class="center">
			<h1>你的家乡是哪里</h1>
			<hr />
				家乡：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" placeholder="请设置你的家乡"   class="btn"/><br /><br />
				特色：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" placeholder="可用于了解你的家乡" class="btn"/><br /><br />
				游玩：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="password" placeholder="请简述一下著名的游玩地"class="btn" /><br /><br /><br />
				美食：&nbsp;
				<input type="text" placeholder="请输入美食" class="btn"/><br /><br />
				<!-- <input type="submit"value="提交" /><br /><br /> -->
				<a href="index3.html">提交</a><br /><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="checkbox"  class="text"/><a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
			</div>
			</form>
		<div class="footer">
			服务条款|隐私策略|广告服务|客服中心<br/>开封网@
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>你的家乡很漂亮</title>
	</head>
	<style type="text/css">
		.abc{
			background-color: aliceblue;
			background: url(./img/bg.jpg);
			width: 1000px;
			height: 630px;
			font-size: 50px;
			color: antiquewhite;
			text-align: center;
			margin: 50px;
		}
	</head>
	</style>	
	<body>
	<div class="abc">
		<p>你的家乡很漂亮哦</p>
	</body>
</html>