Web页面切图和CSS注意事项(转载)

3年前 (2021-08-28)阅读429回复0
空施娜
空施娜
  • 管理员
  • 发消息
  • 注册排名2867
  • 经验值45
  • 级别管理员
  • 主题9
  • 回复0
楼主
印刷厂直印加工●彩页1000张只需要69元●名片5元每盒-更多产品印刷报价➦联系电话:138-1621-1622(微信同号)

  一、Web页面切图

  1) Web页面的切图类型可以归纳为背景(bg)、列表项目的符号(li)、内容中插入的图片(pic)、按钮(btn)、图标等几种形式(ico)ID嵌套样式问题。

  2) 建议把用CSS背景加载的图片拼合成一张图片ID嵌套样式问题。这样可减少对服务器的请求。从而提升页面加载速度。

  3) 除页面头部大图保存格式为JPG外ID嵌套样式问题,其他图片一律采用gif格式

  二、CSS相关事项:

  1) 所有的xhtml代码小写ID嵌套样式问题。

  2) 每个标签都要有开始和结束,且要有正确的层次,没有结束标签的,标签后加上"/"ID嵌套样式问题。 如:img /、br /

  3) 所有的属性必须用引号""括起来ID嵌套样式问题。

  4) 文档类型必须声明,禁止文档类型乱用ID嵌套样式问题。

  5) 所有和特殊符号用编码表示ID嵌套样式问题。

  6) 必须正确使用代码缩进,缩进时使用tab(键盘中的TAB键),禁止无缩进、乱缩进,禁止使用空格缩进ID嵌套样式问题。

  7) CSS加载的背景图片要预定义宽度和高度,路径采用绝对路径可以直接从访问者计算机缓存中加载,提高页面加载速度ID嵌套样式问题。

  8) 要尽可能做到表现与结构完全分离,代码中不涉及到表现元素,如style、font、bgColor、border、bID嵌套样式问题。

  9) h1到h6的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询ID嵌套样式问题。采用继承方式,否则个性定义就会失效。

  10) Font的缩写为:样式 粗细 大小 行高 字体 (font:italic bold 12px/30px “simsun”)ID嵌套样式问题。

  11) class和id选择器,id只能在同一页面中不能重复适用ID嵌套样式问题。

  12) 给页面的布局和重要的区块加上注释ID嵌套样式问题。如:!—header --

  13) 给图片加上alt标签,利于搜索引擎的查询ID嵌套样式问题。

  14) 所有的标签必须进行合理的嵌套ID嵌套样式问题。

  15) 页面的实现过程中出现的问题是有规律的几种:3个像素的bug、双倍浮动空白边距、文字溢出bugID嵌套样式问题。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css的hack应该尽量避免采用。

  16) 尽可能的合理的去用继承,好处是代码结构清晰,方便其他修改人员辨认页面结构、减少css的代码的重复定义ID嵌套样式问题。

  17) 网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行,把版式破坏,这样我们就要参考以下样式:word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值ID嵌套样式问题。

  18) 文字过长要出现省略号样式如下:

  white-space: nowrap; text-overflow:ellipsis; overflow:hidden;

  19) 一个完整的表单应该包括:

  fieldset

  legend/legend

  label/label

  input /

  /fieldset

  20) 页面上的列表元素除了ul ol外,我们还可以采用dl dt dd组合ID嵌套样式问题。

  21) 合理采用多重样式定义可以有效的增加样式的重用性ID嵌套样式问题。

  22) 我们要清楚那些标签是块状元素和内联元素ID嵌套样式问题。一般我们可以把css元素分为block(块状)和inline(内联)。熟悉这些元素属性有利于我们深入理解css。

  23) 按照推荐Css属性书写顺序:

  显示属性:

  display || visibility

  list-style : list-style-type || list-style-position || list-style-image

  position

  top || right || bottom || left

  z-index

  clear

  float

  自身属性:

  width

  max-width || min-width

  height

  max-height || min-height

  overflow || clip

  margin : margin-top || margin-right || margin-bottom || margin-left

  padding : padding-top || padding-right || padding-bottom || padding-left

  outline : outline-color || outline-style || outline-width

  border

  background : background-color || background-image || background-repeat || background-attachment || background-position

  文本属性:

  color

  font : font-style || font-variant || font-weight || font-size || line-height || font-family

  font : caption | icon | menu | message-box | small-caption | status-bar

  text-overflow

  text-align

  text-indent

  line-height

  white-space

  vertical-align

  cursor

021yin.com

0
0
收藏0
回帖

Web页面切图和CSS注意事项(转载) 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息