12-13前端

105 阅读1分钟
主页
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#home">首页</a>
            </li>
            <li>
                <a href="#bbs">论坛</a>
            </li>
            <li>
                <a href="#web">前端开发</a>
            </li>
            <li>
                <a href="#new">最新课程</a>
            </li>
            <li>
                <a href="#app">移动APP</a>
            </li>
            <li>
                <a href="#about">联系我们</a>
            </li>
        </ul>
    </div>
</div>

bootstrap实战课程等你来战!

本套课程适用于:1.WEB开发人员;2.网站维护人员、管理人员

培训技能的目标:使用bootstrap框架快速构建响应式网页,颠覆传统WEB前端!

Android开发

Android开发技术交流、问题求助、实战案例分享

Android开发

Android开发技术交流、问题求助、实战案例分享

Android开发

Android开发技术交流、问题求助、实战案例分享

HTML5前端开发

一线资深前端开发工程师倾情打造!助你完成普通程序员到优秀工程师的华丽升级!

使用HTML5与CSS3技术轻松实现设备自适应展示。

清晰明了的语义代码结构,更高的可读性、更利于页面维护的。

代码样式:

.navbar { background-color: #fff;

.navbar-brand {
    font-size: 30px;
    font-weight: bold;
    color: #40d2b1;
    height: 70px;
    line-height: 35px;
}
.navbar-nav > li > a {
    font-size: 16px;
    line-height: 35px;
    height: 70px;
    font-weight: bold;
    color: #333;
}
.navbar-toggle {
    margin-top: 17px;

    &:focus,
    &:hover {
        border-color: #40d2b1;
        background-color: rgb(69, 210, 184);
    }
    .icon-bar {
        background-color: #1c9982;
    }
}

}

#home { background-image: url(../img/home-bg.jpg); background-size: cover; color: #fff; margin-top: -20px; // height: 600px;

.lvjing {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
h1 {
    font-weight: bolder;
    margin-top: 100px;
}
p {
    margin: 20px 0px;
}
img {
    margin: 30px;
    margin-bottom: 50px;
    display: inline-block;
}

}

#bbs { padding: 80px 0; background-color: #fff;

.col-md-4 {
    padding: 15px;
    text-align: center;

    &:hover {
        background: #f1f1f1;
        box-shadow: 1px 1px 4px #ccc;
    }
    img {
        display: inline-block;
    }
}

} #web { background-color: #f1f1f1; padding: 80px 0;

h1{
    font-weight: bolder;

}
span{
    width: 36px;
    height: 36px;
    display: inline-block;
    background-color: #40d2b1;
    border-radius: 50%;
    color: #fff;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 15px;
}

}