CSS练习

最新推荐文章于 2023-07-10 21:31:33 发布

且-听风吟.

最新推荐文章于 2023-07-10 21:31:33 发布

阅读量188

点赞数

分类专栏： HTML 文章标签： css html

本文链接：https://blog.csdn.net/qq_45468597/article/details/114952157

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS练习之QQ空间的导航栏
原本的QQ会员的导航栏是这样的：
在这里插入图片描述这是模拟效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员导航栏</title>
    <link rel="stylesheet" href="demostyle.css">
</head>
<body>
<div class="daohang">
    <!-- 头部-->
    <header class="nav-head">
        <!-- 头部容器-->
        <div class="head-container">
            <a href="#" class="top-logo"> <img src="img.png" width="145" height="90"></a>
            <nav class="top-nav">
                <ul>
                    <li><a>靓号站</a></li>
                    <li><a>功能特权</a></li>
                    <li><a>游戏特权</a></li>
                    <li><a>装扮特权</a></li>
                    <li><a>成长体系</a></li>
                    <li><a>年费专区</a></li>
                    <li><a>免流量特权</a></li>
                </ul>
            </nav>
            <div class="top-right">
                <a>登录</a>
                <a>开通会员</a>
            </div>
        </div>
    </header>
</div>

</body>
</html>

css文件美化：

/*margin:0;表示外边距为0
padding:0;表示内边距为0
border:0;表示边框为0
*/
*{
    padding: 0;
    margin: 0;
}
/*在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。
none即为默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
*/
a{
    text-decoration: none;
}
/* 设置头部
   高度、宽度、背景
   得到一个黑灰色的长条，占比100%
*/
.nav-head{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.6);
}
/* 设置头部容器
margin: 0 auto , 用于标签居中，
text-align: center， 用于文本（text）居中
*/
.head-container{
    width: 1180px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
}
/*

display：inline-block 将元素显示为行块形式。
vertical-align这个是设置元素的垂直排列的.
用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.
top就是垂直对齐文本的顶部 。

*/
.top-logo,.top-nav,.top-nav li,.top-right{
    height: 90px;
    display: inline-block;
    vertical-align: top;
}
/*
margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
*/
.top-nav{
    margin: 0 48px;
}
/*
line-height是行高，也可以定义行间距
*/
.top-nav li{
    line-height: 90px;
    width: 90px;
}
/*
设置li标签中的a标签
display: block;此元素将显示为块级元素，此元素前后会带有换行符。
text-align: center;字体居中
*/
.top-nav li a{
    display: block;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
/*
当鼠标点击到top-nav中的a标签时，字体颜色变为红色，*/
.top-nav li a:hover{
    color: red;
}
/*
border-radius: 35px;圆角制作
*/

.top-right a{
    display: inline-block;
    font-size: 16px;
    text-align: center;
    margin-top: 25px;
    border-radius: 35px;
    color: #fff;
}
/*
登录按钮：

*/
.top-right a:first-of-type{
    width: 93px;
    height: 38px;
    line-height: 38px;
    color: yellow;
    border: 1px yellow solid;
}
/*
鼠标点击到按钮时字体和背景会变颜色
*/
.top-right a:first-of-type:hover{
    color: #986b0d;
    background: chocolate;
}

.top-right a:last-of-type{
    width: 140px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    color: yellow;
    border: 1px yellow solid;
    background: chocolate;
}
.top-right a:last-of-type:hover{
    background: orange;
}

试试吧

且-听风吟.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS练习

CSS练习之QQ空间的导航栏原本的QQ会员的导航栏是这样的：这是模拟效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>QQ会员导航栏</title> <link rel="stylesheet" href="demostyle.css"></head><body>&lt
复制链接

扫一扫