HTML

由 hrs, 20 十一月, 2019

HTML实例-079 HTML的水平框架

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">

</head>
<html>
<frameset rows="25%,50%,25%" >
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">

</frameset><>

</html>

运行效果：

html_079.png

评论

由 hrs, 18 十一月, 2019

HTML实例-078 HTML的垂直框架

标签
HTML

我们在编辑 html 网页的时候，可以通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。这一节我们就来学习 html 框架的使用。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>

另外三个页面的代码：

frame_a.html

<!doctype html>
<head>
<meta charset="utf-8">
<style>
body{
background-color:#8F8FBD;
}

</style>
</head>
<html>
<body >
<h1>Frame A</h1>
</body>
<html>

frame_b.html

<!doctype html>
<head>
<meta charset="utf-8">
<style>
body{
background-color:#EBC79E;
}

</style>
</head>
<html>
<body >
<h1>Frame B</h1>
</body>
<html>

frame_c.html

<!doctype html>
<head>
<meta charset="utf-8">
<style>
body{
background-color:#FFFFCC;
}

</style>
</head>
<html>
<body >
<h1>Frame C</h1>
</body>
<html>

运行效果：

html_078.png

评论

由 hrs, 18 十一月, 2019

HTML实例-077 HTML 使用Bootstrap响应式 Web 设计

标签
HTML

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

实例代码：

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

</head>

<html>
<body>
<div class="container">
<div class="jumbotron">
<h1>你行网</h1>
<p>这是你行网主页</p>
</div>
</div>

<div class="container">
	<div class="row">
	<div class="col-md-4">
		<h3>伦敦</h3>
		<p>伦敦是英格兰的首都</p>
		<p>它是英国人口最多的城市，人口超过1300万</p>
	</div>


		<div class="col-md-4">
		<h3>巴黎</h3>
		<p>巴黎是法国的首都和人口最多的城市。</p>

		</div>

		<div class="col-md-4">
		<h3>东京</h3>
		<p>东京是日本的首都，大东京地区的中心，也是世界上人口最多的都市区。</p>

		</div>
	</div>
	</div>
</body>
</html>

运行效果：

html_077.png

评论

由 hrs, 16 十一月, 2019

HTML实例-076 HTML 创建一个响应式 Web 设计

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
.city{
border:1px solid black;
width:300px;
height:300px;
float:left;
margin:5px;
padding:20px;

}

</style>
</head>
<html>
<body>
<h1>dwoke.com 演示</h1>
<h3>调整此响应页面的大小</h3>
<div class="city">
<h3>伦敦</h3>
<p>伦敦是英格兰的首都</p>
<p>它是英国人口最多的城市，人口超过1300万</p>
</div>

<div class="city">
<h3>巴黎</h3>
<p>巴黎是法国的首都和人口最多的城市。</p>

</div>

<div class="city">
<h3>东京</h3>
<p>东京是日本的首都，大东京地区的中心，也是世界上人口最多的都市区。</p>

</div>

</body>
</html>

运行效果：

html_076.png

评论

由 hrs, 16 十一月, 2019

HTML实例-075 使用表格的 HTML 布局

标签
HTML

使用表格的 HTML 布局

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

实例代码：

<!doctype htme>
<head>
<meta charset="utf-8">
<style>
table{
 	width:680px;
 	height:85px;
}
td{
font-size:20px;
background-color:black;
color:white;
text-align:center;

}
</style>
</head>
<html>
<body>
<h1>这是一个利用表格来布局的实例</h1>
<table border="1">
<tr>
<th style="width:194px;height:85px">
<img src="img/dwoke_logo.png" alt="dwoke" >
</th>
<td>你行网</td>
</tr>
</table>
</body>
</html>

运行效果：

html_075.png

评论

由 hrs, 16 十一月, 2019

HTML实例-074 使用 HTML5 的网站布局

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
	header{
		width:830px;
		background-color:black;
		color:white;
		text-align:center;
		padding:5px;
	}
	nav{
		background-color:#eeeeee;
		width:100px;
		height:300px;
		padding:20px;
		line-height:30px;
		color:red;
		float:left;
		
	}
	section{
	float:left;
	width:650px;
	padding:10px;
	
	
	
	}
	footer{
		width:800px;
		clear:both;
		background-color:black;
		color:white;
		text-align:center;
		padding:20px;
		
	}
</style>
</head>
<html>
<body>
	<header>
		<h1>你行网</h1>
	</header>
	<nav>
		首页<br/>
		Drupal<br/>
		HTML<br/>
		About
	</nav>
	<section>
		<h3>Block 区块模块</h3>
		<p>Block 区块模块提供了与区块相关的功能，通过区块可将内容放置在网站的不同区域。Block 模块是 Drupal 的基础模块之一，不能被禁用。它是通过单独的区块管理器页面管理的。
		</p>
		<h3>Aggregator 聚合器模块</h3>
		<p>Aggregator 聚合器模块用于聚合内容。Drupal 的聚合器和 feed 阅读器一样，可以从其它网站收集 RSS 、RDF 和支持 Atom 的新闻 feed ，并在 Drupal 中显示出来。Aggregator 模块中可用的配置选项允许管理员对 feed 进行分类，并查看每个类别中的 feed ，站点管理员可以添加或删除 feed 。feed 在页面的内容区域中由与其相关联的聚合器展示出来，或通过使用一个区块在某个区块区域中展示。
		</p>
	</section>
	<footer>
		COPYRIGHT @ DWOKE.COM
	</footer>
</body>
</html>

运行效果：

html_074.png

 

评论

由 hrs, 14 十一月, 2019

HTML实例-073 HTML的布局

标签
HTML

使用 <div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局：

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
	#header{
	
	background-color:black;
	color:white;
	text-align:center;
	padding:5px;
	
	}
	
	#left{
	background-color:#eeeeee;
	color:green;
	width:130px;
	
	float:left;
	line-height:30px;
	}
	#content{
	width:350px;
    float:left;
    padding:10px;
	
	}
	
	#footer{
	background-color:black;
	color:white;
	text-align:center;
	clear:both;
	padding:1px;
	
	}
</style>

</head>
<html>
<body>
	<div id="header">
		<h2>这是网页头部分</h>
	</div>
	
	<div id="left">
		<ul>
			<li>首页</li>
			<li>drupal</li>
			<li>HTML</li>
			<li>关于</li>
		</ul>
	</div>
	<div id="content">
		这是网页内容显示部分。<br/>
		文章一<br/>
		文章二
	</div>
	
	<div id="footer">
		<h3>这是页脚部分</h3>
	</div>
</body>
</html>

运行效果：

html_073.png

从这个实例中看出，我们把网页分为四个div进行布局设置，分为是网页的头部、导航部分、内容部分和页脚部分。

评论1

由 hrs, 14 十一月, 2019

HTML实例-072 HTML的分类行内元素

标签
HTML

HTML <span> 元素是行内元素，能够用作文本的容器。设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
span.red{
color:red;
}
</style>

</head>
<html>
<body>
<h2>这是一个分类 <span class="red">行内元素</span>实例</h2>
<p>&#60;span&#62;标签可以自定义文本样式</p>
</body>
</html>

运行效果：

html_072.png

从这个实例可以看出，我们利用<span>标签对文本其一段内容进行颜色定义。

评论

由 hrs, 13 十一月, 2019

HTML实例-071 HTML的分类块级元素

标签
HTML

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类。下面我们就来做一个实例

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
.cms{
background-color:black;
color:white;
padding:20px;
width:600px;
margin:20px;
}
p{
text-indent:2em;
}
</style>
</head>
<html>
<body>
<div class="cms">
<h2>什么是内容</h2>
<p>内容一般有两类：结构化的和非结构化的。一篇博客文章是一个结构化内容的示例。</p>
</div>

<div class="cms">
<h2>什么是CMS</h2>
<p>CMS这个缩写指代内容管理系统。这是一个相当宽泛的术语，在实际中它是指一系列不同的软件类型。</p>
</div>

<div class="cms">
<h2>使用CMS理由</h2>
<p>使用内容管理系统会让生活变得更加简单。但此规则也有例外情况——例如要创建一个只有几个页面的简单网站时，就不需要使用CMS
了。通常情况下，CMS会提供使创建和管理一个网站变得更加容易合理的框架和多种工具。</p>
</div>
</body>
</html>

运行效果：

html_071.png

在这个实例中看出，我们可以一次性为三个div块元素进行统一的css样式设置。

评论

由 hrs, 13 十一月, 2019

HTML实例-069 html的块元素

标签
HTML

可以通过 <div> 和 <span> 将 HTML 元素组合起来。

HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素
内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签
标签    描述
<div>    定义文档中的分区或节（division/section）。
<span>    定义 span，用来组合文档中的行内元素。

评论

HTML