《
CSS设计制作长度高度不一样的网页区块》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334R2013.htm
.title { background:url(bg_title.gif) no-repeat top right; height:26px}
--> [
网站建设之]CSS设计制造长度高度不一样的网页区块
3.依据实际须要定义title背景的宽度和h1标题的宽度
2.定义题目部门,我们用h1标签,同样定义标题的背景和高度及其余款式.让图片从底部开端显示.
常常在网站上会发明如下图这样的常用组件模块,这也是我最近做的一个网站名目,CSS设计中选择器的巧妙使用,我把我的做法收拾出来与大家分享一下.
.title h1 { margin:0; padding:0; background:url(bg_title.gif) no-repeat left bottom; height:26px; line-height:26px; text-align:center,css设置最小height然后自适应; color:#000; font-weight:700}
每个区域模块的长度跟高度不一,用css怎么实现这种相似组件让其存在扩大性呢?
再看圆角的内容部分,切成两张图片,一张从右边圆角开始的足够大的图片(bg1.gif)
一张左边圆角细线图片(bg2.gif)
阅读显示：
1.定义内容区域的宽度、和背景图片(bg1.gif)。
2.定义左边圆角细线图片背景(bg2.gif)。咱们这里用p标签。
Tag：设计 设计
.box { background:url(bg1.gif) right bottom; margin-bottom:15px}
.box p { margin:0; padding:10px,CSS让网页里的提交按钮变得更漂亮; background:url(bg2.gif) no-repeat left bottom; line-height:20px;}
.box_width1 { width:300px}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN",CSS让网页提交input按钮与众不同; "
<,CSS让图片实现的透明效果;html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>,CSS让元素垂直居中的两种实现方法 ;网站常用组件的扩展性做法</title>
<style type="text/css">
<!--
* { font-size:12px}
.title { background:url(bg_title.gif) no-repeat top right; height:26px}
.title h1 { margin:0; padding:0; background:url(bg_title.gif) no-repeat left bottom; height:26px; line-height:26px; text-align:center; color:#000; font-weight:700}
.title_width1 { width:300px}
.h1_width1 { width:80px}
,CSS让元素垂直居中的两种实现方法.title_width2 { width:350px}
.h1_width2 { width:100px}
.title_width3 { width:400px}
.h1_width3 { width:140px}
.box { background:url(bg1.gif) right bottom; margin-bottom:15px}
.box p { margin:0; padding:10px; background:url(bg2.gif) no-repeat left bottom; line-height:20px;}
.box_width1 { width:300px}
.box_width2 { width:350px}
.box_width3 { width:400px}
-->
</style>
</head>
<body>
<div class="title title_width1">
<h1 class="h1_width1">四字标题</h1>
</div>
<div class="box box_width1">
<p>我们站的流量在短短4个月内增添了3倍，广告盈利也翻倍了。很愉快得到易闻公司的服务，盼望易闻在搜寻引擎营销的途径上越走越好！</p>
</div>
<div class="title title_width2">
<h1 class="h1_width2">六字标题标题</h1>
</div>,CSS解决文字环绕图片问题;
<div class="box box_width2">
<p>我们站的流量在短短4个月内增加了3倍，广告盈利也翻倍了。很高兴得到易闻公司的服务，希望易闻在搜索引擎营销的道路上越走越好！我们站的流量在短短4个月内增加了3倍，广告盈利也翻倍了。很高兴得到易闻公司的服务，希望易闻在搜索引擎营销的道路上越走越好！</p>
</div>
<div class="title title_width3">
<h1 class="h1_width3">八个字长度的标题</h1>
</div>
<div class="box box_width3">
,CSS规范 闭合浮动元素介绍; <p>我们站的流量在短短4个月内增加了3倍，广告盈利也翻倍了。很兴奋得到易闻公司的服务,CSS表现属性Display Inline-Block的深入理解，生机易闻在搜索引擎营销的道路上越走越好！我们站的流量在短短4个月内增长了3倍，广告盈利也翻倍了。很高兴得到易闻公司的服务，希望易闻在搜索引擎营销的道路上越走越好！我们站的流量在短短4个月内增加了3倍，广告盈利也翻倍了。很高兴得到易闻公司的服务，愿望易闻在搜索引擎营销的道路上越走越好！</p>
</div>
</body>
</html>
先看模块的title局部,先做一张足够区域的title背景图片,如下图:(bg_title.gif)
.title_width1 { width:300px}
.h1_width1 { width:80px}
实现原理同理title部分
全体示例代码：
1.定义title的背景和高度.让图片从右边开始显示.
(责任编辑：网站建设)
CSS设计制作长度高度不一样的网页区块相关文章