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>>洁面</li><li>>爽肤水</li><li>>精华</li><li>>乳液</li><li class="con">身体护理</li><li>>润肤</li><li>>沐浴露</li><li>>护手霜</li><li class="con">男士专区</li><li>>爽肤水</li><li>>洁面</li><li>>面霜</li><li>>精华</li></ol><ol class="you"><li class="con">套装/礼盒</li><li>>补水保湿套装</li><li>>淡纹四件套</li><li>>护肤套装</li><li class="con">热门搜素</li><li>>洁面奶</li><li>>爽肤水</li><li>>精华</li><li>>面霜</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"></i></a><a href="#"><i class="iconfont"></i></a><a href="#"><i class="iconfont"></i></a><a href="#"><i class="iconfont"></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">已经有账号? <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";
}