【HTML+CSS网页设计与布局 从入门到精通】第3章

目录

段落首行缩进

无序列表

段落右对齐

页面背景颜色

段落内个别字体加粗

字体字号设置

特殊字符

数学公式

显示一张图片

显示图片,并规定大小

父子div

父子+孙子div



<html>
   <head>
      <title>段落与换行</title>
   </head>
   <body>
   
互联网发展的起源
	1969年,为了保障通信联络,美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。

20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。

   </body>
</html>

<html>
   <head>
      <title>段落与换行</title>
   </head>
   <body>
   
    <p>互联网发展的起源</p>
    <p>1969年,为了保障通信联络,美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>

    <p>20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。</p>

   </body>
</html>

<html>
   <head>
      <title>段落与换行</title>
   </head>
   <body>
   
<h1>互联网发展的起源</h1>
<h2>第1阶段</h2>
<p>1969年,为了保障通信联络,美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<h2>第2阶段</h2>
    <p>20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。</p>

   </body>
</html>

<html>
   <head>
      <title>文本排版</title>
   </head>
   <body>
   
<center><h1>互联网发展的起源</h1></center>
<h2>第1阶段</h2>
<p>1969年,为了保障通信联络,美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<h2>第2阶段</h2>
    <p>20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。</p>

   </body>
</html>

段落首行缩进


<html>
   <head>
      <title>文本排版</title>
   </head>
   <body>
   
<center><h1>互联网发展的起源</h1></center>
<h2>第1阶段</h2>
<blockquote>
 1969年,为了保障通信联络,美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。
</blockquote>
<h2>第2阶段</h2>
    <blockquote>
     20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。
    </blockquote>
   </body>
</html>

无序列表

<html>
	<head>
		<title>无序列表</title>
	</head>
	<body>
		这是一个无序列表:
		<P>
			<ul>
 				<li>绘制切片并导出
  		    <li>编辑首页
  		    <li>插入图像内容
  			<li>设置自由延伸表格
  			<li>编辑二级页面并把它另存为模板
	        </ul>
	</body>
</html>

段落右对齐


<html>
   <head>
      <title>文本排版</title>
   </head>
   <body>
   
<h1 align="center">互联网发展的起源</h1>
<h2 align="right">第1阶段</h2>
<p>
 1969年,为了保障通信联络,美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。
</p>
<h2 align="right">第2阶段</h2>
    <p>
     20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。
    </p>
   </body>
</html>

页面背景颜色


<html>
   <head>
      <title>文本排版</title>
   </head>
   <body text="blue" bgcolor="#CCCCFF">
   
<h1 align="center">互联网发展的起源</h1>
<h2 align="right">第1阶段</h2>
<p>
 1969年,为了保障通信联络,美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。
</p>
<h2 align="right">第2阶段</h2>
    <p>
     20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。
    </p>
   </body>
</html>

段落内个别字体加粗


<html>
   <head>
      <title>文本排版</title>
   </head>
   <body >
   
<h1 align="center">互联网发展的<i>起源</i></h1>
<h2 align="right">第1阶段</h2>
<p>
 1969年,为了<b>保障通信</b>联络,美国国防部高级研究计划署<em>ARPA</em>资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<h2 align="right">第2阶段</h2>
    <p>
     20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。
    </p>
   </body>
</html>

字体字号设置


<html>
    <head>
 	   <title>文本排版</title>
    </head>
    <body >
        <h1 align= "center"><font color="green"  face="楷体_GB2312" size="7"> 互联网发展的</font><i>起源</i></h1>
        <h2 align="right">第1阶段</h2>
        <p align=""> 1969年,为了<b>保障通信</b>联络,美国国防部高级研究计划署<em>ARPA</em>资助建立了世界上第一个分组交换试验网ARPANET,连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
        <h2 align="right">第2阶段</h2>
        <p> 20世纪70年代末到80年代初,计算机网络蓬勃发展,各种各样的计算机网络应运而生,如MILNET、USENET、BITNET、CSNET等,在网络的规模 和数量上都得到了很大的发展。一系列网络的建设,产生了不同网络之间互联的需求,并最终导致了TCP/IP协议的诞生。 </p>
    </body>
</html>

特殊字符


<html>
<head>
<title>使用符号</title>
</head>
<body>
<p>&nbsp; &nbsp;假设有如下4个变量,并满足如下不等式:</p>
<p align="center">
 x &gt; y <br>
 m &lt; n </p>
 
<p align="right"> 版权所有&copy;前沿教室</p>
</body>
</html>

数学公式


<html>
   <head>
      <title>运算式</title>
   </head>
   <body>
       [(6 <sup>3</sup> + 3 <sup>6</sup>) &divide; 2] &plusmn; 1 = ?<br>
      结果以 &permil; 表示。<p>
      H <sub>2</sub> + O <sub>2</sub> &hArr; H <sub>2</sub> O
   </body>
</html>

显示一张图片


<html>
   <head>
      <title>图像</title>
   </head>
   <body>
      <img src="cup.gif">
   </body>
</html>

显示图片,并规定大小


<html>
<head>
<title>图像</title>
</head>
<body>
   <img src="cup.gif">
   <img src="cup.gif"  width="64">
   <img src="cup.gif"  width="64" height="128" >
</body>
</html>

父子div


<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{						/* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
    height:40px;				/* 设置父div的高度 */
}
div.son{						/* 子div */
    background-color:#a2d2ff;
    margin-top:30px; margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

父子+孙子div

<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{						/* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
    height:40px;				/* 设置父div的高度 */
}
div.son{						/* 子div */
    background-color:#a2d2ff;
    margin-top:30px; margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
div.son2{						/* 子div */
    background-color:#a2d2ff;
    margin-top:30px; margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}

div.grandson{						/* 子div */
    background-color:#a2d2ff;
    margin-top:30px; margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">大儿子div</div>
        <div class="son2">二儿子div
            <div class="grandson">大孙子div</div>
        </div>
    </div>
</body>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值