无懈可击的web设计笔记

1. 灵活的文字
font-size 属性值分为四类:
1.长度单位 em ex px , in cm mm pt pc
2.相对大小关键字 larger smaller
3.百分比值
4.绝对大小关键字 xx-small x-small small medium large x-large xx-large 比例因子1.5
使用关键字/百分比组合
2.可伸缩的导航栏
提供能够适应任意大小文字或者任意数量内容的站点导航栏
ul li a
滑动门实现圆角
3.可扩展的行
不要把高度固定死,要让横向延伸的页面组件在纵向也能自由扩展
当浮动一个具有背景色的对象内部的对象时,同样也浮动这个对象,即可恢复显示其背景色


一个被浮动的框式组件必须要具有明确的宽度值。如果不指定,那么这一行的宽度将会仅仅和其内容所要求的宽度值一样(即浮动元素的宽度由内容撑开)
4.巧妙的浮动
反向浮动
父级加浮动可清除浮动 
5.牢固的方框
宽度固定,两张图片
宽度不固定,四张图片
6.页面在缺失图片或CSS的情况下仍然易读
7.可转换的表格
8.流动的布局

能自由扩大和缩小的页面布局
使用float属性来构建多栏布局,浮动影响要能够在整页宽的页脚上被清除
从列宽中减去gutter的百分比宽度值,或者增加一个额外的<div>来在列宽以外单独设置padding的值
给布局设置min-width和max-width来防止布局尺寸过大或过小。不必在意IE/Win不支持这种功能
尝试用“滑动伪分栏”(Sliding Faux Columns)的方法,通过使边框和背景一直延伸到页脚,来实现看上去高度相等(但很灵活)的栏


9.构成一个整体
将无懈可击的观念应用于完整页面的设计
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值