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. Ubuntu系统下创建python数据挖掘虚拟环境

    虚拟环境:   虚拟环境是用于创建独立的python环境,允许我们使用不同的python模块和版本,而不混淆.   让我们了解一下产品研发过程中虚拟环境的必要性,在python项目中,显然经常要使用不 ...

  2. 【关于360极速浏览器的xx极速模式自动切换到兼容模式】

    原理上是可以的. 1  360基于Chromium 开源浏览器内核,它本身就是一个壳子.. 2  7.0之后的极速浏览器,不支持 它官方的那个声明标记.<meta name=”renderer” ...

  3. mysql 开启事务

    START TRANSACTION, COMMIT, and ROLLBACK Syntax 开始事务,提交和回滚语法 那些语句提供了控制事务的使用: 1.START TRANSACTION 或者BE ...

  4. Java缓存

    Java中要用到缓存的地方很多,首当其冲的就是持久层缓存,针对持久层谈一下: 要实现java缓存有很多种方式,最简单的无非就是static HashMap,这个显然是基于内存缓存,一个map就可以搞定 ...

  5. Codeforces #344 Div.2

    Codeforces #344 Div.2 Interview 题目描述:求两个序列的子序列或操作的和的最大值 solution 签到题 时间复杂度:\(O(n^2)\) Print Check 题目 ...

  6. 不是技术牛人,如何拿到国内IT巨头的Offer

    原地址:http://blog.csdn.net/lsldd/article/details/13506263 不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些 ...

  7. firefox必备扩展

    1.首先,当然要推荐 Adblock Plus 安装地址:https://adblockplus.org/zh_CN/firefox 作用:屏蔽广告,从此和该死的广告说拜拜吧(不论是百度推广,还是别的 ...

  8. 打印 上一主题 下一主题 利用cURL实现单个文件分多段同时下载,支持断点续传(修订版)

      利用cURL实现单个文件分多段同时下载,支持断点续传(修订版) [复制链接] 摘自 http://bbs.chinaunix.net/thread-917952-1-1.html 在ubuntu下 ...

  9. 格而知之2:UIView的autoresizingMask属性探究

    UIView的autoresizingMask属性,是用在当一个UIView实例的父控件的尺寸发生变化时,来自动调整UIView实例在父控件中的位置与尺寸的.autoresizingMask属性是一个 ...

  10. jsp验证码页面笔记

    首先在网上搜了下jsp生成验证码的代码,如下: package com.servlet; import java.awt.Color; import java.awt.Font; import jav ...