CSS学习18之小试牛刀

最新推荐文章于 2024-05-19 17:34:30 发布

小黑神zxs

最新推荐文章于 2024-05-19 17:34:30 发布

阅读量401

点赞数 1

分类专栏： CSS3详解文章标签： css3 html 前端小练习

本文链接：https://blog.csdn.net/zxs1002/article/details/123642794

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

小试牛刀

到现在为止，我们已经将css要学习的初级中级高级知识都已经学完了，接下来我们就应该对自己做一个小测验了，以下就是我的小测验，模拟qq会员官网的头部栏！

素材

bg.png背景图
在这里插入图片描述
logo.png 企鹅logo图

qqvip官网头部栏示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qq会员官网头部栏</title>
    <style>
        body,a,div{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        body{
            background-image: url("images/bg.png");
            background-repeat: no-repeat;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #app{
            position: relative;
            width: 100%;
            height: 150px;
            background: #282424;
            overflow: hidden;
        }
        #logo{
            position: fixed;
            display: inline-block;
            float: left;
        }
        #login{
            position: relative;
            display: inline-block;
            right: -400px;
            top: 60px;
            border: 2px yellow solid;
            border-radius: 45px;
        }
        #login a{
            text-align: center;
            font: 20px bold;
            line-height: 40px;
            display: inline-block;
            width: 80px;
            height: 40px;
            color: yellow;
        }
        #login:hover{
            background: #939331;
        }
        #register{
            position: relative;
            display: inline-block;
            border: 2px yellow solid;
            border-radius: 45px;
            right: -450px;
            top: 60px;
            background: #939331;
        }
        #register a{
            text-align: center;
            font: 20px bold;
            line-height: 40px;
            display: inline-block;
            width: 200px;
            height: 40px;
            color: yellow;
        }
        #list{
            position: relative;
            display: inline-block;
            width: 600px;
            height: 50px;
            left: 400px;
            top: 60px;
        }
        #list a{
            text-align: center;
            font: 14px bold;
            line-height: 50px;
            display: inline-block;
            width: 90px;
            height: 50px;
            color: white;
        }
        #list a:hover{
            color: red;
        }
    </style>
</head>
<body>

<div id="app">
    <div id="logo">
        <img src="images/qqviplogo.png" alt="vip">
    </div>
    <div id="list">
            <a href="">靓号站&emsp;</a>
            <a href="">功能特权&emsp;</a>
            <a href="">游戏特权&emsp;</a>
            <a href="">成长体系&emsp;</a>
            <a href="">年费专区&emsp;</a>
            <a href="">免流量特权&emsp;</a>
    </div>
    <div id="login">
        <a href="#">登录</a>
    </div>
    <div id="register">
        <a href="">开通超级会员</a>
    </div>
</div>

</body>
</html>

效果

在这里插入图片描述

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习18之小试牛刀

小试牛刀到现在为止，我们已经将css要学习的初级中级高级知识都已经学完了，接下来我们就应该对自己做一个小测验了，以下就是我的小测验，模拟qq会员官网的头部栏！素材bg.png背景图logo.png 企鹅logo图qqvip官网头部栏示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>qq会员官网头部栏</tit
复制链接

扫一扫