从零开始HTML(二 2016/9/20)

1.布局

① 使用 <div> 元素的 HTML 布局,<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
把div理解成一个盒子,设置了盒子的高和宽,后面的盒子就自动跑到前面盒子没占的地方
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;        清除前面float(浮动)的影响
    text-align:center;
   padding:5px;
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright ? W3Schools.com
</div>

</body>
</html>

② 使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分:

HTML5 语义元素:

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
<!DOCTYPE html>
<html>

<head>
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
section {
    width:350px;
    float:left;
    padding:10px;
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
</head>

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3Schools.com
</footer>

</body>
</html>

③ 使用表格的 HTML 布局 。<table> 元素不是作为布局工具而设计的,<table> 元素的作用是显示表格化的数据,使用 <table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式

复习表格:下面代码所定义的是一个一行一列的表格,<th>是这一行的表头,<td>是这一行的内容,<tr>定义了这一行。

<!DOCTYPE html>
<html>
<head>
<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp th {
    width:40px;
}

</style>
</head>

<body>

<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp1.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>

</body>
</html>

2.HTML 响应式 Web 设计

  • RWD 指的是响应式 Web 设计(Responsive Web Design)
  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的

① 创建响应式设计的一个方法,是自己来创建它:

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>

<body>

<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

② 使用 Bootstrap,另一个创建响应式设计的方法,是使用现成的 CSS 框架。Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1>
  <p>Resize this responsive page!</p>
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

★ 后续继续学习bootstrap。

时间: 2024-10-30 09:26:34

从零开始HTML(二 2016/9/20)的相关文章

2016/02/20 codes

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>2016/02/20</title></head><body><div id="mainDiv"> <div id = "content"> <div id = &qu

2016/7/20 1:18:29 PyQT5 炫酷的左侧导航效果

2016/7/20 1:18:29  完整code from PyQt5.QtWidgets import (QApplication, QWidget, QHBoxLayout, QTreeWidget, QTreeWidgetItem, QGroupBox) from PyQt5.QtGui import QIcon, QPixmap from PyQt5.QtCore import QSize class Bar_Navigation(QWidget): def __init__(self

2016 - 2 - 20 ARC知识总结(二 autorelease概念及实现)

首先祝自己生日快乐~23咯~ 一  autorelease的概念 autorelease会像C语言的自动变量那样来对待对象实例.当超出作用域(相当于变量作用域)时,对象的实例release实力方法被调用. 另外,同C语言的自动变量不同的是,编程人员可以自己设置变量的作用域,即通过autoreleasepool来实现 . 调用对象的autorelease方法,其实就是将对象就近放入一个NSAutoreleasePool中,该对象的生存周期相当于C语言变量的作用域.对于所有调用了autoreleas

2016/09/20

1. Python序列化之pickle模块 - 用于[python特有的类型]和[python基本数据类型]间进行转换 - pickle模块提供了四个功能:dumps.dump.loads.load - json更加适合跨语言 基本数据类型的序列化  pickle仅适用于python 复杂类型的序列化 # import json # dic = {'k1': 'v1'} # print(dic, type(dic)) # # res = json.dumps(dic) # 将python的基本数

分布式技术一周技术动态 2016.03.20

分布式系统实践 1. 基于Mesos和Docker的分布式计算平台 https://mp.weixin.qq.com/s?__biz=MzAxMDgzOTA2Mw==&mid=402769128&idx=1&sn=cea3ad1357bd9312acf1768c0a493bfd&scene=1&srcid=0318BTuxT0fsFYwPjpeyuDOa&key=710a5d99946419d90fbc1e7600cce055b6e997d6afafc74c

2016.02.20 学习笔记 数据在Activity之间的传递的情况

情况一:一个Activity跳转到另一个Activity时,将第一个Activity的数据传递到第二个Activity里面. 分析:当一个界面跳转到另一个界面的同时还要讲数据传递过去,这种情况需要用Intent类putExtra()方法实现. 具体在Onclick方法中的样例代码如下: Intent i1=new Intent(this,SecondActivity.class); String Message=Edit1.getText().toString(); i1.putExtra("M

“耐撕”团队2016.04.20站立会议

1. 时间 : 10:20--10:40  共计20分钟 2. 人员 : Z   郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:http://www.cnblogs.com/charliePU/), Q 齐嘉亮(博客:http://www.cnblogs.com/dendroaspis-polylepis/), M 张敏(博客:http://www.cnblogs.com/zhangminss/) 3.功能点清单. 序号

2016 - 1 - 20 runloop学习

一:Runloop基本知识 1.本质就是运行循环 2.基本作用: 2.1保证程序持续运行 2.2处理APP中的各种事件:触摸,定时器,selector... 2.3节省CPU资源,系统程序性能:它会让主线程在工作时工作,非工作时休息. 2.4.... 二:main函数中的Runloop 1. 1 int main(int argc, char * argv[]) { 2 @autoreleasepool { 3 return UIApplicationMain(argc, argv, nil,

Java从零开始学二十九(大数操作(BigIntger、BigDecimal)

一.BigInteger 如果在操作的时候一个整型数据已经超过了整数的最大类型长度long的话,则此数据就无法装入,所以,此时要使用BigInteger类进行操作. 不可变的任意精度的整数.所有操作中,都以二进制补码形式表示 BigInteger(如 Java 的基本整数类型).BigInteger 提供所有 Java 的基本整数操作符的对应物,并提供 java.lang.Math 的所有相关方法.另外,BigInteger 还提供以下运算:模算术.GCD 计算.质数测试.素数生成.位操作以及一