前端个人网站

最新推荐文章于 2024-05-09 12:12:30 发布
最新推荐文章于 2024-05-09 12:12:30 发布
阅读量367 收藏
点赞数
文章标签： html5 javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71198559/article/details/128178933
版权

1.主页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网站首页</title>
		<link rel="stylesheet" href="./css/indext.css">
		<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<!-- 导航栏 -->
		<div class="nav w">
			<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
			<ul>
				<li class="navd"><a href="./indext.html">网站首页</a></li>
				<li class="navc"><a href="./techang.html">我的特长</a></li>
				<li class="nave"><a href="./zuop.html">我的作品</a></li>
				<li class="navf"><a href="./jineng.html">我的技能</a></li>
				<li class="navg"><a href="./jiaol.html">留言交流</a></li>
			</ul>
		</div>
		<div class="lunbot w">
			<div class="lbt">
				<img src="./img/1.jpg" alt="轮播图" id="img_u">
				<div class="img_y"></div>
				<button class="b1" id="bb">&lt;</button>
				<button class="b2" id="ba">&gt;</button>
			</div>
		</div>
		<div class="js w">
			<div class="gyw">
				<div class="gywt">关于我</div>
				<div class="touxiang">
					<img src="./img/tx.jpg" alt="">
				</div>
				<div class="xx">
					<span class="jc">姓名：</span><span>木木</span><br>
					<span class="jc">电话：</span><span>180****825</span><br>
					<span class="jc">邮箱：</span><span>190@qq.com</span><br>
					<span class="jc">爱好：</span><span>音乐</span><span>音乐</span><span>音乐</span>
				</div>
			</div>
			<div class="wdjn">
				<div class="tou">个人介绍</div>
				<div class="jies">
					<div class="xg"><h2>姓名：木木</h2></div>
					<div class="dr"><h2>性别：♂</h2></div>
					<div class="wr"><h2>年龄：16</h2></div>
					<div class="rz"><h2>电话：188****5390</h2></div>
					<div class="ck"><h2>QQ：180****825</h2></div>
					<div class="jz"><h2>爱好：乒乓球，台球</h2></div>
					<div class="ynx"><h2>专业：计算机</h2></div>
					<div class="qhl"><h2>早熟</h2></div>
				</div>
				<div class="jiesr">
					<div class="xg"><h2>性格热情开朗</h2></div>
					<div class="dr"><h2>待人友好</h2></div>
					<div class="wr"><h2>为人诚实谦虚</h2></div>
					<div class="rz"><h2>认真负责</h2></div>
					<div class="ck"><h2>能吃苦耐劳</h2></div>
					<div class="jz"><h2>尽职尽责</h2></div>
					<div class="ynx"><h2>有耐心</h2></div>
					<div class="qhl"><h2>具有亲和力</h2></div>
				</div>
			</div>
		</div>
		<div class="wb w">
			<span>版权所有：个人网页</span>
		</div>
		<script src="./js/new_file.js"></script>
	</body>
</html>

主页css样式

/* 首页 */
.jies{
	float: left;
	top: 0;
	left: 0;
	width: 300px;
	height: 385px;
	/* background-color: aquamarine; */
}

.jies .xg{
	float: left;
	height: 40px;
	width: 200px;
	background-color: aqua;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .xg:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jies .dr{
	float: right;
	height: 40px;
	width: 200px;
	background-color: red;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .dr:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;

	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jies .wr{
	float: left;
	height: 40px;
	width: 200px;
	background-color: gold;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .wr:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;

	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jies .rz{
	float: right;
	height: 40px;
	width: 200px;
	background-color: greenyellow;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .rz:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;

	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jies .ck{
	float: left;
	height: 40px;
	width: 200px;
	background-color: violet;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .ck:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jies .jz{
	float: right;
	height: 40px;
	width: 200px;
	background-color: darkcyan;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .jz:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jies .ynx{
	float: left;
	height: 40px;
	width: 200px;
	background-color: burlywood;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .ynx:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jies .qhl{
	float: right;
	height: 40px;
	width: 200px;
	background-color: lightpink;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jies .qhl:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr{
	float: right;
	width: 300px;
	height: 385px;
	/* background-color: aquamarine; */
}

.jiesr .xg{
	float: left;
	height: 40px;
	width: 200px;
	background-color: aqua;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .xg:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr .dr{
	float: right;
	height: 40px;
	width: 200px;
	background-color: red;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .dr:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr .wr{
	float: left;
	height: 40px;
	width: 200px;
	background-color: gold;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .wr:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr .rz{
	float: right;
	height: 40px;
	width: 200px;
	background-color: greenyellow;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .rz:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr .ck{
	float: left;
	height: 40px;
	width: 200px;
	background-color: violet;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .ck:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr .jz{
	float: right;
	height: 40px;
	width: 200px;
	background-color: darkcyan;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .jz:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr .ynx{
	float: left;
	height: 40px;
	width: 200px;
	background-color: burlywood;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .ynx:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.jiesr .qhl{
	float: right;
	height: 40px;
	width: 200px;
	background-color: lightpink;
	text-align: center;
	line-height: 40px;
	color: #fff;
	transition: all 0.5s;
	margin: 10px 0 0 0;
	border-radius: 10px;
}

.jiesr .qhl:hover{
	width: 100%;
	box-shadow: 2px 2px 9px 2px #333;
	
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.navd{
	background-color: #000;
	opacity: 0.4;
	transform: scale(0.8);
	box-shadow: 1px 1px 9px 7px #fff;
}

2.我的特长

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的特长</title>
		<link rel="stylesheet" href="./css/indext.css">
		<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
		<link rel="stylesheet" href="./css/techang.css">
	</head>
	<body>
		<!-- 导航栏 -->
		<div class="nav w">
			<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
			<ul>
				<li class="navd"><a href="./indext.html">网站首页</a></li>
				<li class="navc"><a href="./techang.html">我的特长</a></li>
				<li class="nave"><a href="./zuop.html">我的作品</a></li>
				<li class="navf"><a href="./jineng.html">我的技能</a></li>
				<li class="navg"><a href="./jiaol.html">留言交流</a></li>
			</ul>
		</div>
		<div class="lunbot w">
			<div class="lbt">
				<img src="./img/1.jpg" alt="轮播图" id="img_u">
				<div class="img_y"></div>
				<button class="b1" id="bb">&lt;</button>
				<button class="b2" id="ba">&gt;</button>
			</div>
		</div>
		<div class="js w">
			<div class="gyw">
				<div class="gywt">关于我</div>
				<div class="touxiang">
					<img src="./img/tx.jpg" alt="">
				</div>
				<div class="xx">
					<span class="jc">姓名：</span><span>木木</span><br>
					<span class="jc">电话：</span><span>180****825</span><br>
					<span class="jc">邮箱：</span><span>190@qq.com</span><br>
					<span class="jc">爱好：</span><span>音乐</span><span>音乐</span><span>音乐</span>
				</div>
			</div>
			<div class="wdjn">
				<div class="tou">我的特长</div>
				<div class="ppt">
					<img src="./img/tq.jpg" alt="">
					<div class="yy">
						<h3>台球</h3>
					</div>
				</div>
				<div class="tpp">
					<img src="./img/ppq.jpeg" alt="">
					<div class="yy">
						<h3>乒乓球</h3>
					</div>
				</div>
			</div>
		</div>
		<div class="wb w">
			<span>版权所有：个人网页</span>
		</div>
		<script src="./js/new_file.js"></script>
	</body>
</html>

特长css样式

.wdjn{
	position: relative;
}
.ppt{
	position: absolute;
	top: 45px;
	left: 0;
	width: 100%;
	height: 200px;
	overflow: hidden;
}
.ppt img{
	width: 100%;
	height: 200px;
}

.yy{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px;
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
	opacity: 0;
	transition: all 0.5s;
}

.yy:hover{
	opacity: 1;
}

.tpp{
	position: absolute;
	top: 255px;
	left: 0;
	width: 100%;
	height: 200px;
	overflow: hidden;
}
.tpp img{
	width: 100%;
	height: 200px;
}

.yy h3{
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: #fff;
}

.navc{
	background-color: #000;
	opacity: 0.4;
	transform: scale(0.8);
	box-shadow: 1px 1px 9px 7px #fff;
}

3.我的作品

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的作品</title>
		<link rel="stylesheet" href="./css/indext.css">
		<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
		<link rel="stylesheet" href="./css/zuop.css">
	</head>
	<body>
		<!-- 导航栏 -->
		<div class="nav w">
			<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
			<ul>
				<li class="navd"><a href="./indext.html">网站首页</a></li>
				<li class="navc"><a href="./techang.html">我的特长</a></li>
				<li class="nave"><a href="./zuop.html">我的作品</a></li>
				<li class="navf"><a href="./jineng.html">我的技能</a></li>
				<li class="navg"><a href="./jiaol.html">留言交流</a></li>
			</ul>
		</div>
		<div class="lunbot w">
			<div class="lbt">
				<img src="./img/1.jpg" alt="轮播图" id="img_u">
				<div class="img_y"></div>
				<button class="b1" id="bb">&lt;</button>
				<button class="b2" id="ba">&gt;</button>
			</div>
		</div>
		<div class="js w">
			<div class="gyw">
				<div class="gywt">关于我</div>
				<div class="touxiang">
					<img src="./img/tx.jpg" alt="">
				</div>
				<div class="xx">
					<span class="jc">姓名：</span><span>木木</span><br>
					<span class="jc">电话：</span><span>180****825</span><br>
					<span class="jc">邮箱：</span><span>190@qq.com</span><br>
					<span class="jc">爱好：</span><span>音乐</span><span>音乐</span><span>音乐</span>
				</div>
			</div>
			<div class="wdjn">
				<div class="tou">我的作品</div>
				<div class="imgs">
					<a href="./img/01-电商-主页-gai.jpg"><img src="./img/01-电商-主页-gai.jpg" alt=""></a>
				</div>
				<div class="imgsr">
					<a href="./img/律师事务所案例页768.jpg"><img src="./img/律师事务所案例页768.jpg" alt=""></a>
				</div>
			</div>
		</div>
		<div class="wb w">
			<span>版权所有：个人网页</span>
		</div>
		<script src="./js/new_file.js"></script>
	</body>
</html>

作品css样式

.imgs{
	width: 300px;
	height: 100%;
	padding-top: 10px;
	float: left;
}

.imgs img{
	width: 100%;
	height: 100%;
}

.imgsr{
	padding-top: 10px;
	width: 300px;
	height: 100%;
	float: right;
}

.imgsr img{
	width: 100%;
	height: 100%;
}

.wdjn img:hover{
	box-shadow: -2px 2px 2px 2px #000;
}

.nave{
	background-color: #000;
	opacity: 0.4;
	transform: scale(0.8);
	box-shadow: 1px 1px 9px 7px #fff;
}

4.我的技能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的技能</title>
		<link rel="stylesheet" href="./css/indext.css">
		<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
		<link rel="stylesheet" href="./css/jineng.css">
	</head>
	<body>
		<!-- 导航栏 -->
		<div class="nav w">
			<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
			<ul>
				<li class="navd"><a href="./indext.html">网站首页</a></li>
				<li class="navc"><a href="./techang.html">我的特长</a></li>
				<li class="nave"><a href="./zuop.html">我的作品</a></li>
				<li class="navf"><a href="./jineng.html">我的技能</a></li>
				<li class="navg"><a href="./jiaol.html">留言交流</a></li>
			</ul>
		</div>
		<div class="lunbot w">
			<div class="lbt">
				<img src="./img/1.jpg" alt="轮播图" id="img_u">
				<div class="img_y"></div>
				<button class="b1" id="bb">&lt;</button>
				<button class="b2" id="ba">&gt;</button>
			</div>
		</div>
		<div class="js w">
			<div class="gyw">
				<div class="gywt">关于我</div>
				<div class="touxiang">
					<img src="./img/tx.jpg" alt="">
				</div>
				<div class="xx">
					<span class="jc">姓名：</span><span>木木</span><br>
					<span class="jc">电话：</span><span>180****825</span><br>
					<span class="jc">邮箱：</span><span>190@qq.com</span><br>
					<span class="jc">爱好：</span><span>音乐</span><span>音乐</span><span>音乐</span>
				</div>
			</div>
			<div class="wdjn">
				<div class="tou">我的技能</div>
				<div class="html5">HTML5</div>
				<div class="css3">CSS3</div>
				<div class="python">python</div>
				<div class="jss">JavaScript</div>
			</div>
		</div>
		<div class="wb w">
			<span>版权所有：个人网页</span>
		</div>
		<script src="./js/new_file.js"></script>
	</body>
</html>

技能css样式

.wdjn{
	position: relative;
}

.wdjn .html5{
	position: absolute;
	top: 40px;
	left: 30px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	transition: all 0.5s; 
	background-color: deepskyblue;
}

.wdjn .css3{
	position: absolute;
	top: 40px;
	right: 90px;
	width: 160px;
	height: 160px;
	line-height: 160px;
	border-radius: 80px;
	text-align: center;
	background-color: pink;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	transition: all 0.5s; 
}

.wdjn .python{
	position: absolute;
	top: 300px;
	right:70px;
	width: 120px;
	height: 120px;
	line-height: 120px;
	border-radius: 60px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	background-color: teal;
	transition: all 0.5s; 
}

.wdjn .jss{
	position: absolute;
	top: 180px;
	left: 30px;
	width: 200px;
	height: 200px;
	line-height: 170px;
	border-radius: 100px;
	text-align: center;
	background-color: orange;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	transition: all 0.5s; 
}

.jss:hover{
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.html5:hover{
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}
.css3:hover{
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}
.python:hover{
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
}

.navf{
	background-color: #000;
	opacity: 0.4;
	transform: scale(0.8);
	box-shadow: 1px 1px 9px 7px #fff;
}

5.留言交流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言交流</title>
		<link rel="stylesheet" href="./css/indext.css">
		<link rel="shortcut icon" href="./img/tx.jpg" type="image/x-icon">
		<link rel="stylesheet" href="./css/jiao.css">
	</head>
	<body>
		<!-- 导航栏 -->
		<div class="nav w">
			<div class="loog"><a href="./indext.html"><h1>个人网站</h1></a></div>
			<ul>
				<li class="navd"><a href="./indext.html">网站首页</a></li>
				<li class="navc"><a href="./techang.html">我的特长</a></li>
				<li class="nave"><a href="./zuop.html">我的作品</a></li>
				<li class="navf"><a href="./jineng.html">我的技能</a></li>
				<li class="navg"><a href="./jiaol.html">留言交流</a></li>
			</ul>
		</div>
		<div class="lunbot w">
			<div class="lbt">
				<img src="./img/1.jpg" alt="轮播图" id="img_u">
				<div class="img_y"></div>
				<button class="b1" id="bb">&lt;</button>
				<button class="b2" id="ba">&gt;</button>
			</div>
		</div>
		<div class="js w">
			<div class="gyw">
				<div class="gywt">关于我</div>
				<div class="touxiang">
					<img src="./img/tx.jpg" alt="">
				</div>
				<div class="xx">
					<span class="jc">姓名：</span><span>木木</span><br>
					<span class="jc">电话：</span><span>180****825</span><br>
					<span class="jc">邮箱：</span><span>190@qq.com</span><br>
					<span class="jc">爱好：</span><span>音乐</span><span>音乐</span><span>音乐</span>
				</div>
			</div>
			<div class="wdjn">
				<div class="tou">留言交流</div>
				<form action="">
					<span>姓名：</span><input type="text" placeholder="请输入姓名"><br>
					<span>手机：</span><input type="text" placeholder="请输入手机号码"><br>
					<span>性别：</span><input type="radio" name="xb" id=""><span>男♂</span><input type="radio" name="xb" id=""><span>女♀</span><br>
					<span>爱好：</span><input type="checkbox" name="ah"><span>音乐</span><input type="checkbox" name="ah"><span>电影</span><input type="checkbox" name="ah"><span>写作</span><input type="checkbox" name="ah"><span>运动</span><br>
					<span>留言：</span><textarea name="" id="" cols="30" rows="10"></textarea><br>
					<input type="submit">
				</form>
			</div>
		</div>
		<div class="wb w">
			<span>版权所有：个人网页</span>
		</div>
		<script src="./js/new_file.js"></script>
	</body>
</html>

留言交流css样式

form span{
	/* float: left; */
	vertical-align: middle;
	display: inline-block;
	/* width: 90px; */
	height: 30px;
	line-height: 30px;
	/* text-align: center; */
	font-size: 20px;
	margin: 20px 10px 0 0;
	font-weight: bold;
}
form{
	margin: 30px auto 0;
	width: 500px;
	height: 400px;
}

form input{
	margin: 20px 10px 0 0;
	/* float: left; */
	vertical-align: middle;
	outline: none;
	border: 2px solid #74e0f3;
}
form input:hover{
	box-shadow: 2px 2px 2px 2px #999;
	
}
form textarea{
	vertical-align: middle;
	outline: none;
	border: 2px solid #74e0f3;
}

form textarea:hover{
	box-shadow: 2px 2px 2px 2px #999;
}
form input[type='text']{
	padding-left: 20px;
	height: 30px;
	width: 200px;
	outline: none;
	border: 2px solid #74e0f3;
}

form input[type='text']:hover{
	box-shadow: 2px 2px 2px 2px #999;
}
form input[type='radio']{
	width: 15px;
	height: 15px;
}

form input[type='radio']{
	border: 2px solid #74e0f3;
}

form input[type='submit']{
	margin: 20px 0 0 130px;
	width: 100px;
	height: 30px;
	background-color: #74e0f3;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

.navg{
	background-color: #000;
	opacity: 0.4;
	transform: scale(0.8);
	box-shadow: 1px 1px 9px 7px #fff;
}

公共css样式

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	background: url("../img/R-C.jpg");
}

.w {
	width: 1000px;
	margin: 0 auto;
	background-color: #fff;
}

/* 导航栏 */
.loog{
	width: 250px;
	height: 70px;
	float: left;
	/* background-color: red; */
}

.loog h1{
	display: block;
	font-size: 0;
	width: 250px;
	height: 70px;
	background: url("../img/lo.jpg");
	background-size: 250px 70px;
	transition: all .5s;
	border-radius: 35px; 
}
.loog h1:hover{
	transform: scale(0.8);
	box-shadow: 1px 1px 9px 2px #333;
}
.nav{
	height: 70px;
	overflow: hidden;
	background-color: #74e0f3;
}

.nav ul{
	width: 700px;
	float: right;
}

.nav li{
	float: left;
	list-style: none;
	line-height: 70px;
}

.nav li a{
	padding: 0 25px 0 25px;
	display: block;
	text-align: center;
	height: 70px;
	text-decoration: none;
	color: #fff;
	font-size: 20px;
	font-weight: 100;
	transition: all .5s;
}

.nav li a:hover{
	background-color: #000;
	opacity: 0.4;
	transform: scale(0.8);
	box-shadow: 1px 1px 9px 7px #fff;
}

.lunbot{
	height: 420px;
	padding-top:20px;
}

.lunbot .lbt{
	position: relative;
	width: 960px;
	margin: 0 auto;
}

.lunbot .lbt img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
}

.lunbot .lbt .img_y{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	background-image: linear-gradient(
					transparent,
					rgba(0,0,0,.6)
				);
	opacity: 0;
	transition: all 0.5s;
}

.lunbot .lbt .img_y:hover {
	opacity: 1;
}
.lunbot .b1{
	position: absolute;
	top: 155px;
	left: 0;
	width: 40px;
	height: 90px;
	border: none;
	opacity: 0.4;
	display: none;
	cursor: pointer;
	transition: all 0.5s;
	border-radius: 0 45px 45px 0;
}
.lunbot .lbt:hover button{
	display: block;
}
.lunbot .b2{
	position: absolute;
	top: 155px;
	right: 0;
	width: 40px;
	cursor: pointer;
	height: 90px;
	transition: all 0.5s;
	border: none;
	display: none;
	opacity: 0.4;
	border-radius: 45px 0 0 45px;
}
/* 介绍栏 */
.js{
	padding: 20px;
	height: 500px;
}

.gyw{
	float: left;
	width: 300px;
	height: 420px;
	/* background-color: red; */
}

.gyw .gywt{
	width: 100%;
	height: 35px;
	background-color: #74e0f3;
	padding-left: 20px;
	line-height: 35px;
	font-size: 20px;
	color: #fff;
}

.gyw .touxiang{
	margin: 20px auto 0;
	width: 200px;
	height: 200px;
	border-radius: 100px;
}

.gyw .touxiang img{
	display: block;
	width: 200px;
	height: 200px;
	border-radius: 100px;
	border: 2px solid #74e0f3;
}


.xx{
	width: 100%;
	margin: 30px auto 0;
}
.xx span{
	display: inline-block;
	margin: 10px 0 10px 0;
}

.jc{
	font-weight: bold;
}

.wdjn{
	float: right;
	width: 620px;
	height: 420px;
	/* background-color: antiquewhite; */
}


.wdjn .tou{
	width: 100%;
	height: 35px;
	background-color: #74e0f3;
	font-size: 20px;
	color: #fff;
	line-height: 35px;
	padding-left: 20px;
}

.wb{
	text-align: center;
	line-height: 70px;
	height: 70px;
	background-color: #74e0f3;
}
.wb span{
	color: #fff;
}

js轮播图

var text=1;
var img=document.querySelector('#img_u');
var b1=document.querySelector('#bb');
var b2=document.querySelector('#ba');
b1.onclick = function(){
	text--;
	if(text<1){
		text=5;
	}
	
	img.src="./img/"+text+".jpg";
}
b2.onclick=function(){
	text++;
	// console.log("点");
	if(text>5){
		text=1;
	}
	img.src="./img/"+text+".jpg";
}
function lunbo(){
	text++;
	if(text>5){
		text=1;
	}
	var img=document.querySelector('#img_u');
	img.src="./img/"+text+".jpg";
}
setInterval(lunbo,4000);

文轩程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
专注于dreamweaver网页设计制作
12-29 5802
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
APP管理平台--前端篇，首页（三）
Krisez的博客
03-04 2995
文章目录布局 布局 作为首页，肯定在打开网址后就看得到对应信息。那么作为APP管理平台，这个信息自然而然的表现成了APP列表。那么依据现有各大应用市场需要分为已上线和未上线。但是在实际做的时候没有区分，这次项目中将所有新增的APP都展示了。区分布局就决定了上下，上面是个TAB，用于切换；下面是个LIST，用于展示列表。 APP顾名思义就是上传的各种APP数据，组件是团队内部使用的nexus仓库上的自构仓库，由于APP业务是组件化，所以存在业务组件和功能组件，但是组件数量太多，所以就顺便挂了出来，并且查看最
前端网页设计必逛的六个宝藏网站（非常值得收藏）_前端页面设计网站
2401_84617772的博客
05-09 1474
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。【速成之路】jQuery。
SpringBoot个人博客项目搭建—后台照片墙界面功能介绍（九）
清峰的博客
10-11 1334
后台照片墙界面功能介绍
前端：html+css+js实现CSDN首页
坚持不懈的大白的博客
01-01 1277
我的实现效果为： 原界面如下,网址为：csdn 这个部分算导航栏吧！原网站的实现是使用到js监听、固定定位等，初始时这个导航栏并不是固定定位，而是向下移动滚动条之后才变为固定定位的，当向上移动滚动条到一定位置时又会恢复为初始样式，如下： 而我对于这部分直接使用了固定定位，没有设置监听的哈。另外，除了字体文本样式部分拷贝自原网站，其他部分均为小编按照我自己的思路来设计的吧！ 这两个图标会随着鼠标移入、移出而变换。并不是简简单单换一个img的src的属性那么简单。参考原网站的实现原理。运行结果：ht
前端——“一看就会的”菜鸟教程网站首页制作！
Searchin_R的博客
09-26 2万+
之前在复习网页制作，仿照菜鸟教程的首页写了一个仿菜鸟首页。效果如下：  制作网页之前先布局。原网页如下： 分析该网站的布局，我们可以发现，菜鸟教程的首页主要有四个模块，分别是顶端，顶端导航， 左边菜单，右边菜单内容。 先在原网站查看源码，找到相应模块的参数，根据这些参数来设置自己的模块，这样就可以增加自己网页与原网页的相似度。 1、顶端LOGO和搜索框 顶端LOGO和文本框的制作...
Web前端个人网站，网页个人网站模版，HTML&CSS&JS制作个人网站
最新发布
07-02
Web前端个人网站，网页个人网站模版，HTML&CSS&JS制作个人网站
前端个人简历网站模板
04-02
【前端个人简历网站模板】是为前端开发者设计的一款用于展示自己技能、经历和作品的网页模板。这个模板可以帮助你快速创建一个专业且吸引人的在线简历，以便在求职过程中更好地展示自己的能力和项目经验。以下是该...
前端工程师个人简介模板
06-24
前端工程师个人简介模板是一款紫色迷你简洁的web前端工程师简历模板下载。
房地产前端网站模板
06-01
房地产前端网站模板是专为房地产行业设计的一种网页模板，它集成了美观的界面设计和功能丰富的交互元素，旨在提升用户体验并有效地展示房地产项目信息。这款模板通常由HTML、CSS、JavaScript等前端技术构建，适用于...
前端网站实例100套源码
02-02
本资源包“前端网站实例100套源码”是一个极其宝贵的自学和实践工具，提供了丰富的前端项目案例，涵盖各种类型的网站设计，包括企业官网、电商网站、个人博客、资讯门户等。以下将详细解析这些知识点： 1. **HTML与...
前端——HTML百度首页制作
Searchin_R的博客
09-22 2万+
前些天为了学习页面布局，做了一个简易的百度首页。做百度首页的原因是因为它的布局比较简单，需要顾及的地方比较少，但是需要相关的知识点又基本上都能用上，对自己理解页面布局以及一些标签（如float和margin）的用法有很大的帮助。 仿做一个网页之前需要分析该网页的布局，下图是百度首页。 从上图可以看出，百度首页大概分为三个块：头部，中部，和底部。中部又可以分为LOGO和搜索框，地步可以分为百...
首页数据展示前端页面
qq_46112274的博客
06-05 1661
首页数据展示前端页面1、首页前端实现1.1、封装api请求，用户调用后端接口1.1.1、创建api文件夹，创建/api/hosp/hosp.js1.1.2、创建/api/cmn/dict.js用于调取数据字典中的值1.2、添加组件，用于页面显示1.3、在index.vue页面中编写js代码，用于实现数据在页面的显示 1、首页前端实现 1.1、封装api请求，用户调用后端接口 1.1.1、创建api文件夹，创建/api/hosp/hosp.js import request from '@/utils/re
使用Django构建个人网站（一）——主页前端页面构建
熊熊玩python
07-11 3885
目录 BOOTSTRAP的使用 导航栏的构建 轮播图及个人简介位置 栅格系统 轮播图 栅格内的栅格 完整代码 Python之禅 SKILLS描述 底部 下载代码 这是我的第一篇博客，也想记录一下自己使用django+bootstrap构建个人网站的过程，供自己日后查看及方便其他的同好。 话不多说，我的第一步没有从django的后台开始，我要构建一个能看的过去的主页，主页使...
Web前端大作业—个人网页(html+css+javascript)
热门推荐
weixin_61370021的博客
06-28 5万+
Web前端大作业—个人网页(html+css+javascript) 页面美观，有轮播相册，个人收藏，个人日志，天气查询，微电影页面多个页面。
前端首页架构编写
weixin_46346504的博客
06-11 517
项目实训——前端首页架构编写
前端：搭建自己的个人网站
AllenZouJ的博客
07-02 5596
作为一名h5开发者，我常常不会满足于仅仅写页面业务逻辑和对接后端接口。 （当然，如果是想当摸鱼王，我还是会满足的，哪怕只写一个静态页面，我也满足了。） 我不甘心只看到界面上的这一点区域，我渴望，了解更广阔的世界。 于是乎，就有了搭建自己的个人网站的想法。 使用的工具和技术包括：墨刀-vue-node.js-mysql-navicate-宝塔面板 步骤 以下步骤不用严格按照先后顺序，比如网站备案可能要花很久，可以作为第一步。 又比如，我一边开发，一边有点新想法，我又可以回来修改原型。 毕竟在这里，我是产品
Web前端大作业—个人网页(html+css+javascript)我的家乡新密 (15页)含课程设计
qq_38518191的博客
04-05 563
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
web前端个人主页代码
03-07
Web前端个人主页代码通常包括HTML、CSS和JavaScript三部分。下面是一个简单的示例： HTML部分： ```html <!DOCTYPE html> 个人主页 欢迎来到我的个人主页 <li><a href="#">首页</a></li> <li><a ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值