借助bootstrap框架模仿airbnb写的网页
.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写的网页的更多相关文章
- css去掉使用bootstrap框架后打印网页时预览效果下的超链接
在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...
- 手写网站服务器~用Python手动实现一个简单的服务器,不借助任何框架在浏览器中输出任意内容
写在前面的一些P话: 在公司网站开发中,我们往往借助于Flask.Django等网站开发框架去提高网站开发效率.那么在面试后端开发工程师的时候,面试官可能就会问到网站开发的底层原理是什么? 我们不止仅 ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
- 移动Web学习笔记(第1天)-bootstrap框架的使用
移动web前言 移动web : 移动端手机浏览器或者微信里面浏览的网页 移动APP : 手机上需要下载安装的应用程序 1. 移动web介绍 1.1 3 天 响应式开发 一套代码运行多个终端 优点:开发 ...
- Bootstrap框架 inconfont font-awesome
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- .NET MVC 学习笔记(二)— Bootstrap框架
二..NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...
- 响应式开发(二)-----Bootstrap框架的介绍
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...
随机推荐
- 【测试技术】ant中的for循环用法
有的时候,我们希望ant中也能类似脚本语言一样进行for循环,以实现一些重复性工作.由于ant核心包并未提供此功能,所以需要下载一个扩展包扔到ant的lib目录下去.详细步骤如下: 1.下载核心包:a ...
- MYSQL 中的变量
1.用户自己定义变量 2.系统变量(全局变量,会话变量) ----------------------------------------------------------------------- ...
- Delphi与字符编码(实战篇)(MultiByteToWideChar会返回转换后的宽字符串长度)
本文目标: 了解Delphi的字符串类型 字符编码的检测与转换 简体繁体转换 0. 导言 看完“.Net与字符编码(理论篇)”,我们明白了字符是自然语言中的最小单位,在存储和传输的过程中可以使用三种编 ...
- Sereja and Coat Rack(水)
Sereja and Coat Rack Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I6 ...
- AspectJ教学
这几天看JAVA基础看的有点头疼,决定时不时的换换口味,准备開始调研一些如今流行的技术,于是,開始埋头思考自己知识的盲区(当时,自己的知识盲区茫茫多...),想了几天后,决定要開始研究一下几种技术及实 ...
- C++ STL中的常用容器浅谈
STL是C/C++开发中一个非常重要的模板,而其中定义的各种容器也是非常方便我们大家使用.下面,我们就浅谈某些常用的容器.这里我们不涉及容器的基本操作之类,只是要讨论一下各个容器其各自的特点.STL中 ...
- Oracle SecureFiles 说明(转)
Oracle SecureFiles 说明 Oracle Database 11g 将LOB 数据类型作为Oracle SecureFiles 进行了完全重新设计,显著改进了应用程序开发的性能.可管理 ...
- H264标准句法表中C的含义理解
下面一段是H264官方中文版中给出的解释: “类别(在表中以C 表示)规定条带数据可以至多划分为三种条带数据类别.条带数据类别A 包含了类别2的所有语法元素.条带数据类别B 包含了类别3 的所有语法元 ...
- asp:UpdatePanel中js失效问题已解决
1.js function textSAll(o) { o.select(); } var dddd_dd = function () { $(":text").on(" ...
- sublime安装和汉化
对程序员来说,在不同的平台下有不同的IDE,网上很多教程都是使用DW,以致DW大名鼎鼎.其实,还有一些我们不为熟知的,却超级牛X的编辑器,我相信Sublime Text就是其中之一. 官方下载地址:h ...