当前位置： 首页 > article >正文

web前端开发--创建百雀羚网站

article 2024/11/26 2:25:22

1、创建一个大型网页

设计网页index.html结构为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link type="text/css"rel="stylesheet"href="css/index.css" />
		<link type="text/css"rel="stylesheet"href="iconfont/iconfont.css" />
	</head>
	<body>
		<!--videobox开始-->
		<div class="videobox">
		<header>
			<div class="con">
				<section class="left"></section>
				<section class="right">
					<a href="login.html">登录</a>
					<a href="register.html">注册</a>
				</section>
			</div>
		</header>
		 <nav>  
		 	<ul>
		 		<li class="left">
		 			<a class="one"href="#">
		 				<img src="img/sanxian.png"alt="" />
		 				<span>选项</span>
		 				<img src="img/sanjiao.png"alt="" />
		 			</a>
		 			<aside>
		 				<span></span>
		 				<ol class="zuo">
		 					<li class="con">护肤</li>
		 					<li>&gt;洁面</li>
		 					<li>&gt;爽肤水</li>
		 					<li>&gt;精华</li>
		 					<li>&gt;乳液</li>
		 					<li class="con">身体护理</li>
		 					<li>&gt;润肤</li>
		 					<li>&gt;沐浴露</li>
		 					<li>&gt;护手霜</li>
		 					<li class="con">男士专区</li>
		 					<li>&gt;爽肤水</li>
		 					<li>&gt;洁面</li>
		 					<li>&gt;面霜</li>
		 					<li>&gt;精华</li>
		 				</ol>
		 				<ol class="you">
		 					<li class="con">套装/礼盒</li>
		 					<li>&gt;补水保湿套装</li>
		 					<li>&gt;淡纹四件套</li>
		 					<li>&gt;护肤套装</li>
		 					<li class="con">热门搜素</li>
		 					<li>&gt;洁面奶</li>
		 					<li>&gt;爽肤水</li>
		 					<li>&gt;精华</li>
		 					<li>&gt;面霜</li>
		 				</ol>
		 				<img src="img/tu1.jpg"alt=""/>
		 			</aside>
		 		</li>
		 		<li class="center">
		 			<form>
		 				<input type="text"name="h"value="请输入商品名称、品牌或编码" />
		 			</form>
		 		</li>
		 		<li class="right">
		 			<a href="#"><i class="iconfont">&#xe62e;</i></a>
		 			<a href="#"><i class="iconfont">&#xe635;</i></a>
		 			<a href="#"><i class="iconfont">&#xe636;</i></a>
		 			<a href="#"><i class="iconfont">&#xe83f;</i></a>
		 		</li>
		 	</ul>
		 </nav>
		 <video src="img/bql.mp4" autoplay loop ></video>
		 <audio src="img/home.ogg" autoplay loop></audio>
		</div>
		 <!--videobox结束！-->
		 <!--new begin开始！-->
		 <div class="new">
		 	<header>至臻宠爱畅销销榜单</header>
		 	<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
		 	<ul>
		 		<li>
		 			<hgroup>
		 				<h2>本草轻装 净透无暇</h2>
		 				<h2>肌源透润恒采肌肤水</h2>
		 				<h2></h2>
		 				<h2></h2>
		 			</hgroup>
		 		</li>
		 		<li>
		 			<hgroup>
		 				<h2>激发源头水润修复力</h2>
		 				<h2>海之秘赋能恒润高保湿精华液</h2>
		 				<h2></h2>
		 				<h2></h2>
		 			</hgroup>
		 		</li>
		 		<li>
		 			<hgroup>
		 				<h2>悦色又养肤国民气垫</h2>
		 				<h2>肌肤透润气垫修容霜</h2>
		 				<h2></h2>
		 				<h2></h2>
		 			</hgroup>
		 		</li>
		 	</ul>
		 </div>
		  <!--new begin结束！-->
		 <!--caoben bigan-->
		 <div class="caoben">
		 	<header>百雀羚草本系列</header>
		 	<p>初赋年轻肤质 重现细滑紧致</p>
		 	<ul>
		 		<li>
		 			<img class="zheng"src="img/pic4.png"alt="">
		 			<img class="fan"src="img/pic4f.png"alt="" />
		 		</li>
		 		<li>
		 			<img class="zheng"src="img/pic5.png"alt="" />
		 			<img class="fan"src="img/pic5f.png" alt=""/>
		 		</li>
		 		<li>
		 			<img class="zheng"src="img/pic6.png"alt="" />
		 			<img class="fan"src="img/pic6f.png"alt="" />
		 		</li>
		 	</ul>
		 </div>
		 <!--caoben end-->
		 <!--text begin-->
		 <div class="text">
		 	<header>评测中心</header>
		 	<p>评测 我们更专业 用户更放心</p>
		 	<ul>
		 		<li>
		 			<img class="tu" src="img/cp1.jpg"alt=" " />
		 			<img class="tihuan"src="img/th1.png"alt=" " />
		 		</li>
		 		<li>
		 			<img class="tu" src="img/cp2.jpg"alt=" " />
		 			<img class="tihuan"src="img/th2.png"alt=" " />
		 		</li>
		 		<li>
		 			<img class="tu" src="img/cp3.jpg"alt=" " />
		 			<img class="tihuan"src="img/th3.png"alt=" " />
		 		</li>
		 		<li>
		 			<img class="tu" src="img/cp4.jpg"alt=" " />
		 			<img class="tihuan"src="img/th4.png"alt=" " />
		 		</li>
		 		<li>
		 			<img class="tu" src="img/cp5.jpg"alt=" " />
		 			<img class="tihuan"src="img/th5.png"alt=" " />
		 		</li>
		 		<li>
		 			<img class="tu" src="img/cp6.jpg"alt=" " />
		 			<img class="tihuan"src="img/th6.png"alt=" " />
		 		</li>
		 		<li>
		 			<img class="tu" src="img/cp7.jpg"alt=" " />
		 			<img class="tihuan"src="img/th7.png"alt=" " />
		 		</li>
		 		<li>
		 			<img class="tu" src="img/cp8.jpg"alt=" " />
		 			<img class="tihuan"src="img/th8.png"alt=" " />
		 		</li>
		 	</ul>
		 </div>
		 <!--text end-->
		 <footer>
		 	<div class="logo"></div>
		 	<div class="message">
		 		<form>
		 			<ul class="left">
		 				<li>
		 					<p><label for=" ">姓名：</label></p>
		 					<input type="text" />
		 				</li>
		 				<li>
		 					<p>邮箱：</p>
		 					<input type="email"/>
		 				</li>
		 				<li>
		 					<p>电话：</p>
		 					<input type="tel"pattern="^\d{11}$"title="请输入11位数字" />
		 				</li>
		 				<li>
		 					<p>密码：</p>
		 					<input type="password" />
		 				</li>
		 				<li>
		 					<input class="but"type="submit"value="" />
		 				</li>
		 			</ul>
		 			<div class="right">
		 				<p>留言：</p>
		 				<textarea></textarea>
		 			</div>
		 		</form>
		 	</div>
		 </footer>
		 <div class="copyright">
		 	<a href="#">上海百雀羚日用化学有限公司</a>
		 </div>
	</body>
</html>

设计网页index.css样式为

body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {margin:0;padding:0;border:0;list-style: none;}
body{font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:14px;}

a{color:#999;text-decoration: none;}
a:hover{color:#fff;}
input,textarea{outline: none;} 
/* videobox */
 .videobox{
	width:100%;
	height:680px;
	background:#fff;
	overflow: hidden;       /*内容溢出时隐藏*/
	position: relative;     /*外层大块相对定位*/
}

.videobox video{
	width:100%;
	min-width: 1280px;      /*视频元素的最小宽度值*/
	position: absolute;    /*视频元素绝对定位*/
	top: 50%;              /*视频元素位于大块的中心位置*/
	left: 50%;
	transform: translate(-50%, -50%);
}
.videobox header{
	width:100%;
	height:40px;
	background: #333;
	z-index: 999;     /*头部在最前面显示，不被视频元素遮盖*/
	position: absolute;
}
.videobox header .con{
	width:1030px;     /*头部内容的宽度*/
	height:40px;
	margin:0 auto;
}
.videobox header .left{
	width:75px;
	height:27px;
	background:url(../img/logoy.png) no-repeat;
	margin-top: 10px;
	float: left;
}
.videobox header .right{
	margin-top: 10px;
	float: right;	
}
.videobox header .right a{margin-right: 10px;}
.videobox nav{
	width:100%;      /*导航元素通栏部分的宽度*/
	height:90px;
	background: rgba(0,0,0,0.2);
	z-index: 1000;          /*导航在最前面显示，不被视频元素遮盖*/
	position: absolute;     /*导航元素绝对定位*/
	top:40px;
	border-bottom: 1px solid #fff;
}
.videobox nav ul{
	width:1030px;    /*导航元素中内容的宽度*/
	height:90px;
	margin:0 auto;
	position: relative;
}
.videobox nav ul li{
	float: left;
	margin-right: 19%;
}
.videobox nav ul .left:hover aside{display: block;}  /*侧边栏设置为块级元素*/
.videobox nav ul .left a{
	display: block;
	height:90px;
	line-height: 90px;
	font-size: 20px;
	color:#fff;
}
.videobox nav ul .left a img{vertical-align: middle;}
.videobox nav ul .left a span{margin:0 10px;}
.videobox aside{
	display: none;       /*侧边栏一开始不显示*/
	width:380px;
	height:560px;
	background: rgba(0,0,0,0.3);     /*背景色为透明的灰色*/
	position: absolute;     /*绝对定位*/
	left:0;
	top:90px;
	z-index: 1500;     /*侧边栏在最前面显示，不被视频元素遮盖*/
	color:#fff;
}
.videobox aside span{/*三角符号的样式*/
	width:20px;
	height:14px;
	background:url(../img/liebiao.png) 0 0 no-repeat;
	position: absolute;
	left:50px;
	top:0;
}
.videobox aside ol{
	width:155px;
	float: left;
}
.videobox aside ol li{
	width:155px;
	height:25px;
	line-height: 25px;
	cursor: pointer;
	font-family: "宋体";
}
.videobox aside ol li.con{
	font-size: 16px;
	text-indent: 0;
	font-family: "微软雅黑";
	padding: 10px 0;
}
.videobox aside ol li:hover{color:#fff;}
.videobox aside .zuo{margin:35px 0 0 68px;}
.videobox aside .you{margin-top: 35px;}
.videobox aside img{margin:10px 0 0 13px;}
.videobox nav ul .center{margin-top: 32px;}
.videobox nav ul .center input{    /*搜索框的样式*/
	width:240px;
	height:30px;
	border:1px solid #fff;
	border-radius: 15px; 
	color:#fff;
	line-height: 32px;	
	padding-left: 30px;
	box-sizing:border-box;   /*元素大小包括了边框和内边距*/
	background:url(../img/search.png) no-repeat 3px 3px;/*添加搜索框中的小图像*/
}
.videobox nav ul .right{
	margin-top: 32px;
	width:280px;
	height:32px;
	margin-right:0;
	text-align: center;
	line-height: 32px;
	font-size: 16px;
} 
.videobox nav ul .right a{
	display: inline-block;
	width:32px;
	height:32px;
	color:#fff;
	box-shadow: 0 0 0 1px #fff inset;/*设置1px的内阴影*/
	transition: box-shadow 0.3s ease 0s;/*过渡效果*/
	border-radius: 16px; 
	margin-left: 30px;
}
.videobox nav ul .right a:hover{
	box-shadow: 0 0 0 16px #fff inset;   /*设置16px的内阴影，填充白色*/
	color:#C1DCC5;
}
/* videobox */
/* new 开始*/
.new{
	width:100%;
	height:530px;
	background: #fff;
}
.new header{ 				/*标题行样式*/
	width:385px;
	height: 95px;
	line-height:95px;
	background:#D5CFCF;
	border-radius: 48px;    /*设置圆角效果*/
	margin:70px auto 0;
	box-sizing:border-box;  /* 边框和内边距的值包含在width内 */
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	color: #333333;
	text-shadow: 3px 3px 3px #ccc;	/*设置文字阴影效果*/
}
.new p{
	margin-top: 10px;
	text-align: center;
	color: #db0067;
}
.new ul{
	margin:70px auto 0;
	width: 960px;
}
.new ul li{
	width:266px;
	height:250px;
	border:1px solid #ccc; 
	background:url(../img/pic1.png) 0 0 no-repeat;
	float: left;
	margin-right:8%;
	margin-bottom: 40px;
	position: relative;   /*相对定位*/
	overflow: hidden;     /*溢出内容不显示，也就是产品介绍的文字不显示*/
}
.new ul li:nth-child(2){  /*设置第二个li元素的背景图像*/
	background-image: url(../img/pic2.png);
}
.new ul li:nth-child(3){/*设置第三个li元素的背景图像*/
	margin-right: 0;
	background-image: url(../img/pic3.png);
}
.new ul li hgroup{  /* 遮罩的样式 */
	position: absolute;
	left:0;
	top:250px;   /*不显示*/
	width:266px;
	height:250px;
	background: rgba(0,0,0,0.5);/*半透明效果*/
	transition: all 0.5s ease-in 0s; /*设置过渡效果*/

}
.new ul li:hover hgroup{/*鼠标指针移动到产品上时显示文字内容*/
	position: absolute;   /* 绝对定位 */
	left:0;
	top:0;
}
.new ul li hgroup h2:nth-child(1){/*设置文字样式*/
	font-size: 22px;
	text-align: center;
	color:#fff;
	font-weight: normal;
	margin-top: 58px;
}
.new ul li hgroup h2:nth-child(2){
	font-size: 14px;
	text-align: center;
	color:#fff;
	font-weight: normal;
	margin-top: 15px;
}
.new ul li hgroup h2:nth-child(3){
	width:26px;
	height: 26px;
	margin-left: 120px;
	margin-top: 15px;
	background:url(../img/jiantou.png) no-repeat;
}
.new ul li hgroup h2:nth-child(4){
	width:75px;
	height: 22px;
	margin-left: 95px;
	margin-top: 25px;
	background:url(../img/anniu.png)  no-repeat;
} 
/* new 结束*/
/* caoben开始 */
.caoben{
	width:100%;
	height:512px;
	background:#b3cab1;
	padding-top: 70px;
}
.caoben header{
	width:385px;
	height: 95px;
	line-height:95px;
	text-align: center;
	background:#D5CFCF;
	border-radius: 48px;/*设为圆角矩形*/
	margin:0 auto;
	box-sizing:border-box;	/* 边框和内边距的值包含在width内 */
	font-size: 36px;
	font-weight: bold;
	color: #333333;
	text-shadow: 3px 3px 3px #ccc;/*为文字添加阴影*/
}
.caoben p{
	margin-top: 10px;
	text-align: center;
	color:#db0067;
}
.caoben ul{
	margin:70px auto 0;
	width: 960px;
}
.caoben ul li{ /*每个图片的样式*/
	width:266px;
	height:251px;	
	float: left;
	margin-right:8%;
	margin-bottom: 40px;
	position: relative; /*设置相对定位*/
	-webkit-perspective: 230px; /*用于指定3D元素的透视效果，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。Chrome和Safari支持替代的 -webkit-perspective属性*/
	
}
.caoben ul li:last-child{
	margin-right: 0;
}
.caoben ul li img{
	position: absolute;/*采用绝对定位*/
	left:0;
	top:0;
	-webkit-backface-visibility: hidden;/*用于定义元素在不面对屏幕时是否可见*/
	backface-visibility: hidden;
	transition: all 0.5s ease-in 0s;/*设置旋转的过渡效果*/
}
.caoben ul li img.fan{	
 	-webkit-transform: rotateX(-180deg);/*绕x轴逆时针旋转180°，隐藏图片*/
	transform: rotateX(-180deg);
 }
.caoben ul li:hover img.fan{
 	 -webkit-transform: rotateX(0deg);/*绕x轴逆时针旋转0°，显示图片*/
	transform: rotateX(0deg);
 }
 .caoben ul li:hover img.zheng{
 	 -webkit-transform: rotateX(180deg);/*绕x轴顺时针针旋转180°，隐藏图片*/
	 transform: rotateX(180deg);
 } 
/*  caoben结束 */
/* text开始 */
.text{
	width:100%;
	height:700px;
	background: #fff;
	padding-top:70px;
}
.text header{
	width:385px;
	height: 95px;
	line-height: 95px;
	background:#D5CFCF;
	border-radius: 48px;
	margin:0px auto;
	box-sizing:border-box;
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	color: #333333;
	text-shadow: 3px 3px 3px #ccc;
}
.text p{
	margin-top: 10px;
	text-align: center;
	color: #db0067;
}
.text ul{
	margin:70px auto 0;
	width: 960px;
}
.text ul li{
	width:195px;
	height:195px;
	border:3px solid #91e477;
	border-radius: 50%;
	float: left;
	margin-right:5%;
	margin-bottom: 40px;
	position: relative;   /* 父元素定位 */
}
.text ul li img {
 position: absolute;  /* 子元素绝对定位 */
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);/*平移元素，使图像在li元素的正中心*/
}
.text ul li:nth-child(4), .text ul li:nth-child(8) {
 margin-right: 0;
}
.text ul li .tihuan {
 opacity: 0;/*透明度为0，替换图像不可见*/
 transition: all 0.4s ease-in 0.2s;/*设置过渡*/
}
.text ul li:hover .tihuan {
 opacity: 1;/*透明度为1，替换图像完全可见*/
 transform: translate(-50%, -50%) scale(0.75);/*图像缩小为原来的75%*/


}
.text ul li .tu {
 transition: all 0.4s ease-in 0s;
}
.text ul li:hover .tu {/*图像缩小为原来的50%后，不可见*/
 opacity: 0;/*透明度为0，图像不可见*/
 transform: translate(-50%, -50%) scale(0.5);
}
/* text 结束*/
/* footer 开始*/
footer {
 width: 100%;
 height: 400px;
 background: #545861;
 border-bottom: 1px solid #fff;
}
footer .logo {
 width: 1000px;
 height: 100px;
 margin: 0 auto;
 background: url(../img/logo.png) no-repeat center center;
 border-bottom: 1px solid #8c9299;
}
footer .message {
 width: 1000px;
 margin: 20px auto 0;
 color: #fffada;
}
footer .message .left {
 width: 525px;
 float: left;
 padding-left: 30px;
 box-sizing: border-box;
}
footer .message .left li {
 float: left;
 margin-right: 30px;
}
footer .message .left li input {
 width: 215px;
 height: 32px;
 border-radius: 5px;
 margin: 10px 0 15px 0;
 padding-left: 10px;
 box-sizing: border-box;
 border: none;
}
footer .message .left li:last-child input {/*设置按钮的样式*/
 width: 120px;
 height: 39px;
 padding-left: 0;
 border: none;
 background: url(../images/but.jpg) no-repeat;
}
footer .message .right {
 float: left;
}
footer .message .right p {
 margin-bottom: 10px;
}
footer .message .right textarea {
 width: 400px;
 height: 172px;
 padding: 10px;
 box-sizing: border-box;
 resize: none;/*不能调整元素的大小*/
}
/*footer结束*/
/* copyright开始 */
.copyright {
 width: 100%;
 height: 60px;
 background: #333333;
 text-align: center;
}
.copyright a {
 line-height: 60px;
}
/*copyright结束*/

运行结果为

 

 

 

 2、设计登录界面

login.html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link type="text/css" rel="stylesheet"href="css/login.css"/>
	</head>
	<body>
		<header>
			<div class="hleft">
				<a href="index.html">
					<img src="img/logoblue.jpg"alt="" />
				</a>
			</div>
			<div class="hright">
				<a href="index.html">回首页查看商品信息</a>
			</div>
		</header>
		<div id="mainlogin">
		<div class="loginbg">
			<form class="loginf"action=""method="get"autocomplete="on">
				<h2>用户登录</h2>
				<p>
					<input type="text"name="txtUsername"placeholder="邮箱/用户名/手机号" class="name"/>
				</p>
				<p>
					<input type="password"name="txtPwd"pattern="^[a-aA-Z]\w{5,17}$"placeholder="密码"class="pass" />
				</p>
				<p>
					<input type="submit"name="btnlog"value="登录" class="btn"/>
				</p>
				<p class="reg">
					<a href="register.html">用户免费注册</a>
				</p>
			</form>
		</div>
		</div>
		<div class="copyright">
			<a href="#">上海百雀羚日用化学有限公司</a>
		</div>
	</body>
</html>

login.css为

body,h2,p,input{margin:0;padding:0;border:0}
body {	
	font-family:"microsoft yahei" ;
	font-size:14px;
}

a{color:#999;text-decoration: none;}


header {
	width: 1030px;
	height: 70px;
	margin: 0 auto;
}
header .hleft {
	float: left;
	width:128px;
	height: 70px;
}
header .hright {
	float: right;
	height: 70px;
	line-height:70px;
	background: url(../img/inf.jpg) no-repeat left center;
}

header .hright a {
	padding-left: 35px;
}

#mainlogin {
	width: 100%;
	height: 600px;
	background-color: #cfeeee;
}

.loginbg {
	width: 1030px;
	height: 600px;
	background: url(../img/loginbg.jpg);
	margin: 0 auto;
	box-sizing: border-box;
	padding: 140px 0 0 600px;
}

.loginf {/*表单的样式*/	
	width: 300px;
	height: 280px;
	padding: 20px 30px;
	background: #f5f8fd;
	border-radius: 20px;/*设置圆角半径*/	
	border: 1px solid #4faccb;
}
.loginf p{margin-top:20px;}

.name,.pass {/*文本框设置相同的宽高等*/	
	width: 250px;
	height: 24px;
	border: 1px solid #38a1bf;
	border-radius:5px;
	padding: 2px 2px 2px 26px;
}

.name { /*设置第一个文本框的背景*/	
	background: url(../img/1.jpg) no-repeat 5px center #FFF;
}
.pass {/*设置第二个文本框的背景*/	
	background: url(../img/2.jpg) no-repeat 5px center #FFF;
}

.btn {/*设置按钮的样式*/	
	width: 278px;
	height: 40px;
	border: 1px solid #6b5d50;
	border-radius: 3px;
	background: #3bb7ea;
	font-size: 20px;
	color: #FFF;
}
.reg{
	font-size:16px;
}

.copyright {
 width: 100%;
 height: 60px;
 background: #333333;
 text-align: center;
}
.copyright a {
 line-height: 60px;
}

3、注册界面为

register.html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<link rel="stylesheet"type="text/css"href="css/register.css" />
	</head>
	<body>
	<header>
		<div class="hleft">
			<a href="index.html">
				<img src="img/logoblue.jpg"alt="" />
			</a>
		</div>
		<div class="hright">
			<a href="index.html">回首页查看商品信息</a>
		</div>
	</header>
	<div id="mainregister">
		<div class="registerbg">
			<form class="registerf"action=""method="get"autocomplete="on">
				<h2>手机号注册</h2>
				<p>
					<input class="name" type="text"name="txtUsername"pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"placeholder="用户名" />
				</p>
				<p>
					<input class="phone"type="text"name="txtUserphone"pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"placeholder="手机号" />
				</p>
				<p>
					<input class="pnum" type="password" name="txtPwd"placeholder="短信验证码" />
				</p>
				<p>
					<input class="pass" type="password" name="txtPwd"pattern="^[a-zA-Z]\w{5,17}$" placeholder="密码" />
				</p>
				<p>
					<input class="btn" type="submit" name="btnreg" value="注册" />
				</p>
				<p class="log">
					已经有账号？&nbsp;<a href="login.html">直接登录</a>
				</p>
			</form>
		</div>
	</div>
	<div class="copyright">
		<a href="#">上海百雀羚日用品化学有限公司</a>
	</div>
	</body>
</html>

register.css为

body,h2,p,input{margin:0;padding:0;border:0}
body {	
	font-family:"microsoft yahei" ;
	font-size:14px;
}
a{color:#999;text-decoration: none;}
header {
	width: 1030px;
	height: 70px;
	margin: 0 auto;
}
header .hleft {
	float: left;
	width:128px;
	height: 70px;
}
header .hright {
	float: right;
	height: 70px;
	line-height:70px;
	background: url(../img/inf.jpg) no-repeat left center;
}

header .hright a {
	padding-left: 35px;
}

#mainregister{
	width: 100%;
	height: 600px;
	background-color: #ddf0ea;
}
.registerbg{
	width: 1030px;
	height: 600px;
	background:url(../img/registerbg.jpg);
	margin: 0 auto;	
	box-sizing: border-box;
	padding:140px 0 0 600px;
}
.registerf{/*表单的样式*/
	width: 300px;
	height: 360px;
	padding: 0px 30px;
	background: #f5f8fd;
	border-radius: 20px;/*设置圆角半径*/
	border: 1px solid #4faccb;
	padding-top:15px;
}
.registerf p{margin-top:20px;}

.name,.phone,.pnum,.pass{/*文本框设置相同的宽高等*/
	width: 250px;
	height: 24px;
	border: 1px solid #38a1bf;
	border-radius:3px;
	padding: 2px 2px 2px 26px;
}
.name {/*设置第一个文本框的背景*/
	background: url(../img/1.jpg) no-repeat 5px center #FFF;
}
.phone{background: url(../img/phone.jpg) no-repeat 5px center #FFF;}
.pnum{background: url(../img/eml.jpg) no-repeat 5px center #FFF;}
.pass {/*设置第二个文本框的背景*/
	background: url(../img/2.jpg) no-repeat 5px center #FFF;
}
.btn {/*设置按钮的样式*/
	width: 278px;
	height: 40px;
	border: 1px solid #6b5d50;
	border-radius: 3px;
	background: #3bb7ea;
	font-size: 20px;
	color: white;
}
.log {color: #666;}
.log a{color: #236e8c;}
.copyright {
 width: 100%;
 height: 60px;
 background: #333333;
 text-align: center;
}
.copyright a {
 line-height: 60px;
}

创建的文件夹，如图

音频，与视频全部放在img中。

导入下面iconfont文件

其中icofont.css为

@font-face {
  font-family: "iconfont"; /* Project id 2736631 */
  src: url('iconfont.woff2?t=1628649280251') format('woff2'),
       url('iconfont.woff?t=1628649280251') format('woff'),
       url('iconfont.ttf?t=1628649280251') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-aixin:before {
  content: "\e83f";
}

.icon-yinle:before {
  content: "\e62e";
}

.icon-youjian:before {
  content: "\e635";
}

.icon-gouwuche:before {
  content: "\e636";
}


http://www.kler.cn/a/409401.html

相关文章：

  • MyBatis基本使用
  • MongoDB比较查询操作符中英对照表及实例详解
  • Linux网络——网络层
  • 区块链讲解
  • node.js中实现router模块化管理
  • linux入门——“僵尸进程、孤儿进程”
  • C++11: STL之bind
  • 【MySQL】sql注入相关内容
  • 【开源风云】从若依系列脚手架汲取编程之道(八)
  • C#里怎么样使用正则表达式？
  • 动态规划—课堂笔记=＞背包问题（2）
  • 东胜物流软件 GetDataListCA SQL注入漏洞复现
  • Laravel对接SLS日志服务
  • 如何快速将Excel数据导入到SQL Server数据库
  • 界面控件DevExpress WPF中文教程：网格视图数据布局的列和卡片字段
  • C++中定义类型名的方法
  • 【Golang】——Gin 框架与数据库集成详解
  • Python的tkinter如何把日志弄进文本框（Text）
  • 大事件管理系统项目总结（上）
  • 【Vscode】不同系统快捷键
  • 论防火墙对网络安全的重要性
  • 【大数据学习 | Spark-Core】Spark提交及运行流程
  • Oracle 执行计划查看方法汇总及优劣对比
  • 信息收集ip测活-Python脚本编写
  • Java零拷贝一步曲——Linux 中的零拷贝技术
  • C++ Qt 识别U盘/串口