网站前端 div+css设计
Jan
4
勾选后背景变色的样式:
<html>
<head>
<script>
function chaCloor(field){
var pig = field.checked;
pig?field.nextSibling.style.backgroundColor="yellow":field.nextSibling.style.backgroundColor="#fff";
}
</script>
<style>
.checkbox {
background-Color:expression(this.checked?'yellow':'buttonface');
}
</style>
</head>
<body >
<div>
<input type="checkbox" onClick="chaCloor(this)"><span>选项1</span>
<input type="checkbox" onClick="chaCloor(this)"><span>选项2</span>
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</body>
</html>
预览效果
<html>
<head>
<script>
function chaCloor(field){
var pig = field.checked;
pig?field.nextSibling.style.backgroundColor="yellow":field.nextSibling.style.backgroundColor="#fff";
}
</script>
<style>
.checkbox {
background-Color:expression(this.checked?'yellow':'buttonface');
}
</style>
</head>
<body >
<div>
<input type="checkbox" onClick="chaCloor(this)"><span>选项1</span>
<input type="checkbox" onClick="chaCloor(this)"><span>选项2</span>
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</body>
</html>
预览效果
Sep
16
有些准则在很多设计师和工程师的头脑里是混乱的，比如web标准、w3c标准、div+css、整体布局和排版等。
1、div+css只限于网页布局，不等同与W3C标准。
2、table元素和它的相关元素是WEB标准里重要元素之一。
3、table在数据表类的排版中十分有效和实用。
4、“div+css布局”更多是指网页整体布局方式，注意“整体”二字。我们说避免使用table，更多是指避免使用table进行整体布局，而在网页里的具体排版是允许table存在，在某种程度上还会推荐使用。
Aug
21
讨论下：美工、设计师、平面设计师、前端设计师、前端开发工程师、程序员与交互开发人员的区别。
讨论范围是在WEB（可以简单理解是网站平台方面）。
大概说下一般参与一个网站建设的人员组合，首先，需要一个平面设计师，他是设计版面的，一般用PS，出PSD文件。然后是一个前端设计工程师，很多情况下，他们是做切图，写HTML和CSS的，当然更多的公司里，其实是前端开发工程师、程序员或交互开发人员（也可称交互开发工程师）兼任了这个工作。只懂做一般网站程序的我们习惯统称程序员，参与一些系统平台开发的，我们才习惯称之交互开发人员。
以上是目前行业大致现状。
那我们平时称呼的网页设计师是哪部分人呢？
我们相信很多人见到以及理解的网页设计师其实就是那个做平面图的平面设计师，可能这个平面设计师会切图，会做HTML。
为什么大多数网络公司找美工都是标明“懂网页三剑客”呢？
在一个WEB网站平台项目里，平面设计师是重点吗？
美工是最低级的吗？
前端设计和前段开发是两码事？
会做网页设计的平面设计师可以称作前端设计师了？
讨论范围是在WEB（可以简单理解是网站平台方面）。
大概说下一般参与一个网站建设的人员组合，首先，需要一个平面设计师，他是设计版面的，一般用PS，出PSD文件。然后是一个前端设计工程师，很多情况下，他们是做切图，写HTML和CSS的，当然更多的公司里，其实是前端开发工程师、程序员或交互开发人员（也可称交互开发工程师）兼任了这个工作。只懂做一般网站程序的我们习惯统称程序员，参与一些系统平台开发的，我们才习惯称之交互开发人员。
以上是目前行业大致现状。
那我们平时称呼的网页设计师是哪部分人呢？
我们相信很多人见到以及理解的网页设计师其实就是那个做平面图的平面设计师，可能这个平面设计师会切图，会做HTML。
为什么大多数网络公司找美工都是标明“懂网页三剑客”呢？
在一个WEB网站平台项目里，平面设计师是重点吗？
美工是最低级的吗？
前端设计和前段开发是两码事？
会做网页设计的平面设计师可以称作前端设计师了？
Aug
15
这个内容其实在很多网站都有提及，只是太详细和专业度问题，以致很多人不大领会，所以我等便做下整理，主要有几点：
1、正确使用div+css，网站代码更简洁，结构更清晰，这是有利于设计开发工作的，同时有利于搜索引擎优化。
2、div+css是表现和行为相分离的布局方式，在修改网站设计时更方便。
3、网站的视觉一致性更好，因为同一CSS样式表控制表现方式，整个网站细到边距和颜色，都可完全统一。
4、正常来说，div+css网站的载入速度更快。
5、网页体积减少，可减少主机流量的使用。
6、css具有丰富的样式变现。
dic+css的劣势主要是针对网站设计的初学者而言：
1、div+css相对表格定位更为复杂难学。
2、css样式表的一个错误有可能导致整个网站的表现异常。
3、div+css对不同浏览器的兼容问题，需要有经验的设计处理。
1、正确使用div+css，网站代码更简洁，结构更清晰，这是有利于设计开发工作的，同时有利于搜索引擎优化。
2、div+css是表现和行为相分离的布局方式，在修改网站设计时更方便。
3、网站的视觉一致性更好，因为同一CSS样式表控制表现方式，整个网站细到边距和颜色，都可完全统一。
4、正常来说，div+css网站的载入速度更快。
5、网页体积减少，可减少主机流量的使用。
6、css具有丰富的样式变现。
dic+css的劣势主要是针对网站设计的初学者而言：
1、div+css相对表格定位更为复杂难学。
2、css样式表的一个错误有可能导致整个网站的表现异常。
3、div+css对不同浏览器的兼容问题，需要有经验的设计处理。
Aug
14
碰到很多不懂div+css与搜索引擎关系的朋友和客户，所以今晚抽时间聊聊这个话题，直接简单，希望大家能很好吸收。
首先需修正一个一般人对div+css与搜索引擎关系的错误认识：
搜索引擎对于网页的收录和排序并不是以表格和div+css来衡量，所以我们经常笼统的说“网站采用了div+css布局，所以对搜索引擎优化很好”，其实是不正确的。div+css网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比html网站有更简洁的代码设计。div+css对搜索引擎优化与否取决于网页设计的专业水平而不是div+css本身，正确使用div+css才能使得您的网站获得搜索引擎的好评。
div+css是表现和行为相分离的布局方式，这就使得网页中正文部分更为突出明显，整体代码更为简洁，这是便于被搜索引擎采集收录的主要原因。
May
30
现在，我们使用优酷的视频时，通常会发现无法在本站全屏播放，当我们点击全屏功能按钮的时候是会跳转到优酷的站内地址。那我们如何避免这种情况，让用户能直接在我们自己站内全屏观看视频呢？
查找不少资料，这个方法比较常见，即在插入的时候使用这段代码：
<embed type="application/x-shockwave-flash" src="【这里填写youku等视频网站提供的FLASH地址】" id="movie_player" name="movie_player" bgcolor="#FFFFFF" quality="high" allowfullscreen="true" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999" pluginspage="http://www.macromedia.com/go/getflashplayer" width="600" height="480"></embed>
PS：经测试这并不适用于酷6。
查找不少资料，这个方法比较常见，即在插入的时候使用这段代码：
<embed type="application/x-shockwave-flash" src="【这里填写youku等视频网站提供的FLASH地址】" id="movie_player" name="movie_player" bgcolor="#FFFFFF" quality="high" allowfullscreen="true" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999" pluginspage="http://www.macromedia.com/go/getflashplayer" width="600" height="480"></embed>
PS：经测试这并不适用于酷6。
