手工SEO首页 DEDE教程 正文
在HTML中, 如果过你没有指定一个确定的宽度的话, 块级元素本身就会在垂直方向上延展. 想象一个无序清单. 这个清单会自己扩展来适应它所有的清单元素. 如果用户在他们的浏览器中增加了字体大小, 清单会在垂直方向上延展, 来适应变大的内容. 有时候, 感觉仅仅在垂直方向延展是非常局限的, 如果水平方向也能和垂直方向一样因为用户增加字体大小而自延展那就更好了.
概要
如果你用过Firefox 3 Beta的话, 你会发现它已经会自动这样处理了. 在Firefox 3增加大小不仅仅是增加字体大小. 它增加所有元素的大小. 这样看起来非常自然和漂亮. 但是尽管Firefox的市场份额在不断上涨, 但是我们还是不能指望Firefox的调整大小功能来达成用户需求.
我尝试着解释如何制作一个有以下特点的各方向延展box:
能在所有主流浏览器中工作.
在垂直和水平方向上延展.
用一个单独的背景图片.
这有些苛求, 特别是要使用背景图片. 它需要用到一种 CSS精灵技术(图片的不同区域用在不同的地方)和滑动门技术(依赖当前的大小显示不同长度的图片)的结合方法. 让box水平可延展
有一个简单的方法让box水平可延展: 用em来定义你的宽度. 例如:
.box {
width: 35em;
margin: 50px auto;
}
在这里margin属性只是为了举例, 让它水平居中并且总是和浏览器顶边有一定距离. 思考图片定位
在这个例子中, 这是个圆角box, 有点投影, 还有点内部阴影. 这就意味着这个box的四个角显然是不同的. 这里的挑战是图片是不能延展的.我们需要一种方法, 让四个不同的圆角图片分别应用到box的四个角上.
我们还需要接合它们让转变无明显界线, 我们还要尝试着用一个背景图片完成, 来让它尽可能生效.
下面是一张你关心的我们需要做什么的示意图, box将被拼接, 我把它们分开, 你就能看到所有的box了.
当在创建背景图片时, 要考虑大小, 你的背景图片越大, 在不破坏布局的情况下, 你就能延展的越大. 示例中的背景是700像素宽它能在4 - 5种字体大小下工作. 但是如果超过了这个尺寸, 它最终会分离开. 编写box
当然, 我们要用XHTML来尽可能的达成语义化. 这意味着不能使用额外的不放置内容而纯粹为了设计的标签. 不幸的是, 用四个box来拼接一个box时, 这没办法完成.
它是这样完成的:
<div class="box">
<div class="topleft">
<div class="topright">
<div>
CONTENT GOES HERE
</div>
</div>
</div>
<div class="bottomleft">
<div class="bottomright">
</div>
</div>
</div> 为box设定样式
这里是box中的四个区域:
.box div.topleft {
display: block;
background: url("images/box-bg.png") top left no-repeat white;
padding: 2.0em 0em 0em 2.0em;
}
.box div.topright {
display: block;
background: url("images/box-bg.png") top right no-repeat white;
padding: 2.0em;
margin: -2.0em 0 0 2.0em;
}
.box div.bottomleft {
display: block;
height: 45px;
margin-top: -2.0em;
background: url("images/box-bg.png") bottom left no-repeat white;
}
.box div.bottomright {
display: block;
background: url("images/box-bg.png") bottom right no-repeat white;
height: 45px;
margin-left: 3.0em;
}
注意, 负外补丁是将应用到父级元素上的内补丁值填满的必要方法. 它可以很好的解决用上内补丁的方法. 让文字包含在box内部, 同时注意, 我把底部div的高度用像素定义了, 目的是为了让它们保持短小并且不延展.
上一篇:扁平化设计的iPhone5 PSD样机|APP Psd设计素材
相关文章
- 2020-07-23 扁平化设计的iPhone5 PSD样机|APP Psd设计素材...
- 2020-07-23 eBay的iphone和android APP界面扁平化设计欣赏...
- 2020-07-23 简约的医疗APP应用程序扁平化APP设计案例欣赏...
- 2020-07-23 16个免费的iOS 7的GUI套件和模板【PSD源文件】...
- 2020-07-23 FlatSkeuomorphicUI套件免费下载\UI设计素材站...
- 2020-07-23 分享6个最实用最优秀的APP应用软件...
- 2020-07-07 DEDEcms终极SEO优化教程...
- 2020-06-16 简单介绍Web Developer插件制作网页...
- 2020-05-22 PSCS3融图教程...
- 2020-05-18 易配货APP界面设计案例赏析-安卓版APP设计规范...
- 2020-05-18 优秀的APP界面设计欣赏课堂—运动类APP设计...
- 2020-05-18 PS快速导出@3x、@2x、@1x格式的iOS切图神器-Retiniz...
- 2020-05-18 国外优秀的图标字体酷站推荐-smarticons...
- 2020-05-18 手机屏幕分辨率术语:逻辑分辨率和物理分辨率...
- 2020-05-18 移动APP设计视觉规范通用版—360云盘设计规范...
- 2020-05-18 Android APPUI界面设计灵感收藏地-APKUI...
- 2020-05-18 APP产品交互设计八项原则以及交互设计干货分享...
- 2020-05-18 iOS界面设计六原则和Android界面设计三大分类...
- 2020-05-18 优秀移动APP设计师之APP整体构图速成法...
- 2020-05-18 天使:SEO优化快速排名技术...
- 2019-08-15 湖南网站优化方案...
- 2019-08-15 永济网:网站优化内链该怎么...
- 2019-08-15 华罡seo:网站首页一直不收录...
- 2019-08-19 上海seo快速网站优化是什么...
- 2019-08-20 8月18只基金延长募集 募集失败...
- 2019-08-21 东莞关键词策略seo网站关键词...
- 2019-08-22 谈谈2018seo行业前景和未来发展...
- 2019-08-24 英特尔极限大师杯赛将在北京...
- 2019-08-24 河洛群侠传全支线任务教程攻...
- 2019-08-26 贵阳SEO公司有些人不知道的...
- 2019-08-27 百度之前发布的算法一直有效...
- 2019-08-28 荒野行动网易大神礼包在哪领...
- 2019-08-29 没程序没美工中小微企业应当...
- 2019-08-29 丰田全新RAV4特别版曝光 主打运...
- 2019-08-29 上海网络营销培训主要学什么...
- 2019-08-30 蓝盾助力800亿大工程 号称“新...
- 2019-08-31 几名新生代农民工的技术成才...
- 2019-08-31 唐山网站seo排行精华...
- 2019-09-01 YNET.com北青网...
- 2019-09-03 沈阳优化营商环境打出“组合...
- 2019-09-04 三亚优化崖州湾科技城定制公...
- 2019-09-05 《东方炮弹》公开全新游戏动...
- 2019-09-06 2019内蒙古遴选考试笔试题每日...
- 2019-09-06 视频|教科书式示范!4岁男童与...
- 2019-09-07 奥迪8月全球销量15万辆 中国市...
- 2019-09-08 品牌房企论道2019年房地产营销...
- 2019-09-11 超越同行的seo网站内容优化操...
- 2019-09-15 天津公布最新一批环境违法典...
- 2019-09-21 安徽铜陵:联合国粮农组织考...
- 2019-09-24 小米集团9月23日回购1074万股股...
- 200℃ 织梦Dede如何删除管理员admin...
- 200℃ 关于discuzX3.1存在的问题及修复...
- 200℃ 在Dedecms下面生成Google Sitemap的...
- 200℃ DEDECMS教程:后台验证码图片不...
- 200℃ CSS 浏览器兼容问题整理大全...
- 200℃ CSS3教程(1):什么是CSS3...
- 200℃ W3C标准以及XHTML和HTML...
- 200℃ DEDECMS安全设置 执行php脚本限制...
- 200℃ 使用正则配合程序完美解决自...
- 200℃ DEDECMS 5.7 将data目录迁移后,网...
- 200℃ jquery加载页面的方法(页面加载...
- 200℃ 修改好的jquery滚动字幕效果实...
- 200℃ 浅析织梦(dedecms)三个最重要的...
- 200℃ 织梦cms教程:实现按键盘方向...
- 200℃ 织梦DedeCMS添加新变量出现“...
- 200℃ dedecms5.7实现迅雷下载链接...
- 200℃ 去除dedecms织梦升级友情链接增...
- 200℃ 帝国cms 二级域名绑定栏目的最...
- 200℃ GoDaddy域名转移过户详细教程...
- 200℃ 织梦CMS实现复制文章加出处信...
- 200℃ CSS教程:网页字体的设置和控制...
- 200℃ zblog模板文件说明...
- 200℃ CSS常用属性缩写实例...
- 200℃ PHP执行zip与rar解压缩方法实现...
- 200℃ dedecms相关文章中实现orderby参数...
- 200℃ dedecms织梦教程:发布文章时输...
- 200℃ 修改织梦DedeCMS注册邮件发送通...
- 200℃ 织梦DedeCMS在软件列表页中调用...
- 200℃ 使用503状态码:防止网页被删...
- 200℃ 妙用PS极坐标滤镜打造漂亮水晶...
- 200℃ dede织梦5.7如何在首页调用栏目
- 200℃ 织梦调用指定顶级栏目或当前
- 200℃ Internet 连接防火墙 (ICF) / Inte
- 200℃ DEDECMS必备BANNER幻灯片广告插件
- 200℃ 织梦(DEDECMS)系统搬家终极攻略
- 200℃ 如何设计企业APP或设计企业A
- 200℃ Web标准:文档类型和网页浏览
- 200℃ APP设计案例与教程-Panli代购网
- 200℃ Web标准:关于web标准的一些初学
- 200℃ HTML5+lufylegend实现游戏中的卷轴
- 200℃ dedecms网页模板怎么制作
- 200℃ dedecms添加文章提示/templets/pl
- 200℃ Discuz! 的防水墙使用教程(基础
- 200℃ windows2008下mysqld-nt.exe 占cpu高的
- 200℃ CMD下的网络安全配置命令
- 200℃ Ubuntu linux 安装 PHP5.3.0的命令
- 200℃ nginx学习总结五(nginx反向代理
- 200℃ DedeCMS错误(PHP 5.3 and above) Plea
- 200℃ dedecms文章标题栏突破60个字符
- 200℃ Nginx服务器的SSL证书配置以及对
- 200℃ Linux知识点小结
- 200℃ textarea属性设置详解
- 200℃ jQuery效果 slideToggle() 方法(在隐
- 200℃ JS Range HTML文档/文字内容选中、
- 200℃ MySQL学习笔记-数据库概述及M
- 199℃ MySQL故障got error 127 when reading
- 199℃ 10个有趣的Javascript和CSS库
- 199℃ 必须勾选同意才能提交表单的
- 199℃ 网站权重和网站的关系
- 199℃ DedeCMS系统管理员帐号密码忘记
- 标签列表
-