借助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 的, ...
随机推荐
- 一个Java项目的学习
1. java命令行的启动 首先是gradle build 其次是:java -Dabc.appid=1234 -classpath "a.jar:b.jar" com.ctri ...
- MYSQL 插入二进制数的 2 种方法。
方法 1.insert into TableName set column =''; 方法 2.insert into TableName .... values(.....); ---------- ...
- MYSQL 加密的 3 类方法
背景: 若你想要储存一些由可能包含任意字节值的加密函数返回的结果,使用BLOB列而不是 CHAR 或VARCHAR 列,从而避免由于结尾空格的删除而改变一些数据值的潜在问题. 这一句话来自官方文件,记 ...
- android TextView 垂直滚动 用动画实现
项目中需要让TextView 滚动一会显示一行一会显示一行 想了下用移动动画实现.但是实际中在整这个动画时调了好久.主要用到的动画方式是移动动画:TranslateAnimation 代码: PS: ...
- JVM 看不到某些异常的stacktrace问题(转)
在java 1.5的release notes里面可以看到这样一句话: The compiler in the server VM now provides correct stack backtra ...
- Boost程序库完全开发指南——深入C++“准”标准库(第3版)
内容简介 · · · · · · Boost 是一个功能强大.构造精巧.跨平台.开源并且完全免费的C++程序库,有着“C++‘准’标准库”的美誉. Boost 由C++标准委员会部分成员所设立的Bo ...
- BMP彩色转成黑色二值图
一天半把彩色bmp转成黑白了. 原理是: 第一步:读出位图数据的偏移位置:即第11个字节,用fseek即可. 然后将偏移位置之前的数据全部写入新的bmp图中. 第二步:用fseek移到位图数据这前,判 ...
- linux脚本实例之while
写一个脚本,执行后,打印一行提示“Please input a number:",要求用户输入数值,然后打印出该数 值,然后再次要求用户输入数值.直到用户输入"end"停 ...
- C语言运算符的优先级
熟悉C语言的同学都知道,C语言众多的运算符及繁琐难记的优先级总是搞得我们这些C初学者头大.那么本文就 对C语言中所有的运算符进行汇总,并对其优先级进行一定的介绍. 这里虽然对所有C运算符的优先级进行了 ...
- HDOJ-1003 Max Sum(最大连续子段 动态规划)
http://acm.hdu.edu.cn/showproblem.php?pid=1003 给出一个包含n个数字的序列{a1,a2,..,ai,..,an},-1000<=ai<=100 ...