定位体系相关练习

HTML代码

首页 易牛课程 易牛班级 易牛资讯 话题小组 登录 注册

返回顶部

我是管理员

用户管理

课程管理

我是学生

如何注册

购买课程

联系我们

关于我们

联系我们

商业应用

商务合作

内容招募

系统帮助

购买课程

作业提交

css代码

/*对导航栏整体增加样式*/
header
{
    height: 50px;
    background-color:#534141 ;
    padding: 0 30px;
    overflow: hidden;
    line-height:50px;
}
/*每一个导航增加样式*/
header>nav>a
{
    font-size: 16px;
    color: #e6e6e6;
    padding: 17px;
}
/*导航悬停时设置颜色*/
nav>a:hover
{
    color: #ffffff;
    background-color: #e12929;
}
/*前五个导航左浮动*/
nav:first-child
{
    float: left;
}
/*后两个导航右浮动*/
nav:last-child
{
    float:right;
}
/*对中间区域增加框*/
article
{
    margin: 30px auto;
    background-color: #f1e4e4;
    height: auto;
    width: 710px;
    overflow: hidden;
}
/*中间区域增加顶部黑色长条*/
article>aside:not(:last-child)
{
    margin:30px 30px 0 30px;
    background-color: #645858;
    height: 60px;
}
/*中间区域section部分增加外边距*/
article>section
{
    margin:50px 30px;
    overflow: hidden;
}
/*中间区域增加七个方块*/
article>section>p
{
    width: 100px;
    height: 100px;
    margin: 15px;
    float: left;
    background-color: #e58282;
}
/*中间区域增加底部黑色长条*/
article>aside:last-child
{
    margin:0 30px 30px 30px;
    background-color: #645858;
    height: 60px;
}
/*对脚注增加样式*/
footer
{
    height: 200px;
    background-color: #2a2a2a;
}
/*脚注每个div区域左浮动*/
footer>div
{
    margin:50px 0 50px 50px;
    float:left;
    line-height: 2;
}
/*脚注中的字体以及颜色的样式*/
footer>div>p:first-child
 {
     font-size: 16px;
     color: #ffffff;
 }
footer>div>p>a:not(first-child)
{
    font-size: 14px;
    color: #e6e6e6;
}

/*导航固定位置*/
header
{
    position: fixed;
    top:0;
    width: 100%;
    box-sizing: border-box;
}
article
{
    margin-top: 80px;
}
/*对返回顶部增加样式*/
body>aside>a
{
    width: 50px;
    height: 50px;
    position:fixed;
    right: 50px;
    bottom: 100px;
}