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

最新推荐文章于 2024-06-10 17:18:33 发布
最新推荐文章于 2024-06-10 17:18:33 发布
阅读量9.8k 收藏 97
点赞数 16
文章标签： 1024程序员节 html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49266584/article/details/120939957
版权

模仿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="body-img">-->
<!--        <img src="../img/body.png">-->
<!--    </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;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

努力的耿耿努力
关注
  • 16
    点赞
  • 踩
  • 97
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
HTML+CSS写一个简单的网页界面
qq_47560372的博客
08-04 3350
学习了HTML和CSS入门的基本命令后，写出来一个简单的登录网页界面，可以跳转、登录。
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
m0_67403272的博客
07-31 2771
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。时隔三年我把之前给我妹写的毕业论文的网站页面写出来一下哈供各位小伙伴参考参考哈不接受批评反驳哈哈哈哈哈哈哈都是我自己胡乱搭的图片和文字可自行更改，按照自己的审美喜好来哈！以上就是全部代码啦！直接复制代码然后替换一下图片就好啦！css样式和form共用的。...
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
最新发布
weixin_42283461的博客
06-10 1257
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
HTML网页设计
08-10 2251
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设......
2021年大一下网页期末作业（纯html+css实现）
008
07-20 2万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 这是我大一下学期的期末作业。发上来给大家参考参考，布局写得比较乱，望大家多给建议。这个网页作业做了首页、相册、视频、文字、关于五个子页面，每个子页面都单独写了一个css。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Css源代码 【首页】 .content { width:100%; }
课程作业基于CSS+HTML的个人静态网页源码.zip
10-12
课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态...
课程作业-基于HTML+CSS的京东静态网页源码.tar
11-16
课程作业-基于HTML+CSS的京东静态网页源码.tar课程作业-基于HTML+CSS的京东静态网页源码.tar课程作业-基于HTML+CSS的京东静态网页源码.tar课程作业-基于HTML+CSS的京东静态网页源码.tar课程作业-基于HTML+CSS的京东...
基于html和css搭建的一个教育题材静态网源码(课程作业).zip
12-15
基于html和css搭建的一个教育题材静态网源码(课程作业).zip基于html和css搭建的一个教育题材静态网源码(课程作业).zip基于html和css搭建的一个教育题材静态网源码(课程作业).zip基于html和css搭建的一个教育题材静态...
基于HTML+CSS的世界杯静态网页(期末大作业).zip
07-07
基于HTML+CSS的世界杯静态网页(期末大作业).zip 【资源介绍】 这是一个以世界杯为主题的静态网页，是我和好友在大一下学期，一起做的 HTML+CSS 期末作品。因为世界杯刚好在期末期间举办，所以以此为项目主题。这是...
课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip
07-07
课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 课程作业-基于Html+Css+JavaScript的英雄联盟官网静态页面.zip 【资源介绍】 该项目是...
大学生网页作业 静态网页
12-21
大学生网页作业 静态网页 适合交作业的
静态网页作业个人网站
12-10
div+css制作的个人网站，绝对超值。淘宝价值30
HTML+CSS大学生作业作品练习
m0_63780299的博客
01-30 746
一个普通的HTML+CSS静态旅游网站代码
HTML+CSS编写静态网站-30 课后作业06
编辑编辑器
07-09 647
视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015 下载：http://pan.baidu.com/s/1c1HS3Dm 更多精彩内容尽在视频中！ 本文固定链接：http://www.oxox.work/web/html-css/homework06/ | 虚幻大学查看原文：http://
用HTML+CSS+JS搭建一个超简单的静态实用网站页面
xy_9999的博客
02-20 5312
静态页面，背景颜色渐变效果，文字动效，响应式布局，页面返回顶部
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
HTML5+CSS大作业——班级网页设计(5页)
11-30 9249
HTML5+CSS大作业——班级网页设计(5页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTML期
3个html和css静态网页作业
05-18
很抱歉，作为一个AI语言模型，我无法提供您的作业。但是，我可以向您推荐一些资源来学习HTML和CSS并练习创建静态网页。 1. W3Schools - 这是一个非常受欢迎的网站，提供大量的HTML和CSS教程和实例，可以帮助您快速...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值