浙江杭州

web前端切图方法div css3技巧资源整理笔记

系统分类: 网页特效 - div+css 2016-06-07

人气14504

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

2012年初接触web前端,简单做下总结,首先了解下web带来的问题

  • 和目前UI/交互的要求相比浏览器引擎给我们接囗的确太低级了————交互的复杂度

  • 浏览器厂商不统一——兼容问题多

  • 性能

  • 代码可维护性

  • HTML5 css3新技术多——学习成本不低

  • 未知问题——坑多

面对这些问题,一开始我们只能在未知中试错,知道错误的方案才能更容易寻找正确的解决问题思路 多年来,可看到PC端和移动web在业界不断趋向于成熟,各种框架和解决方案不断的涌现让移动端开发不再是个噩梦。

这几天把想到的一点经验先罗列出来,后续会持续更新,这篇文章可以给刚接触PC端或者webapp开发的同学带来帮助,任何疑问欢迎留言探讨~



目录更新于20160607


  • CSS布局 -- 圣杯布局 & 双飞翼布局

  • Normalize.css ——CSS Reset的友好替代品

  • CSS 优化、提高性能的方法

  • CSS预处理——点击查看链接




CSS布局 -- 圣杯布局 & 双飞翼布局

按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。实现有些差别

<title>圣杯布局</title><style type="text/css">
    *{margin: 0;padding: 0;}
    body{min-width: 700px;}
    .header,
    .footer{ 
        border: 1px solid #333;
        background: #aaa;
        text-align: center;
    }
    .left,
    .middle,
    .right{ 
        position: relative;
        float: left;
        min-height: 130px;
    }
    .container{
        padding:0 220px 0 200px;
        overflow: hidden;
    }
    .left{
        margin-left: -100%;
        left: -200px;
        width: 200px;
        background: red;
    }
    .right{
        margin-left: -220px;
        right: -220px;
        width: 220px;
        background: green;
    }
    .middle{ 
        width: 100%;
        background: blue;
        word-break: break-all;

    }
    .footer{ 
        clear: both;
    }</style></head><body><div class="header">
    <h4>header</h4></div><div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        </p>
    </div>
    <div class="left">
    <h4>left</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>
    <div class="right">
    <h4>right</h4>
        <p>BBBBBBBBBBBBBB
        888888888888888888
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div></body>

听说双飞翼布局是玉伯大大提出来的,始于淘宝UED

如果把三栏布局比作一只大鸟,可以把main看成是鸟的身体,sub和extra则是鸟的翅膀。这个布局的实现思路是,先把最重要的身体部分放好,然后再将翅膀移动到适当的地方.

其实跟上边的圣杯布局差不多的,当然也可以改动一下(自己想想有哪些不同吧)

<title>双飞翼布局</title><style type="text/css">
    *{margin: 0;padding: 0;}
    body{min-width: 700px;}
    .header,
    .footer{ 
        border: 1px solid #333;
        background: #aaa;
        text-align: center;
    }
    .sub,
    .main,
    .extra{ 
        float: left;
        min-height: 130px;
    }
    .sub{
        margin-left: -100%;
        width: 200px;
        background: red;
    }
    .extra{
        margin-left: -220px;
        width: 220px;
        background: blue;
    }
    .main{ 
        width: 100%;
    }
    .main-inner{ 
        margin-left: 200px;
        margin-right: 220px;
        min-height: 130px;
        background: green;
        word-break: break-all;
    }
    .footer{ 
        clear: both;
    }</style></head><body><div class="header">
    <h4>header</h4></div>
    <div class="main">
    <div class="main-inner">
        <h4>main</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        </p>
        </div>
    </div> 
    <div class="sub">
    <h4>sub</h4>
        <p>oooooooooooooo
        0000000000000000
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>

      <div class="extra">
    <h4>extra</h4>
        <p>BBBBBBBBBBBBBB
        888888888888888888
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div></body>

Normalize.css ——CSS Reset的友好替代品



一个现代化的,HTML5就绪替代CSS重置


Normalize.css让浏览器渲染的所有元素更一致,并符合现代标准。它可以精确的目标只需要正火的样式。

来源地址:http://necolas.github.io/normalize.css/

我的备份下载:

normalize.css v4.1.1

CSS 优化、提高性能的方法

CSS Lint现有的一些规则
http://csslint.net/

  • 修复解析错误(Parsing errors should be fixed)

  • 避免使用多类选择符(Don't use adjoining classes)

IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确,参考IE6下的多类选择符一文。
  • 移除空的css规则(Remove empty rules)

这个规则不包含任何属性,类似:
.foo { }
空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
  • 正确使用display的属性(Use correct properties for a display)

由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
  • 不滥用浮动(Don't use too many floats)

虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。
  • 不滥用web字体(Don't use too many web fonts)

对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
  • 不声明过多的font-size(Don't use too may font-size declarations)

这是设计层面的问题,设计精良的页面不会有过多的font-size声明。
  • 不在选择符中使用ID标识符(Don't use IDs in selectors)

主要考虑到样式重用性以及与页面的耦合性。
  • 不给h1~h6元素定义过多的样式(Don't qualify headings)

全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。

  • 不重复定义h1~h6元素(Heading styles should only be defined once)

  • 值为0时不需要任何单位(Zero values don't need units)

  • 标准化各种浏览器前缀(Vendor prefixed properties should also have the standard)

通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:
.foo {-moz-border-radius: 5px;border-radius: 5px; }
  • 使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require all browser prefixes)

  • 避免让选择符看起来像正则表达式(Avoid selectors that look like regular expressions)

CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。
  • 遵守盒模型规则(Beware of broken box models)

http://www.zhihu.com/question/19886806这里有个回答的很全的

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

使用CSS缩写属性

去掉小数点前的“0”

如:font-size:0.8em 改成.8em

简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

  • 输入的时候少按一个shift键;

  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

  • 能良好区分JavaScript变量命名(JS变量命名是用“_”)

不要随意使用Id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

如.withdrawl 改成.is-withdrawl

常用的CSS命名规则

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

Id的命名:

1)页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center

(2)导航

导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

(3)功能

标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标籤页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

注意事项::

1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写,除非一看就明白的单词。

 

CSS样式表文件命名

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css


================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/art/uilearn-925.html 转载请务必加上该链接

评论功能关闭...(已有4 评论)