Dreamweaver CS6如何应用：[29]CSS百分比值

来源：互联网 2023-03-16 19:17:34 版权归原作者所有，如有侵权，请联系我们

百分比值是网页设计中常用的数值之一，功能是设置页面某元素相对于另一元素的大小。

工具/原料

其具体使用的语法格式如下所示：

数字%

具体操作如下：

新建一个HTML空白页

单击CSS控制面板上的‘新建’按钮，

Dreamweaver CS6如何应用：[29]CSS百分比值

在弹出的‘新建CSS规则’对话框中设置‘选择器类型’为‘类’，‘名称’为mmm，

Dreamweaver CS6如何应用：[29]CSS百分比值

在弹出的‘。mmm的CSS规则定义’对话框，在‘分类’列表中选择‘方框’选项，设置‘宽’为400像素，‘高’为200像素

Dreamweaver CS6如何应用：[29]CSS百分比值

在’分类‘的列表中选择’背景‘选项，设置’背景颜色‘为红色。点击‘确定’回设计视图

Dreamweaver CS6如何应用：[29]CSS百分比值

之后再CSS控制面板重新新建一个CSS规则，同样是‘类’名称为‘nnn’

Dreamweaver CS6如何应用：[29]CSS百分比值

在弹出的‘nnn的CSS规则定义’对话框，在‘分类’列表中选择‘方框’，设置宽和高的值都为‘50%

Dreamweaver CS6如何应用：[29]CSS百分比值

设置背景颜色为黑色，点击确定返回设计视图

Dreamweaver CS6如何应用：[29]CSS百分比值

在菜单栏中选择‘插入’----‘布局对象’----‘DIV’

Dreamweaver CS6如何应用：[29]CSS百分比值

在弹出的‘插入DIV标签‘对话框中设置类为’mmm'

Dreamweaver CS6如何应用：[29]CSS百分比值

效果如下：

Dreamweaver CS6如何应用：[29]CSS百分比值

12此文章未经授权抓取自百度经验

重新插入一个DIV标签，在菜单栏中选择‘插入’----‘布局对象’----‘DIV’，在弹出的‘插入DIV标签‘对话框中设置类为’nnn',此时注意要把光标放在上一个DIV的标签内，

Dreamweaver CS6如何应用：[29]CSS百分比值

点击确定后，效果如下，完成：

Dreamweaver CS6如何应用：[29]CSS百分比值

CSS基本语法|下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS

上一篇：css3实现卷页效果下一篇：如何建一个简单的css样式