关于BS响应式的网站建设

时间:2022-09-26 14:20:27

一、首先是导航

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" alt="">
</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;
}

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

关于BS响应式的网站建设的更多相关文章

  1. Kickoff - 创造可扩展的,响应式的网站

    Kickoff 是一个轻量级的前端框架,用于创建可扩展的,响应式的网站.作为前端开发人员,我们工作的类型越来越多样化.Kickoff 旨在帮助您在所有项目保持一致的结构和风格,无需添加其他框架. 在线 ...

  2. 响应式web网站设计制作方法

    在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论.总结下来,响应式比之前想象的要复杂得多.1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式 ...

  3. 2015年15&plus;最佳的响应式HTML5网站模板

    015年最好的免费响应式HTML5模板通常用于创建新潮的网站. HTML5是HTML用于创建现代化网站的最新版本.随着这一现代标记语言的出现,网上冲浪的趋势变得越来越智能化越来越酷.几乎每个web开发 ...

  4. 网站响应式布局&sol;网站自适应问题&plus;rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  5. java自适应响应式 企业网站源码 SSM freemaker生成静态化 手机 平板 PC springmvc

    java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持两套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用 ...

  6. java自适应响应式 企业网站源码 SSM 生成静态化 手机 平板 PC

    java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成ht ...

  7. 响应式Asp&period;net MVC企业网站源码

    最近时间充裕,自己写了一个响应式MVC企业网站系统,用于回顾自己的MVC知识.网站源码后台和前台都采用响应式布局,可以适应不同的屏幕. 一.源码描述 响应式企业网站系统,前台和后台都采用了响应式布局, ...

  8. html5教程 《实用技巧》—让你的网站变成响应式的3个简单步骤

    如今,一个网站只在桌面屏幕上好看是远远不够的,同时也要在平板电脑和智能手机中能够良好呈现.响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化.在这篇文章中,我将向您展示如何通过3个简单 ...

  9. IT兄弟连 HTML5教程 响应式网站的内容设计

    基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容. 1  响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备.我们需要在 ...

随机推荐

  1. 配置文件的生成,关于&OpenCurlyDoubleQuote;make menuconfig”

    之前学习嵌入式的时候从来没有注意过内核源文件下配置文件的生成(都是跟着老师的步骤直接复制过来修改成.config),其实意思也差不多,只是我没有细想其所以然: 编译内核的过程中,配置文件生成过程,A. ...

  2. cacti监控apache和nginx的配置

    一.监控apache1.下载http://forums.cacti.net/about25227.html&highlight=apachestats2.其中的ss_apache_stats. ...

  3. QQLogin

    import java.awt.*; import javax.swing.*; public class QQLogin extends JFrame{ QQLogin(){ this.setSiz ...

  4. &lbrack;原创&rsqb; IIS7下*域名301跳转到WWW域名

    百度搜索了众多方法,居然没有一个全面的IIS7下301域名跳转能用的教程,最终自己研究出了个可以用的供大家参考.1.绑定域名01ruodian.cn www.01ruodian.cn到空间: 2.在I ...

  5. QQ&sol;微信中被禁止访问的网页怎么打开

    为什么关心这种技术?因为我经常听到身边搞微商.搞微信项目的朋友都在叫苦连天,由于微信域名屏蔽.微信域名被拦截.弄得他们尸横遍野,损失的连过年回家的路费都没了,曾经的叱咤风云一下变成了今日的倒亏损.腾讯 ...

  6. idea 关闭代码自动折叠,形参提示,行数栏图标,启动不默认打开上次的项目

    1,代码自动折叠 1.1,File > setting > Editor > General > Code Folding 1.2,勾选右侧不想要折叠的代码部分 2,形参提示 ...

  7. Sql Server 2016 Always On集群搭建

    第一步,配置好windows环境 第二步 (配置内容较多--需单写) 需要做windows集群 安装WSFC集群组件 直接在Windows服务器管理工具中,增加功能模块,集群故障转移模块 并增加节点 ...

  8. 探索Java8:&lpar;三&rpar;Predicate接口的使用

    上一篇学习了下Function接口的使用,本篇我们学习下另一个实用的函数式接口Predicate. Predicate的源码跟Function的很像,我们可以对比这两个来分析下.直接上Predicat ...

  9. shell学习1---基本的shell命令

    基本脚本 反引号: ``  反引号里面的内容是命令行,通过反引号用户可以将shell命令的输出赋给变量,比如: test=`date +%y%m%d` echo "The time is : ...

  10. 【UOJ Round &num;8】

    A 一道不错的题,虽然大家都觉得是水题,然而蒟蒻我想出来的好慢……Orz alpq 发现其实就是一个网格图,每一个大块都是同一颜色……横纵坐标互不干扰…… //UOJ Round #8 A #incl ...