关于BS响应式的网站建设

Posted 2020-07-30 夏小夏吖

一、首先是导航

html部分：

<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--小屏幕导航按钮和logo -->
<div class="navbar-header">
<a href="index.html" class="navbar-brand">茄子融媒</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>
<!--小屏幕导航按钮和logo -->

<!-- 大屏幕显示导航 -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首页</a></li>
<li><a href="index.html">论坛</a></li>
<li><a href="index.html">前端开发</a></li>
<li><a href="index.html">最新课程</a></li>
<li><a href="index.html">移动APP</a></li>
<li><a href="index.html">联系我们</a></li>
</ul>
</div>
<!-- 大屏幕显示 导航 -->
</div>
</nav>

css部分：

/* 导航 */
.navbar-default .navbar-brand{
font-size: 30px;
font-weight: bold;
color: #40d2b1;
height: 70px;
line-height: 35px;
}
.navbar-default .navbar-nav>li>a{
font-size: 16px;
font-weight: bold;
color: #666;
height: 70px;
line-height: 35px;
}
.navbar-toggle{
margin-top: 17px;
}
.navbar-defult .navbar-toggle:hover{
border-color: #40d2b1;
background-color: rgba(69,210,184);
}
.nvabar-default .navbar-toggle .icon-bar{
background-color: #1c9982
}

<!-- 导航 -->

二、关于建设响应式网站的知识点：

1.container 是建设响应式布局的重要元素，一般结构为：

<div class="container">

<div class="row"></div>

</div>

2.img图片响应式的一个条件是必须加一个名为img-responsive的class:

<img src="img/0.jpg" class="img-responsive">

如果banner只有一张图，而不轮播的话，可以这样写html:

<!-- home -->
<section id="home">
<!-- 滤镜层 -->
<div class="lvjing">
<div class="container">
<div class="row">
<div class="1"></div>
<div align="center" class="10">
<h1>郑东新区最大的线上营销专家！</h1>
<p>本课程适用于：1.WEB开发人员、管理要员</br>
培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！
</p>
<img src="../assets/img/php.jpg" class="img-responsive" >
</div>
<div class="1"></div>
</div>
</div>
</div>
<!-- 滤镜层 -->
</section>

css样式：

/* Home */
#home{
background:url(../img/home-bg.jpg);
background-size: cover;
margin-top: 70px;
color:#fff;
text-align: center;
width: 100%;
}
.lvjing{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
padding: 90px 0;
}
#home h1{
font-weight: bold;
padding-bottom: 20px;
}
#home p{
font-weight: bold;
line-height: 35px;
}
#img{
margin-top: 30px;
display: inline-block;
}

这其中包括了一个滤镜的知识点。