样式控制与页面布局.pdf
版权申诉
17 浏览量
2022-11-13
00:34:36
上传
评论
收藏 2.06MB PDF 举报
第 5 章 样式控制与页面布局
网页设计中比较繁琐的工作之一就是样式控制和页面布局。样式是否美观，布局是否合
理，会直接影响网站的质量。这一章我们先学习如何进行样式设置，然后学习常用的页面定
位方式以及页面布局的方法和技巧。
5.1 样式与样式生成器
在 XHTML 中，每一个标记都是一个元素。元素是构成XHTML 源代码的基本单位，一
般用“<元素名称>”开头，用“</元素名称>”结束，例如<div></div>、<body></body>等。
有些元素也可以用“<元素名称 />”的形式，例如<br />。除了 XHTML 标记外，元素还包括
服务器控件，例如<asp:Button ID="Button1" runat="server" Text="Button" />。
样式是指元素在浏览器中呈现的形式，比如字体大小、颜色、背景色以及背景图像等。
在 XHTML 中，使用 style 设置元素的样式，每个style 内包含一个或多个属性，一般形式为：
style="属性名 1:属性值 1; 属性名 2:属性值 2; „„"
属性名与属性值之间用冒号“:”分隔，如果一个样式中有多个属性，各属性之间用分号
“;”隔开。
在 VS2005 中，有两种设置样式的方法，一种是在【源】视图下直接设置样式，另一种
是在【设计】视图下，利用可视化界面设置样式。
5.1.1 在源视图下设置样式
创建一个网页时，系统默认为【源】视图，利用系统提供的智能提示，可以方便地设置
各种元素的样式。下面通过具体例子说明设置方法。
【例 5-1】使用 style 设置样式。
（1）新建一个名为 StyleExample1 的 Web 应用程序，将 Default.aspx 的 body 部分改为如
下内容。
<body style="text-align: center">
<form id="form1" runat="server">
<div style="text-align: center; width:384px; border:solid 1px green">
<h1 style="color:Red">
送友人</h1>
<p style="color: #ff7f50">
李白</p>
<h2 style="color:Blue">
青山横北郭，白水绕东城。</h2>
<h2 style="color:Blue">
此地一为别，孤蓬万里征。</h2>
<h2 style="color:Blue">
浮云游子意，落日故人情。</h2>
1
剩余32页未读，继续阅读
资源评论
