View HTML
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
} .nav li {
display: inline;
} .jumbotron {
background-image:url('http://www.fuccha.in/wp-content/uploads/2014/01/small-workplace-with-apple-gadgets.jpg');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
} .jumbotron .container {
position: relative;
top:100px;
} .jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
} .jumbotron p {
font-size: 20px;
color: #fff;
} .learn-more {
background-color: #f7f7f7;
} .learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
} .learn-more a {
color: #00b0ff;
} .neighborhood-guides{
background-color:#efefef;
border-bottom:1px solid #dbdbdb;
} .neighborhood-guides h2{
color:#393c3d;
font-size:24px;
} .neighborhood-guides p{
font-size:15px;
margin-bottom:13px;
}

View main.css

+bootstrap的css文件:http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css

网页放置在:http://codepen.io/Gabyler/full/pyeRma/

网页分为个部分:

  • Navigation bar
  • Jumbotron
  • Neighborhood-guides
  • Learn-more

Navigation Bar

在main.css里,将li的display属性改成inline,使得两个ul item排成两排

后在两个ul首标签分别写class="pull-left" class="pull-right",使得他们排成一排

Jumbotron

在main.css的.jmbotron中设置背景图片在background-size:cover 表示足够大到覆盖整个背景区域(一张图横跨一块屏幕的水平区域)

main.css 中 .jumbotron .container里面的表示相对他应该在的位置向下移动50px(position:relative)

Neighborhood-guide

<div class="row">里面放三个<div class="col-md-4">,再在每个col里放<div class="thumbnail">放图片

thumbnail的存在,是专门用于网格放图片的

选择图片时,大小通常一致,如果一个放两个图片的位置要放一张,最好高度得选成2倍多30px

Learn-more

用了12网格

借助bootstrap框架模仿airbnb写的网页的更多相关文章

  1. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  2. 手写网站服务器~用Python手动实现一个简单的服务器,不借助任何框架在浏览器中输出任意内容

    写在前面的一些P话: 在公司网站开发中,我们往往借助于Flask.Django等网站开发框架去提高网站开发效率.那么在面试后端开发工程师的时候,面试官可能就会问到网站开发的底层原理是什么? 我们不止仅 ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. Bootstrap框架中的字形图标的理解

    最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...

  5. 移动Web学习笔记(第1天)-bootstrap框架的使用

    移动web前言 移动web : 移动端手机浏览器或者微信里面浏览的网页 移动APP : 手机上需要下载安装的应用程序 1. 移动web介绍 1.1 3 天 响应式开发 一套代码运行多个终端 优点:开发 ...

  6. Bootstrap框架 inconfont font-awesome

    Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...

  7. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

  8. .NET MVC 学习笔记(二)— Bootstrap框架

    二..NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...

  9. 响应式开发(二)-----Bootstrap框架的介绍

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...

随机推荐

  1. 一个Java项目的学习

    1. java命令行的启动 首先是gradle build 其次是:java -Dabc.appid=1234 -classpath "a.jar:b.jar"  com.ctri ...

  2. MYSQL 插入二进制数的 2 种方法。

    方法 1.insert into TableName set column =''; 方法 2.insert into TableName .... values(.....); ---------- ...

  3. MYSQL 加密的 3 类方法

    背景: 若你想要储存一些由可能包含任意字节值的加密函数返回的结果,使用BLOB列而不是 CHAR 或VARCHAR 列,从而避免由于结尾空格的删除而改变一些数据值的潜在问题. 这一句话来自官方文件,记 ...

  4. android TextView 垂直滚动 用动画实现

    项目中需要让TextView 滚动一会显示一行一会显示一行 想了下用移动动画实现.但是实际中在整这个动画时调了好久.主要用到的动画方式是移动动画:TranslateAnimation 代码: PS: ...

  5. JVM 看不到某些异常的stacktrace问题(转)

    在java 1.5的release notes里面可以看到这样一句话: The compiler in the server VM now provides correct stack backtra ...

  6. Boost程序库完全开发指南——深入C++“准”标准库(第3版)

    内容简介  · · · · · · Boost 是一个功能强大.构造精巧.跨平台.开源并且完全免费的C++程序库,有着“C++‘准’标准库”的美誉. Boost 由C++标准委员会部分成员所设立的Bo ...

  7. BMP彩色转成黑色二值图

    一天半把彩色bmp转成黑白了. 原理是: 第一步:读出位图数据的偏移位置:即第11个字节,用fseek即可. 然后将偏移位置之前的数据全部写入新的bmp图中. 第二步:用fseek移到位图数据这前,判 ...

  8. linux脚本实例之while

    写一个脚本,执行后,打印一行提示“Please input a number:",要求用户输入数值,然后打印出该数 值,然后再次要求用户输入数值.直到用户输入"end"停 ...

  9. C语言运算符的优先级

    熟悉C语言的同学都知道,C语言众多的运算符及繁琐难记的优先级总是搞得我们这些C初学者头大.那么本文就 对C语言中所有的运算符进行汇总,并对其优先级进行一定的介绍. 这里虽然对所有C运算符的优先级进行了 ...

  10. HDOJ-1003 Max Sum(最大连续子段 动态规划)

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 给出一个包含n个数字的序列{a1,a2,..,ai,..,an},-1000<=ai<=100 ...