样式控制与页面布局.pdf

版权申诉

153 浏览量更新于2024-04-19 评论收藏 2.06MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

样式控制与页面布局在网页设计中起着至关重要的作用，影响着网站的美观程度和用户体验。样式设置和页面布局的好坏直接关系到网站的质量。在XHTML中，每一个标记都是一个元素，元素是构成XHTML源代码的基本单位，包括一些常见的元素如<div></div>、<body></body>等，还有服务器控件如<asp:Button ID="Button1" runat="server" Text="Button" />等。样式是指元素在浏览器中的显示形式，可以涉及到字体大小、颜色、背景色以及背景图像等方面。在XHTML中，可以使用style属性来设置元素的样式，其中属性与属性值之间以冒号“:”分隔，多个属性之间以分号“;”隔开。通过合理的样式设置，可以使网站页面更加美观和吸引人。另外，样式生成器是一个非常实用的工具，可以帮助设计师们更轻松地生成和管理样式。通过样式生成器，可以快速地设置元素的样式属性，省去了手动编写样式代码的繁琐过程。样式生成器还可以提供一些常用的样式模板，方便设计师们选择和应用到自己的网页设计中，大大提高了工作效率。设计师们可以根据自己的需求和风格定制样式生成器，使得样式设置更加个性化和具有创意。页面定位是网页布局中的重要环节，常用的页面定位方式有相对定位、绝对定位和固定定位等。相对定位是相对于元素原本在文档流中的位置进行定位，通过设置top、left、right、bottom等属性来控制元素的具体位置。绝对定位是相对于最近的具有定位属性（relative、absolute、fixed）的父级元素进行定位，可以精确地控制元素的位置。而固定定位是相对于浏览器窗口进行定位，不随页面滚动而改变位置。不同的页面定位方式适用于不同的布局需求，设计师们可以根据实际情况选择合适的方式进行布局。另外，页面布局是网页设计中必不可少的一环，良好的页面布局可以使页面结构更加清晰，易于阅读和导航。在进行页面布局时，可以采用一些常用的布局方法和技巧，如网格布局、分栏布局、响应式布局等。网格布局是一种基于网格系统的布局方式，可以使页面的元素排列整齐有序，方便阅读和浏览。分栏布局可以将页面划分为多个列，使得内容更加分明和有组织。响应式布局是根据不同设备的屏幕尺寸来调整页面布局，确保在不同设备上都能够良好显示。总的来说，样式控制和页面布局是网页设计中的重要环节，需要设计师们充分理解和掌握。通过合理的样式设置和页面布局，可以使网站更具吸引力和易用性，带来更好的用户体验。同时，不断学习和尝试新的样式和布局技巧，可以不断提升自己的设计水平，为用户提供更优质的网页设计作品。希望设计师们能够在样式控制与页面布局方面不断努力，创造出更加优秀的网页设计作品。

资源详情

资源评论

资源推荐

第 5 章样式控制与页面布局

5.2 网页布局与页面元素定位

除了掌握基本的样式设置方法以外，学习如何布局页面以及如何定位页面中的元素也是

网页设计的基本功。

5.2.1 网页布局

网页布局方式主要有左对齐、居中和满宽度显示。默认情况下，网页布局为水平左对齐

显示，但在实际网站中，我们看到的大部分网页都是水平居中或者满宽度显示。下面分别介

绍具体实现方法。

1．网页水平居中显示，宽度固定

实现网页水平居中显示的方法很简单，只需要在body 的 style 样式中，设置 text-align 属

性为 center 即可。如果希望页面宽度固定，可以通过设置 div 的 width 属性实现，代码示例如

下。

</div>

</form>

</body>

在 div1 中，设置宽度为 760 像素，div1 内的元素左对齐显示。对于 800×600 分辨率的

显示器来说，可以在浏览器最大化的情况下正常显示主页面的内容，不需要用户拖动左右滚

动条查看。如果用户的显示器分辨率更高，则页面自动居中显示，这样还可以在主页面的两

边显示一些广告。例如搜狐新闻（http://news.sohu.com/）采用的就是这种方式。

2．网页满宽度显示，宽度随浏览器显示界面大小自动调整

要实现满宽度显示，只需要将 div1 的固定宽度变为百分比即可，示例代码如下。

</div>

</form>

</body>

这种方式的好处是不论浏览器是否最大化显示，都不会显示网页的横向滚动条，例如网

易的 126 免费邮（http://www.126.com/）采用的就是这种形式；缺点是页面元素相对位置不固

定，例如本来B 元素在 A 元素同一行的右边，当浏览器显示的宽度缩小时，B 元素可能会显

示在下一行，在某些情况下，不利于窗体与用户之间的交互操作。

5.2.2 页面元素定位

页面中的元素定位分为流布局和坐标定位布局两种形式。在【设计】视图中拖动元素或

控件到页上某处后，可以鼠标右键单击某个元素，然后设置定位属性，此时 ASP.NET 会自动

在【源】视图中生成对应的HTML 或 XHTML 标记。当然，也可以在【源】视图中，直接输

入元素标记，然后设置定位属性。

有以下几种页面元素定位方式。

ASP.NET 网页设计与网站开发

（1）static

流布局，页面中的元素按照从左到右、从上到下的顺序显示，各元素之间不重叠。如果

不设置元素定位方式，则网页默认为流布局方式。

（2）absolute

坐标绝对定位，元素显示在页中的位置由 style 样式的 left、top、right、bottom 以及 z-index

属性决定，具有相同 z-index 值的元素可以重叠，其效果就像多张透明纸按顺序重叠在一起一

样。z-index 值大的元素会覆盖 z-index 值小的元素内容。left 指元素的 x 坐标、top 指元素的

y 坐标。需要注意的是，虽然这种定位的名称叫做绝对定位，但实际上，元素的坐标位置是

以它最近的具有 position 属性的父容器作为参照物的。具体含义可以看下面的例子。

【例 5-3】新建一个名为 PositionExample1 的 Web 应用程序项目，修改 Default.aspx 中

body 内代码为下面的内容，然后切换到【设计】视图，改变视图宽度，观察各div 位置的变

化。

<div id="div3" style="position: absolute; top: 72px; left: 248px; width: 200px;

z-index:100; height: 100px; border: solid 1px #ff0033;">

<div id="div4" style="top: 20px; left: 30px;

position: absolute; width: 96px; height: 42px; border: solid 1px #3366ff;">

</div>

</form>

</body>

在这段代码中，对于 div1 来说，其父级是 body，由于 body 相对于浏览器是居中显示的，

而 div1 又没有设置 position 属性，所以 div1 相对于浏览器也居中，但是 div1 内的文本靠左

对齐，而 div2 在 div1 内，可把它看作是 div1 的元素，所以 div2 也是靠左对齐，如图 5-4 所

示。

div2 最近的父容器就是 div1。由于 div1 没有定义 position 属性，所以在div2 中，只要不

添加 position 属性，即使定义坐标位置也不会起作用。

div1

div2

div3

div4

div3 的 position 属性设置为 absolute，虽然它被包含在 div1 内，但是由于 div1 没有 position

属性，所以 div1 与 div3 无关，所以 div3 实际上是以浏览器为参照物的，当增加浏览器页面

宽度时，虽然 body 仍然居中，但是 div3 相对于浏览器左上角的位置却保持不变，如图 5-5

所示。

图5-4 例5-3的页面效果

图5-5 增加页面宽度后各div的位置变化

剩余32页未读，继续阅读

春哥111

粉丝: 1w+
资源: 5万+

会员权益专享

网页设计中的样式控制与页面布局技巧

评论0

会员权益专享

最新资源

网页设计中的样式控制与页面布局技巧

评论0

CCS学习资料css项目源码和文档资料.zip

论文研究-Web页面自动化设计中布局挖掘和样式匹配算法.pdf

论文研究-基于模板和CSS技术的Web页面定制.pdf

aspose.pdf.dll .net 6.0可用

free spire.pdf for .net

free spire.pdf for .net。

free spire.pdf for java

tpl-presentation.pdf

itextsharp中文教程.pdf

阿里前端开发规范文档.pdf

itextsharp.text.pdf python

word.vba高效排版范例应用.pdf

如何根据pdf生成前端页面

aspose-pdf 包

chrome pdf.js

pdfjs缩放比例控制

harmonyos4.0开发 pdf

java 原生 PDF 转成另外一个pdf

itextpdf生成pdf分页

itextpdf给页眉添加一个图片

会员权益专享

最新资源