带来一篇CSS计划制造长度高度纷歧样的网页区块

只看该作者 · 发表于 2015-1-16 07:38:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。
破洛洛文章简介：网页每一个地区模块的长度和高度纷歧,用CSS怎样完成这类相似组件让其具有扩大性呢?
常常在网站上会发明以下图如许的经常使用组件模块,这也是我比来做的一个网站项目,我把我的做法收拾出来与人人分享一下.

登录/注册后可看大图

每一个地区模块的长度和高度纷歧,用css怎样完成这类相似组件让其具有扩大性呢?

登录/注册后可看大图

先看模块的title部分,先做一张充足地区的title背景图片,以下图:(bg_title.gif)

登录/注册后可看大图

1.界说title的背景和高度.让图片从右侧入手下手显现.
.title{background:url(bg_title.gif)no-repeattopright;height:26px}

登录/注册后可看大图

2.界说题目部分,我们用h1标签,一样界说题目的背景和高度及其他款式.让图片从底部入手下手显现..titleh1{margin:0;padding:0;background:url(bg_title.gif)no-repeatleftbottom;height:26px;line-height:26px;text-align:center;color:#000;font-weight:700}

登录/注册后可看大图

3.依据实践必要界说title背景的宽度和h1题目的宽度
.title_width1{width:300px}
.h1_width1{width:80px}
再看圆角的内容部分,切成两张图片,一张从右侧圆角入手下手的充足年夜的图片(bg1.gif)

登录/注册后可看大图

一张右边圆角细线图片(bg2.gif)

登录/注册后可看大图

1.界说内容地区的宽度、和背景图片(bg1.gif)。
2.界说右边圆角细线图片背景(bg2.gif)。我们这里用p标签。.box{background:url(bg1.gif)rightbottom;margin-bottom:15px}
.boxp{margin:0;padding:10px;background:url(bg2.gif)no-repeatleftbottom;line-height:20px;}
.box_width1{width:300px}
完成道理同理title部分

全体示例代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>网站经常使用组件的扩大性做法</title>
<styletype="text/css">

</style>
</head>
<body>
<divclass="titletitle_width1">
<h1class="h1_width1">四字题目</h1>
</div>
<divclass="boxbox_width1">
<p>我们站的流量在短短4个月内增添了3倍，告白红利也翻倍了。很乐意失掉易闻公司的服务，但愿易闻在搜刮引擎营销的路途上越走越好！</p>
</div>
<divclass="titletitle_width2">
<h1class="h1_width2">六字题目题目</h1>
</div>
<divclass="boxbox_width2">
<p>我们站的流量在短短4个月内增添了3倍，告白红利也翻倍了。很乐意失掉易闻公司的服务，但愿易闻在搜刮引擎营销的路途上越走越好！我们站的流量在短短4个月内增添了3倍，告白红利也翻倍了。很乐意失掉易闻公司的服务，但愿易闻在搜刮引擎营销的路途上越走越好！</p>
</div>
<divclass="titletitle_width3">
<h1class="h1_width3">八个字长度的题目</h1>
</div>
<divclass="boxbox_width3">
<p>我们站的流量在短短4个月内增添了3倍，告白红利也翻倍了。很乐意失掉易闻公司的服务，但愿易闻在搜刮引擎营销的路途上越走越好！我们站的流量在短短4个月内增添了3倍，告白红利也翻倍了。很乐意失掉易闻公司的服务，但愿易闻在搜刮引擎营销的路途上越走越好！我们站的流量在短短4个月内增添了3倍，告白红利也翻倍了。很乐意失掉易闻公司的服务，但愿易闻在搜刮引擎营销的路途上越走越好！</p>
</div>
</body>
</html>
扫瞄显现：

登录/注册后可看大图

在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

只看该作者 · 发表于 2015-1-18 06:43:27

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-1-22 07:52:09

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-1-30 23:58:22

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-6 17:32:38

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-2-17 21:07:08

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-5 23:26:35

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-3-12 16:36:47

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-3-20 00:32:53

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 带来一篇CSS计划制造长度高度纷歧样的网页区块

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子