关于网页切图和DIC+CSS的问题

发布网友 发布时间：2022-05-12 20:51

我来回答

共6个回答

懂视网 时间：2022-05-13 01:13

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

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

3) 除页面头部大图保存格式为JPG外，其他图片一律采用gif格式

1) 所有的xhtml代码小写。

2) 每个标签都要有开始和结束，且要有正确的层次,没有结束标签的，标签后加上"/"。 如：、

3) 所有的属性必须用引号""括起来。

4) 文档类型必须声明，禁止文档类型乱用。

5) 所有<和&特殊符号用编码表示。

6) 必须正确使用代码缩进，缩进时使用tab(键盘中的TAB键)，禁止无缩进、乱缩进，禁止使用空格缩进。

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

8) 要尽可能做到表现与结构完全分离，代码中不涉及到表现元素，如style、font、bgColor、border、b。

9)

到

的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。采用继承方式，否则个性定义就会失效。

10) Font的缩写为：样式 粗细 大小 行高 字体 （font:italic bold 12px/30px “simsun”）。

11) class和id选择器，id只能在同一页面中不能重复适用。

12) 给页面的布局和重要的区块加上注释。如：

13) 给图片加上alt标签，利于搜索引擎的查询。

14) 所有的标签必须进行合理的嵌套。

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

16) 尽可能的合理的去用继承，好处是代码结构清晰，方便其他修改人员辨认页面结构、减少css的代码的重复定义。

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

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

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

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

20) 页面上的列表元素除了ul ol外，我们还可以采用dl dt dd组合。

21) 合理采用多重样式定义可以有效的增加样式的重用性。

22) 我们要清楚那些标签是块状元素和内联元素。一般我们可以把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

热心网友 时间：2022-05-12 22:21

可以调啊，一个一个跟你说你提的问题吧，
1，鼠标点击字体 字体会变颜色，是加了A链接，这个你不用做样式也是一样，
2，下拉式菜单，搜索框，按钮，要是样式的话都可以用css来控制，其实控制很简单，主要的就两点，一个就是你要找到你要定制样式的标签，你可以在标签上加class 或者是id 来找到他，然后就是用css控制他。
3，div+css，说准确一点网页上的东西并不一定要用div 网页上有很多元素，比方说一行文字，你就用P标签，表格就用表格来写，导航就用ul来写，不是非得用div，你要看这个是什么元素，用什么标签来写。

热心网友 时间：2022-05-12 23:39

①鼠标点字体，字体会变颜色。或者出现下划杠。
鼠标点击事件需要很简单的javascript代码，只是使用CSS2样式根本不可能实现。
你要的应该是鼠标滑过事件吧？，可以用hover伪类来定义的。

②主管说用PS CS5切图自动就会生成CCS样式，这个可以调吗？
photoshop导出html？没听说过，不太可能。fireworks cs5切片导出html倒是有可能的。

你说的转行做美工，不知道之前是做的什么？
前端开发是可以很快入门，不过很不靠谱的。
我在公司，啥事不干，前端学习2个多月才正式搞页面了，学习速度已经算是神快了。
想要一个星期就开搞？纯属瞎掰。

你要的效果都很简单，如果找个专业的来做，顶死用不了一个小时，但是要学习前端技术能够用得顺手，你需要更多的时间。

热心网友 时间：2022-05-13 01:13

第一点可以帮你解答， 鼠标点字体，字体会变颜色。或者出现下划杠。的css写法是 a:hover{ text-decoration:underline; color:#333;}
另外，找外包也是不错的方法，p2h.cn提供专业的网页切图服务

热心网友 时间：2022-05-13 03:05

一楼我三个星期就自学干活了

热心网友 时间：2022-05-13 05:13

ps可直接导出div css的，先切片，然后存储为Web格式，选保存类型为HTML和图象(* html)，设置选“其它”，再选切片，生成CSS就好了