BootStrap框架写的致敬乔布斯的网页
http://codepen.io/Gabyler/pen/oxjRYj
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Steve Jobs</h1>
<h2 class="text-center"><em>The man who change the world</h2>
<div class="thumbnail">
<img src="http://img2.cache.netease.com/photo/0025/2013-09-23/99F1MDS70AK00025.jpg">
<div class="caption text-center">Jobs is an artist and a coder,without his passion and effort,the world can't be so wonderful like now.</div>
</div>
<div class="col-md-8 col-md-offset-2">
<h3>The timeline of Apple and him:</h3>
<ul>
<li><strong>1980</strong> -Presentation donated to Computer History Museum</li>
<li><strong>1983</strong> -International Design Conference in Aspen (IDCA) - 'The Future Isn't What It Used To Be' keynote</li>
<li><strong>1985</strong> -Playboy Magazine Interview</li>
<li><strong>1990</strong> -Memory & Imagination: New Pathways to the Library of Congress with Stewart Brand</li>
<li><strong>1994</strong> -Santa Clara Valley Historical Society Silicon Valley Documentary</li>
<li><strong>2005</strong>Stanford Commencement Address</li>
</ul>
<blockquote>
<p>Stay hungry, Stay foolish!</p>
<footer><cite>Barack Hussein Obama</cite></footer>
</blockquote>
<p class="text-center">If you want have a further information about jobs,this is <a href="https://en.wikipedia.org/wiki/Timeline_of_Steve_Jobs_media">wikipedia entry</a></p>
</div>
</div>
</div>
</div>
<!--jumbotron-->
<div class="footer text-center">
<p>This is coded by <a href="http://codepen.io/Gabyler/">Jiale Guo</a>
</p>
</div>
<!--container-->
</div>
Veiw HTML
body {
margin-top: 60px;
}
View Css
BootStrap框架写的致敬乔布斯的网页的更多相关文章
- 20170811 使用Bootstrap框架写个页面
采用Bootstrap-table 做的页面. 1. 增加Query 查询功能,涉及Ajax 来加载页面数据吧! <meta charset="UTF-8"> < ...
- PHP实战 新闻管理系统 使用到了bootstrap框架
刚刚接触 PHP 仿照视频 写了个新闻管理系统 当中也使用到了bootstrap框架 写下来整理一下思路. 这是个非常easy的系统.首先是建立数据库表. mysql>create databa ...
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- BootStrap框架
简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- css去掉使用bootstrap框架后打印网页时预览效果下的超链接
在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...
- 【乔布斯05年斯坦福大学毕业典礼上的演讲】——Stay Hungry, Stay Foolish.(转)
Steve Jobs: Commencement Address at Stanford University "Stay Hungry, Stay Foolish." 求知若饥, ...
- Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
随机推荐
- 【转】Android下编译jni库的二种方法(含示例) -- 不错
原文网址:http://blog.sina.com.cn/s/blog_3e3fcadd01011384.html 总结如下:两种方法是:1)使用Android源码中的Make系统2)使用NDK(从N ...
- bzoj1623 [Usaco2008 Open]Cow Cars 奶牛飞车
Description 编号为1到N的N只奶牛正各自驾着车打算在牛德比亚的高速公路上飞驰.高速公路有M(1≤M≤N)条车道.奶牛i有一个自己的车速上限Si(l≤Si≤1,000,000). ...
- 剑指offer-面试题22.栈的压入,弹出序列
题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第 二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等. 例如序列1.2.3.4.5是某栈的压栈序列,序列4.5.3.2.1 是该压栈 ...
- 喜欢的女生快被别人抢走了,我敢怎么抢? - V2EX
喜欢的女生快被别人抢走了,我敢怎么抢? - V2EX 三大定律镇楼: 第一定律:永远不要以为女生对你有好感.第二定律:告白等于见光死.第三定律:秀恩爱分得快.
- AC大牛经典语录
超经典: 1. 为了世界的和平,为了女生的安全,我拼命做题,做题,做题! 2. A ac a day, keeps the doctor away! 3. from good to great ...
- 设置Android设备在睡眠期间始终保持WLAN开启的代码实现
MainActivity例如以下: package cc.ab; import android.os.Bundle; import android.provider.Settings; import ...
- winform —— 界面
winform 界面简单介绍 窗体事件:理解为委托变量,指向哪个函数,就执行哪个函数.窗体:显示窗体的过程是一个通过模板造对象的过程.先走构造函数,构造函数中的InitializeComponent( ...
- 伪元素::selection(怎么修改网页中被选中文本的样式)
当我们用鼠标选中一段文字的时候我们会发现文字的颜色和背景色都改变了, 有时候设计给这种选中状态设计了其他的样式,那么我们怎么来自定义选中的文本的样式呢? 用::selection <p>我 ...
- 计算一个数组里的重复值并且删去(java)
主要思想: 数组可以无序 假设数字里的值都为正 循环判断数组 如果与前面的数字相同则变为-1 然后记录-1的个数算出重复值 然后重新new一个减去重复值长度的新数组 和原数组判断 不为-1的全部复制进 ...
- 班上有学生若干名,已知每名学生的成绩(整数),求班上所有学生的平均成绩,保留到小数点后两位。同时输出该平均成绩整数部分四舍五入后的数值。 第一行有一个整数n(1<= n <= 100),表示学生的人数。其后n行每行有1个整数,表示每个学生的成绩,取值在int范围内。
#include<iostream> #include<iomanip> using namespace std ; int main() { int n; while(cin ...