基于html加css做一个静态网页作业_m0_49266584_html和css静态网页制作

网络 02-07 1479

模仿QQ会员官网先上图：新手写的不太好，二级子菜单啥的都有，拿去交作业应该可以。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VIP</title> <link rel="stylesheet" href="../css/QQVIP.css"> <style type="text/css"> .box{ width: 100%; background:rgba(0,0,0,0.5); height: 90px; justify-content:center; display: flex; } .box>div{ font-size: 16px; line-height: 90px; padding-left: 20px; color: white; } .box>div a{ color: #FFFFFF; } .box>div:nth-child(8){ border: 1px solid #fbd74f; margin-left: 5px; padding: 0; width: 100px; text-align: center; border-radius: 20px; height: 40px; line-height: 40px; align-self:center; color: #fbd74f; } .box>div:nth-child(9){ margin-left: 5px; padding: 0; width: 150px; text-align: center; background-color: #fbd74f; border-radius: 20px; height: 42px; line-height: 42px; align-self:center; color: #b0872a; } .box>div a:hover{ color: red; } .box>div:nth-child(8):hover{ border: 1px solid #ffe78b; background-color: #ffe78b; cursor: pointer; color: #b0872a; } .box>div:nth-child(9):hover{ background-color: #ffe78b; cursor: pointer; } .banner{ width: 100%; margin: 50px 0 10px 0 ; } .banner::after{ content: " "; height: 0; display: block; clear: both; zoom: 1; } .banner>div{ float: left; } div.banner-wrap{ width: 80%; overflow: hidden; } .banner-item>img{ width: 900px; height: 410px; vertical-align: top; } .banner-item{ width: 1800px; /* margin-left: -2100px; */ animation: interval 8s ease 1s infinite ; } @keyframes interval{ 0%{ margin-left: 0; } 100%{ margin-left: -1000px; } } </style> </head> <body> <div class="box"> <img src="../img/logo.png"> <div><a href="">靓号站</a></div> <div><a href="">功能特权</a></div> <div><a href="">游戏特权</a></div> <div><a href="">成长体系</a></div> <div><a href="">年费专区</a></div> <div><a href="">免流量特权</a></div> <div > 登录 </div> <div>开通超级会员</div> </div> <div class="body"> <div class="banner"> <div class="left-img"></div> <div class="banner-wrap"> <div class="banner-item"> <img src="../img/body.png" ><img src="../img/body-2.png" > </div> </div> <div class="right-img"></div> </div>    <div class="clera"></div> <div class="body-dian"></div> <div class="body-dian-2"></div> <div class="buttom"> <ul> <li> <a href=""> <h3>功能特权</h3> <p>超级会员特权王者</p> <div class="buttom-img1"></div> </a> </li> <li> <a href=""> <h3>装扮特权</h3> <p>超级会员我有我风采</p> <div class="buttom-img2"></div> </a> </li> <li> <a href=""> <h3>功能特权</h3> <p>游戏礼包专属福利</p> <div class="buttom-img3"></div> </a> </li> <li> <a href=""> <h3>功能特权</h3> <p>超多优惠福利</p> <div class="buttom-img4"></div> </a> </li> </ul> </div> </div> <div class="footer-bar"> <div class="footer-bar-ie"> <div class="footer-bar-content"> <h2> <img src="../img/footer_bar_logo.png"> </h2> <p class="footer-bar-info">开通超级会员，做特权王者</p> <a href="" class="footer-bar-btn">开通超级会员</a> <span class="link-join">开通QQ会员</span> </div> </div> </div> <div class="ui-footer"> <nav> <ul> <li> <a> <span class="fotter-icon icon-qq"></span> <span>官方手Q账号</span> <div class="qrcode"> <img src="../img/icon-qq.jpg"> </div> </a> </li> <li> <a> <span class="fotter-icon icon-wechat"></span> <span>官方微信账号</span> <div class="qrcode"> <img src="../img/icon-wechat.png"> </div> </a> </li> <li> <a> <span class="fotter-icon icon-qzone"></span> <span>官方空间</span> </a> </li> <li> <a> <span class="fotter-icon icon-weibo"></span> <span>话费开通专区</span> </a> </li> <li> <a> <span class="fotter-icon icon-exchange"></span> <span>兑换中心</span> </a> </li> <li> <a> <span class="fotter-icon icon-service"></span> <span>客服中心</span> </a> </li> </ul> </nav> <p class="ui-footer-copyright"></p> <p class="ui-footer-copyright"></p> </div> </body> </html>

接下来是CSS外部引入：

*{ margin:0 ; padding: 0; } ul li{ list-style: none; } a{ text-decoration: none; } body{ background-image: url("../img/QQ.jpg"); background-size: cover; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; } p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .nav{ width: 100%; background:rgba(0,0,0,0.5); position: fixed; top: 0; } .navbar{ width: 100%; position: relative; } .navbar-wrap{ /*border: 2px solid yellow;*/ width: 66%; margin: 0 auto; } .navbar-wrap::after{ content: ""; height: 0; display: block; clear: both; zoom: 1; } .navbar-wrap li{ /*border: 2px solid pink;*/ float: left; } .navbar-wrap li:last-child{ float: right; } .nav-logo img{ width: 145px; height: 90px; vertical-align: top; } .nav-link{ height: 90px; line-height: 90px; } .nav-link a{ text-decoration: none; color: white; margin-left: 35px; display: inline-block; /*border: 2px solid green;*/ } .nav-btn{ height: 90px; line-height: 90px; } .nav-btn a{ text-decoration: none; padding: 10px 20px; border: 1px solid #FFB800; border-radius: 20px; } .nav-btn-a{ color: #FFB800; } .nav-btn-a:hover{ background-color: #ffe78b; color: #986b0d; } .nav-btn-a1{ background-color: #fbd74f; color: #986b0d; font-weight:bold } .nav-btn-a1:hover{ background-color:#ffe48a; } .nav-link a:hover{ color: red; } .nav-link a:hover .menu{ display: block; } .nav-link a .menu{ position: absolute; width: 100%; left: 0; top:90px; height: 40px; line-height: 40px; background: rgba(0,0,0,0.3); display: none; color: white; } .menu-span{ position: absolute; left: 530px; } .menu-span2{ position: absolute; left: 630px; } .menu-span3{ position: absolute; left: 735px; } .menu-span4{ position: absolute; left: 840px; } .body{ width: 66%; margin: 0 auto; } .left-img{ width: 60px; height: 100px; /*border: 1px solid red;*/ background: url(../img/sprites_index.png) no-repeat -160px -150px; position: relative; left: 0; top: 150px; cursor: pointer; } .body-img img{ width: 800px; height: 406px; margin-left: 50px; float: left; } .right-img{ width: 60px; height: 100px; background: url(../img/sprites_index.png) no-repeat -210px -150px; position: relative; left: 0px; top: 150px; cursor: pointer; } .clera{ clear: both; } .body-dian{ width: 15px; height: 15px; background: url(../img/sprites_index.png) no-repeat -250px -15px; position: absolute; left: 45%; float: left; } .body-dian:hover{ background-position: -250px 0px; } .body-dian-2{ width: 15px; height: 15px; background: url(../img/sprites_index.png) no-repeat -250px -15px; position: absolute; left: 46%; float: left; } .body-dian-2:hover{ background-position: -250px 0; } /* */ .buttom{ width: 1000px; margin-top: 15px; text-align: center; font-size: 0; } .buttom li{ position: relative; z-index: 2; overflow: hidden; text-overflow: ellipsis; font-size: 16px; display: inline-block; margin-right: 20px; background-color: #282730; border-bottom: 5px solid #FAD65C; } .buttom h3{ padding-top: 26px; position: relative; z-index: 2; } .buttom li a{ display: block; height: 230px; font-size: 18px; color: #FFF; background-color: #282730; width: 180px; position: relative; } .buttom div{ } .buttom p{ position: relative; z-index: 2; overflow: hidden; text-overflow: ellipsis; font-size: 16px; margin: 0; } .buttom-img1{ background-image: url("../img/buttom1.png"); display: block; width: 180px; position: absolute; bottom: -10px; left: -17px; transition-duration: 0.2s; /* 整体的一个延时效果*/ /*transition: ease 0.2s; 独立设置延时2S*/ height: 258px; } .buttom-img1:hover{ background-position: 0 -10px; } .buttom-img2{ background-image: url("../img/buttom2.png"); display: block; width: 180px; position: absolute; bottom: -10px; left: -17px; transition: ease 0.2s; height: 258px; } .buttom-img2:hover{ background-position: 0 -10px; } .buttom-img3{ background-image: url("../img/buttom3.png"); display: block; width: 180px; position: absolute; bottom: -10px; left: -17px; transition: ease 0.2s; height: 258px; } .buttom-img3:hover{ background-position: 0 -10px; } .buttom-img4{ background-image: url("../img/buttom4.jpg"); display: block; width: 180px; position: absolute; bottom: -10px; left: -17px; transition: ease 0.2s; height: 258px; } .buttom-img4:hover{ background-position: 0 -10px; } .footer-bar { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: 75px; } .footer-bar-ie { background: rgba(38,36,42,0.9); } .footer-bar-content { width: 1000px; height: 75px; margin: 0 auto; position: relative; } .footer-bar-content h2 { position: absolute; bottom: 0; width: 361px; height: 137px; text-indent: -999px; overflow: hidden; } .footer-bar-content h2 img { position: absolute; bottom: 0; left: 0; width: 300px; border: 0; } .footer-bar .footer-bar-info { padding-left: 330px; border: 0; font-size: 20px; color: #fff; position: relative; display: inline-block; line-height: 40px; } .footer-bar-content .link-join { padding-right: 10px; height: 75px; line-height: 79px; font-size: 18px; color: #ec3833; float: right; cursor: pointer; } .link-join:hover{ color: #d42a34; } .footer-bar .footer-bar-btn { height: 75px; line-height: 75px; font-size: 24px; padding: 0px 68px 0 40px; position: relative; color: #7A4702; background-color: #FAD65C; float: right; } .footer-bar-btn:hover{ background-color: #fee691; } .footer-bar-btn:after { content: ""; width: 19px; height: 34px; position: absolute; top: 50%; right: 40px; margin-top: -17px; transform: scale(0.8); background: url(../img/sprites_index.png) no-repeat -250px -105px; } /* */ .ui-footer{ padding-bottom: 70px; width: 700px; margin: 0 auto; } .ui-footer ul { display: inline-block; margin: 60px auto; } .ui-footer ul li { color: #7e7e7e; font-size: 14px; text-align: center; margin: 0 5px; width: 100px; height: 100px; position: relative; display: inline-block; *display: inline; *zoom: 1; } .ui-footer ul li a { color: #7e7e7e; text-decoration: none; } .ui-footer ul li .icon-qq { background-position: 0 0; } .ui-footer ul li .fotter-icon { display: block; width: 100px; height: 85px; *cursor: pointer; background: url(../img/qqfooter.png) no-repeat; } .ui-footer ul li .icon-wechat { background-position: 0 -100px; } .ui-footer ul li .icon-qzone { background-position: 0 -400px; } .ui-footer ul li .icon-weibo { background-position: 0 -500px; } .ui-footer ul li .icon-exchange { background-position: 0 -200px; } .ui-footer ul li .icon-service { background-position: 0 -600px; } .ui-footer ul li .icon-qq:hover{ background-position: -100px 0; } .ui-footer ul li .icon-wechat:hover{ background-position: -100px -100px; } .ui-footer ul li .icon-qzone:hover{ background-position: -100px -400px; } .ui-footer ul li .icon-weibo:hover{ background-position: -100px -500px; } .ui-footer ul li .icon-exchange:hover{ background-position: -100px -200px; } .ui-footer ul li .icon-service:hover{ background-position: -100px -600px; } .ui-footer ul li a .qrcode { position: absolute; top: -200px; left: -57px; width: 216px; height: 221px; z-index: 99999; display: none; text-align: center; background: url(../img/footer_popup.png) no-repeat 0 0; } .ui-footer ul li a:hover .qrcode{ display: block; } .ui-footer ul li a .qrcode img { width: 170px; height: 170px; margin: 23px 0 0 0; } .ui-footer .ui-footer-copyright { color: #9d9d9d; font-size: 12px; line-height: 1.6em; margin-bottom: 5px; text-align: center; }