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. 1207: C.LU的困惑

    题目描述 Master LU 非常喜欢数学,现在有个问题:在二维空间上一共有n个点,LU每连接两个点,就会确定一条直线,对应有一个斜率.现在LU把平面内所有点中任意两点连线,得到的斜率放入一个集合中( ...

  2. JS常见操作

    //第一篇博文,希望大家多多支持 /***** BasePage.js 公共的 脚本文件 部分方法需引用jquery库 *****/ //#region 日期操作 //字符串转化为时间. functi ...

  3. 使用Hashtable和List结合拼json数据

    在做项目的时候,有时候需要向页面返回一个特定的json类型的数据,一般情况下会有下面的方法进行拼接: public String chongzhiList() throws Exception { L ...

  4. jquery跨域访问解决方案(转)

    客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解.由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算 ...

  5. MFC 遍历FTP服务器目录中文乱码问题

    在编写FTP客户端的时候我用的是server u来做我的测试服务器,而server u 默认使用utf-8作为默认字符集,vs则使用unicode作为默认字符集,所以会产生乱码,将server u的默 ...

  6. ubuntu 10.10配置NFS网络共享步骤

    安装好交叉编译环境arm-linux-gcc之后,就开始配置NFS网络共享,用于不同的linux主机与目标机之间文件的共享.如果是windows和linux的共享则需用samba服务. NFS(Net ...

  7. cp | mv | rm

    linux下文件的复制.移动与删除命令为:cp,mv,rm 一.文件复制命令cp 命令格式: cp [-adfilprsu] 源文件(source) 目标文件(destination) cp [opt ...

  8. linux 启动 oracle数据库

    第一步:切换到oracle用户 su - oracle 第二步:启动oracle数据库监听 lsnrctl start 第三步:输入下方命令,出现:sql> sqlplus /nolog 第四步 ...

  9. 模板应用--UI线程与worker线程同步 模仿c# invoke

    由之前的一篇博文 <UI线程与worker线程><UI线程与worker线程>引出,UI线程与worker线程“串行化”在win32上实现是多么没有节操的事情,代码编写麻烦不说 ...

  10. Working with Strings(使用Oracle字符串)

    Working with Strings By Steven Feuerstein  Part 3 in a series of articles on understanding and using ...