html入门教程（五）块、响应式web设计、内联框架

最新推荐文章于 2024-04-04 16:32:05 发布

__2018__

最新推荐文章于 2024-04-04 16:32:05 发布

阅读量592

点赞数 2

分类专栏： web html 文章标签： div 块框架响应式 web

本文链接：https://blog.csdn.net/duan_2018/article/details/79810286

版权

web 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

一、span与div

<div>是块级元素，它是可用于组合其他 HTML 元素的容器。由于它属于块级元素，浏览器会在其前后显示折行。常与css一起使用设置布局。<span> 元素是内联元素，可用作文本的容器。与css一起使用，设置文本的样式。

<!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>

<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">
Data 2018.4.3
</div>

</body>
</html>

<！doctype html>说明版本是html5

另外如果不用div的话，可以用下面的标签

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

二、HTML 响应式 Web 设计

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

bootstrap是目前最流行的响应式框架，可以在手机，平板，电脑等任何尺寸的设备上用一个设计。下面是一个例子

<!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>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>

三、内联框架iframe

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。但是开发人员必须跟踪多个页面，在框架里也很难打印整个页面。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

__2018__

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html入门教程（五）块、响应式web设计、内联框架

一、span与div&lt;div&gt;是块级元素，它是可用于组合其他 HTML 元素的容器。由于它属于块级元素，浏览器会在其前后显示折行。常与css一起使用设置布局。&lt;span&gt; 元素是内联元素，可用作文本的容器。与css一起使用，设置文本的样式。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;#head...
复制链接

扫一扫

专栏目录