Categories

2011/12/5

CSS 布局口诀


From Evernote:

CSS 布局口诀

Clipped from: http://marssuburbs.iteye.com/blog/1203041
如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?

一、IE边框若显若无,须注意,定是高度设置已忘记;

二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

三、三像素文本慢移不必慌,高度设置帮你忙;

四、兼容各个浏览须注意,默认设置行高可能是杀手;

五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

九、IE浮动双边距,请用display:inline拘。

十、列表横向排版,列表代码须紧靠,空隙自消须铭记。


=eean
overflow解决float浮动后高度自适应问题
overflow:auto; zoom:1;
overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决。

<转>CSS命名规范大全


From Evernote:

<转>CSS命名规范大全

Clipped from: http://jennycn.iteye.com/blog/1207732
一.文件命名规范

样式文件命名
引用
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css


CSS ID 的命名
引用
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
页脚:footer
版权:copyright
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1content
菜单容量: menucontainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current


网站常用中英文对照表
引用
网站导航 Site Map
公司简介 Profile or Company Profile or Company
公司设备 Equipment Equipment
公司荣誉 Glories Glories
企业文化 Culture Culture
产品展示 Product Product
资质认证 Quality Certification
企业规模 Scale Scale
营销网络 Sales Network
组织机构 organization organization
合作加盟 Join In Cooperation
技术力量 Technology Technology
经理致辞 Manager`s oration
发展历程 Development History
工程案例 Engineering Projects
业务范围 Business Scope
分支机构 Branches
供求信息 Supply & Demand
经营理念 Operation Principle
产品销售 Sales Sales
联系我们 Contact Us Contact Us
信息发布 Information Information
返回首页 Homepage Homepage
产品定购 order order
分类浏览 Browse By Category
电子商务 E-business
公司实力 Strength Strength
版权所有 Copy Right
友情连结 Hot Link
应用领域 Application Fields
人力资源 Human Resource Hr
领导致辞 Leader`s oration
企业资质 Enterprise Qualification
行业新闻 Trade News
行业动态 Trends
客户留言 Customer Message
客户服务 Customer Service
新闻动态 News & Trends
公司名称 Company Name
销售热线 Sales Hot-Line
联系人 Contact Person
您的要求 Your Requirements
建设中 In Construction
证书 Certificate Certificate
地址 ADD Add
邮编 Postal Code Zipcode
电话 TEL Tel
传真 FAX Fax
产品名称 Product Name
产品说明 Description Description
价格 Price
品牌 Brand
规格 Specification
尺寸 Size
生产厂家 Manufacuturer Manufacturer
型号 Model
产品标号 Item No.
技术指标 Technique Data
产品描述 Description
产地 Production Place
销售信息 Sales Information
用途 Application
论坛 Forum
在线订购 On-line order
招商 Enterprise-establishing
招标 Bid Inviting
综述 General
业绩 Achievements
招聘 Join Us
求贤纳士 Join Us
大事 Great Event
动态 Trends
服务 Service
投资 Investment
行业 Industry
规划 Programming
环境 Environment
发送 Delivery
提交 Submit
重写 Reset
登录 Enter
注册 Login
中国企业网技术支持 Powered By Ce.Net.Cn
社区 Community
业务介绍 Business Introduction
在线调查 Online Inquiry Inquiry
下载中心 Download
会员登陆 Member Entrance
意见反馈 Feedback
常见问题 FAQ
中心概况 General Profile
教育培训 Education & Training
游乐园 Amusement Park
在线交流 Online Communication
专题报道 Special Report


  常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如"搜索框"则应命名为"searchInput"、"搜索图标"命名这"searchIcon"、"搜索按钮"命名为 "searchBtn"……


一. 常规书写规范及方法

  1. 选择DOCTYPE:

  XHTML 1.0 提供了三种DTD声明可供选择:

  过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

  2. 指定语言及字符集:

  为文档指定语言:

  <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

  为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:
  常用的语言定义:

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
  标准的XML文档语言定义:
  <?xml version="1.0″ encoding=" utf-8″?>
  针对老版本的浏览器的语言定义:
  <meta http-equiv="Content-Language" content=" utf-8″ />
  为提高字符集,建议采用"utf-8"。

  3. 调用样式表:

  外部样式表调用:

  页面内嵌法:就是将样式表直接写在页面代码的head区。如:

  <style type="text/css"><!– body { background : white ; color : black ; } –> </style>
  外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

  <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

  在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

  4、选用恰当的元素:

  根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span;

  避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

  尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;

  5、派生选择器:

  可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:

  .mainMenu ul li {background:url(images/bg.gif;)}

  6、辅助图片用背影图处理:

  这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:

  #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

  7、结构与样式分离:

  在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。

  8、文档的结构化书写:

  页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:

  <div id="mainMenu">
  <ul>
  <li><a href="#" >首页</a></li>
  <li><a href="#" >介绍</a></li>
  <li><a href="#" >服务</a></li>
  </ul>
  </div>

  
  #mainMenu {
  width:100%;
  height:30px;
  background:url(images/mainMenu_bg.jpg) repeat-x;
  }
  #mainMenu ul li {
  float:left;
  line-height:30px;
  margin-right:1px;
  cursor:pointer;
  }
  

  9、鼠标手势:

  在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为"手形"时,则将"hand"换为"pointer",即"cursor:pointer;


2011年最新使用CSS3实现各种独特悬浮效果的教程


From Evernote:

2011年最新使用CSS3实现各种独特悬浮效果的教程

Clipped from: http://www.gbin1.com/technology/css/20111103original-hover-effects-with-css3/index.html
CSS3的功能非常强大,这个毋庸置疑。在这篇教程中我们将使用一些独特的方式来实现一些特效。我们使用CSS3的transition属性来创建图片缩略图的悬浮效果。当鼠标悬浮在缩略图上,我们将显示一些图片说明,没一个演示中我们使用一种独特的方式。

在线演示  在线下载

友情提示:因为使用CSS3,所以大家请使用支持CSS3的现代浏览器比如,Safari来查看演示,否则,你看到的所有的演示的行为都一样。

HTML

首先我们构建一个view的容器,然后将需要的元素都放入view,如下

<div class="view">
     <img src="image.gif" />
     <div class="mask">
     <h2>Title</h2>
     <p>Your Text</p>
         <a href="#" class="info">Read More</a>
     </div>
</div>

CSS

以下我们定义了所有演示中共同使用的CSS定义:
.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}
以上CSS和HTML定义完成后,我们进入正题,我们将使用CSS3定义每一个演示不同的展示行为。

演示1

添加一个class定义view-first,这里我们将结合view定义来产生特效,加入HTML标签中。 类似这个定义,以下的其它演示将使用view-second,view-third, view-four来依次定义。

<div class="view view-first">
     
</div>

以下是第一个例子中transition的基本CSS3定义:

.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}


下面我们将介绍核心代码。当你将鼠标悬浮在图片上方时,你可以使用delay属性来模拟简单动画效果。这个例子中我们没有在正常class定义中加入transition-delay, 而是在hover中加入定义。这样当鼠标移出时,延缓效果就会被执行。

.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

 

演示2

2011年最新使用CSS3实现各种独特悬浮效果的教程

第二演示我中我们将加入特别的view-second定义。并且修改代码如下:

<div class="view view-second">
    <img src="images/5.jpg" />
    <div class="mask"></div>
    <div class="content">
        <h2>Hover Style #2</h2>
        <p>Some description</p>
        <a href="#" class="info">Read More</a>
    </div>
</div>


这里我们将定义mask的class来满足我们需求,我们将应用tranform属性来产生一个方形。如下:

.view-second img {
    transition: all 0.2s ease-in;
}
.view-second .mask {
    background-color: rgba(115,146,184, 0.7);
    width: 300px;
    padding: 60px;
    height: 300px;
    opacity: 0;
    transform: translate(265px, 145px) rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);
    transition: all 0.2s ease-in-out;
}
.view-second p {
    transform: translate(-200px, 200px);
    transition: all 0.2s ease-in-out;
}
.view-second a.info {
    transform: translate(0px, 100px);
    transition: all 0.2s 0.1s ease-in-out;
}


这里我们使用translate 变形方式来移动我们的元素。 并且让mask旋转。这样descrption中的信息每一个都会延缓一会儿。

.view-second:hover .mask {
    opacity:1;
    transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
    transform: translate(0px,0px);
    transition-delay: 0.3s;
}
.view-second:hover p {
    transform: translate(0px,0px);
    transition-delay: 0.4s;
}
.view-second:hover a.info {
    transform: translate(0px,0px);
    transition-delay: 0.5s;
}

 

演示3

这个演示中,我们将使用translate和roate变形方式来显示我们的内容:

.view-third img {
    transition: all 0.2s ease-in;
}
.view-third .mask {
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transform: translate(460px, -100px) rotate(180deg);
    transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view-third p {
    transform: translateX(300px) rotate(90deg);
    transition: all 0.2s ease-in-out;
}
.view-third a.info {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}


这里有很简单的指导来应用于悬浮。我们将通过使用transition-delay来使description元素出现的逆向过程来展示。

.view-third:hover .mask {
    opacity:1;
    transition-delay: 0s;
    transform: translate(0px, 0px);
}
.view-third:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.5s;
}
.view-third:hover p    {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view-third:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.3s;
}

 

演示4

第四个演示中,我们将执行一个旋转的缩放效果。使用scale变形来实现。如下:

.view-fourth img {
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view-fourth .mask {
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s ease-in;
    border-radius: 0px;
}
.view-fourth h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
}
.view-fourth p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}


这里有简单说明来实现效果,使用CSS3你什么都可以实现 , :)

.view-fourth:hover .mask {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}
.view-fourth:hover img       {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

 

演示5

第五个演示中,我们使用translate及其ease-in-out方式来从左边幻灯展示内容

.view-fifth img {
    transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
    background-color: rgba(146,96,91,0.3);
    transform: translateX(-300px);
    opacity: 1;
    transition: all 0.4s ease-in-out;
}
.view-fifth h2{
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}


这个悬浮效果将让图片从右边飞出,description内容从左边进入

.view-fifth:hover .mask {
    transform: translateX(0px);
}
.view-fifth:hover img {
    transform: translateX(300px);
    transition-delay: 0.1s;
}
.view-fifth:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}

 

演示6

这个演示中我们将让description内容从正前方出来,缩小到原来大小。信息按钮将从低端显示

.view-sixth img {
    transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
    background-color: rgba(146,96,91,0.5);
    opacity:0;
    transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
    opacity:0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
    opacity:0;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
    opacity:0;
    transform: translateY(100px);
    transition: all 0.3s ease-in-out 0.1s;
}


反向的transition将延迟以偏让显示过程流畅

.view-sixth:hover .mask {
    opacity:1;
    transition-delay: 0s;
}
.view-sixth:hover img {
    transition-delay: 0s;
}
.view-sixth:hover h2 {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}
.view-sixth:hover p {
    opacity:1;
    transform: scale(1);
    transition-delay: 0.2s;
}
.view-sixth:hover a.info {
    opacity:1;
    transform: translateY(0px);
    transition-delay: 0.3s;

}

 

演示7

这个演示将让图片旋转并且缩小。然后description内容将旋转出现。

.view-seventh img{
    transition: all 0.5s ease-out;
    opacity: 1;
}
.view-seventh .mask {
    background-color: rgba(77,44,35,0.5);
    transform: rotate(0deg) scale(1);
    opacity: 0;
    transition: all 0.3s ease-out;
    transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}
.view-seventh p {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out;
}


悬浮时我们为description元素添加一个延迟。这将会先显示旋转图片,然后description信息会从图片中出现。在逆向变化中,所有元素都立刻出现,我们可以看到图片复原。

.view-seventh:hover img{
    transform: rotate(720deg) scale(0);
    opacity: 0;
}
.view-seventh:hover .mask {
    opacity: 1;
    transform: translateY(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view-seventh:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.7s;
}
.view-seventh:hover p {
    transform: translateY(0px);
    transition-delay: 0.6s;
}
.view-seventh:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.5s;
}

 

演示8

 

.view-eighth .mask {
    background-color: rgba(255, 255, 255, 0.7);
    top: -200px;
    opacity: 0;
    transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
    color: #333;
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out 0.3s;
}

我们添加动画到mask元素并且定义合适的延迟给description元素

.view-eighth:hover .mask {
    opacity: 1;
    top: 0px;
    transition-delay: 0s;
    animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.4s;
}
.view-eighth:hover p {
    transform: translateY(0px);
    transition-delay: 0.2s;
}
.view-eighth:hover a.info {
    transform: translateY(0px);
    transition-delay: 0s;
}

 

演示9

这个演示中我们使用俩个mask元素来实现幻灯右下和左上进入效果

<div class="view view-ninth">
    <img src="images/11.jpg" />
    <div class="mask mask-1"></div>
    <div class="mask mask-2"></div>
    <div class="content">
        <h2>Hover Style #9</h2>
        <p>Some Text</p>
        <a href="#" class="info">Read More</a>
    </div>
</div>


俩个mask将使用不同的transition和tranform。将一个设置到顶端,另外一个设置到底端。

.view-ninth .mask-1,
.view-ninth .mask-2{
    background-color: rgba(0,0,0,0.5);
    height: 361px;
    width: 361px;
    background: rgba(119,0,36,0.5);
    opacity: 1;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
    left: auto;
    right: 0px;
    transform: rotate(56.5deg) translateX(-180px);
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
    top: auto;
    bottom: 0px;
    transform: rotate(56.5deg) translateX(180px);
    transform-origin: 0% 100%;
}


内容将设置让它感觉出现于俩个mask接触的边缘

.view-ninth .content{
    background: rgba(0,0,0,0.9);
    height: 0px;
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    transform: rotate(-33.5deg) translate(-112px,166px);
    transform-origin: 0% 100%;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
    display: none;
}


悬浮时,我们将内容从开缝中取出,并且使mask接触边缘

.view-ninth:hover .content{
    height: 120px;
    width: 300px;
    opacity: 0.9;
    top: 40px;
    transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
    transition-delay: 0s;
}
.view-ninth:hover .mask-1{
    transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    transform: rotate(56.5deg) translateX(-1px);
}

 

演示10

最后一个演示,我们将放大图片,然后淡出,然后把description显示到前端。我们可以使用scale transform和opacity。

 

.view-tenth img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
    background-color: rgba(255, 231, 179, 0.3);
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}


悬浮时,我们简单的放大图片然后通过设置opacity为0实现淡出效果

.view-tenth:hover img {
    transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask {
    opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
    transform: scale(1);
    opacity: 1;
}

 

总结

希望大家能喜欢CSS3开发的巨大潜力。很快我们就可以避免使用javascript来实现复杂的特效了。希望这篇文章能给你web开发带来灵感

原文来自: 2011年最新使用CSS3实现各种独特悬浮效果的教程


网页那些事儿


From Evernote:

网页那些事儿

Clipped from: http://1035054540-qq-com.iteye.com/blog/1278473
    网页(web page),是网站中的一「页」,通常是HTML格式(文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等)。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。
简介
  网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站。
  所谓网站(Website),就是指在网际网路(因特网)上,根据一定的规则,使用HTML等工具制作的用於展示特定内容的相关网页的集合。简单地说,网站是一种通讯工具,就像布告栏一样,人们可以通过网站来发布自己想要公开的资讯(信息),或者利用网站来提供相关的网路服务(网络服务)。人们可以通过网页浏览器来访问网站,获取自己需要的资讯(信息)或者享受网路服务
  什么是网页?
  现在在你眼前,出现在显示器上的这个 " 东西 " ,就是一个网页。网页实际是一个文件,它存放在世界某个角落的的某一台计算机中,而这台计算机必须是与互联网相连的。网页经由网址( URL )来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。
  构成网页的元素:
  文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为:文字,就是网页的内容,图片,就是网页的美观。除此之外,网页的元素还包括动画、音乐、程序等等。
  在网页上点击鼠标右键,选择菜单中的 " 查看源文件 " ,就可以通过记事本看到网页的实际内容。可以看到,网页实际上只是一个纯文本文件,它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小),而浏览器则对这些标记进行解释并生成页面,于是就得到你现在所看到的画面。 为什么在源文件看不到任何图片? 网页文件中存放的只是图片的链接位置,而图片文件与网页文件是互相独立存放的,甚至可以不在同一台计算机上。
  网页的类型.
  通常我们看到的网页,都是以 htm 或 html 后缀结尾的文件,俗称 HTML文件。不同的后缀,分别代表不同类型的网页文件,例如以 CGI 、 ASP 、 PHP 、 JSP 甚至其他更多。
  网页的分类
  网页有多种分类,我们笼统意义上的分类是动态和静态的页面,原则上讲静态页面多通过网站设计软件来进行重新设计和更改,相对的比较滞后,当然现在有网站管理系统,也可以生成静态页面~我们称这种静态页面为伪静态。动态页面通过网页脚本与语言自动处理自动更新的页面,比方说贴吧,他就是通过网站服务器运行程序,自动处理信息,按照流程更新网页。
  关于网页:
  当你每次上网时,都会在历史纪录里留下纪录,保存在C盘主要文件的一个文档里,删除时只要右键删除就可以了。
[编辑本段]网页设计
  网页设计--------网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为"网络商标",也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。企业网站设计显得极为重要,下面是一些网站设计中应注意的原则。
  一、 明确建立网站的目标和用户需求
  Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径,因此我们必须明确设计站点的目的和用户需求,从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析,以"消费者(customer)"为中心,而不是以"美术"为中心进行设计规划。
  在设计规划时我们会考虑:
  建设网站的目的是什么?
  为谁提供服务和产品?
  企业能提供什么样的产品和服务?
  网站的目的消费者和受众的特点是什么?
  企业产品和服务适合什么样的表现方式(风格)?
  二、网页设计总体方案主题鲜明
  在目标明确的基础上,完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位,规划网站的组织结构。
  Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法,提供华丽的图像、闪烁的灯光、复杂的页面布置,甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。
  为了做到主题鲜明突出,要点明确,我们将按照客户的要求,以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣,办出网站的特点。
  Web站点主页应具备的基本成分包括: 页头:准确无误地标识你的站点和企业标志; Email地址:用来接收用户垂询; 联系信息:如普通邮件地址或电话; 版权信息:声明版权所有者等。
  充分利用已有信息,如客户手册.公共关系文档.技术手册和数据库等。
网页设计的要点
  网页设计的两大要点是:整体风格和色彩搭配。
  一、确定网站的整体风格
  网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。
  风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个"整体形象"包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子:我们觉得网易是平易近人的,迪斯尼是生动活泼的,IBM是专业严肃的。这些都是网站给人们留下的不同感受。
  在这里,我提供给大家一些参考经验:
  1.将你的标志logo,尽可能的放在每个页面上最突出的位置。
  2.突出你的标准色彩。
  3.总结一句能反映贵站精髓的宣传标语!
  4.相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!
  二、网页色彩的搭配
  无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。
  关于色彩的原理有许多,在此我们不可能一一阐述,大家可以看看相关设计书籍,有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。
  1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。
  2.用两种色彩。先选定一种色彩,然后选择它的对比色。
  3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
  在网页配色中,还要切记一些误区:
  1.不要将所有颜色都用到,尽量控制在三至五种色彩以内。
  2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。
  三、网页设计的工具
  1.dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具
  2.Frontpage 跟dreamweaver一样,不过个人感觉还是dreamweaver好。
  3.FLASH 网页需要画面流动时的首选择
  4.PS图象处理软件,一般网页都需要有图片相搭配,PS是款很强大的工具。
  5.FW跟PS一样都是图象处理软件,但FW偏向与对网页的处理。[个人喜欢PS]
  网站设计成功要素
  设计一个网站,应该考虑下列九条基本因素,这些因素对网站的成功与否有着重要影响。
  1.整体布局
  网站主页就好象是宣传栏或者店面——对访问者产生第一印象,都希望尽量给人留下好的印象,不是吗?
  一般来说,好的网站应该给人有这样的感觉:
  干净整洁;
  条理清楚;
  专业水准;
  引人入胜。
  网页应该力求抓住而不是淹没浏览者的注意力,过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从——离开是最好的选择,就象一些商店,播放震耳欲聋的发烧音乐,你要做的唯一决定就是离开那里,越快越好。
  2.信息
  无论商业站点还是个人主页,你必须给人们提供有一定价值的内容才能留住访问者,因为我们人类总是惟利是图,第一个问题总是:"对我有什么用处?"
  所以你必须提供某些有价值的东西,当然并不是说必须提供某些免费的物品——免费书籍、免费入场券、免费度假等,这些"有价值的东西"可以是:
  信息;
  娱乐;
  劝告;
  对一些问题的帮助;
  提供志趣相投者联络的机会;
  链接到有用的网页,等等。
  如果你经营的是企业网站,需要提供关于产品或服务的信息:
  容易理解;
  容易查询;
  容易订货。
  3.速度
  我们都知道,页面下载速度是网站留住访问者的关键因素,如果20—30秒还不能打开一个网页,一般人就会没有耐心。至少应该确保主页速度尽可能快,最好不要用大的图片。
  应该时时提醒自己,网站首页就象一个广告牌。当开车经过一个广告牌时,没有时间阅读上面的详细说明,也不可能赞赏其复杂的图案,广告标志从眼前一闪而过,必须在一瞬间给人留下印象。
  网**问者也是"一闪而过",保证你的首页简单而快速。网上有许多关于如何增加速度的文章——检查下载速度,放弃一切显著减慢主页速度的资料。
  4.图形和版面设计
  图形和版面设计关系到对主页的第一印象,图象应集中反映主页所期望传达的主要信息。
  如果有系列商业站点,你不必让过分显眼的动画出现在首页——但如果你的网站是游戏站点,动画将是必不可少的一部分内容。
  图片是影响网页下载速度的重要原因,根据经验,把每页全部内容控制在30K左右可以保证比较理想的下载时间。图象在6—8K之间为宜,每增加2K会延长1秒钟的下载时间。
  颜色也是影响网页的重要因素,不同的颜色对人的感觉有不同的影响,例如:
  红色和橙色使人兴奋并使得心跳加速;
  **使人联想到阳光,是一种快活的颜色;
  考虑到你希望对浏览者产生什么影响,请为网页选择合适的颜色。
  阅读西方格式文本时,眼睛从左上方开始,逐行浏览到达由下方,插入图象时不要忘记这种特性。任何具有方向性的图片应该放置在网页中对眼睛最重要的地方,如果在左上角放置一幅小鸟的图片,鸟嘴应该放在把浏览者目光引向页面中部的地方,而不是把视线引走。
  这种思路可以用于所有图片:
  面部应该"看"网页的中部;
  汽车的"停靠"面向网页中部;
  道路、领带等等图片的放置都应该在有助于吸引目光从左向右、从上向下移动。
  一般总是把网站导航条放置在页面左边,也是出于这种考虑——不断地出现在浏览者的视野之中。
  5.文字的可读性
  我们仍然用广告牌的比喻来说明,文字要在广告牌上突出,周围应该留有足够的空间。也许你曾到过一些网站,要么拥挤不堪的文字觉得好象只有把脑袋钻进去才能阅读,要么深色的背景给人的感觉好象处于非常狭窄的空间里,而且让人的心情感觉很压抑。某些背景色的令人阅读困难;紫色、橙色和红色让人眼花缭乱。
  文字的颜色也很重要,不同的浏览器有不同的显示效果,有些在你的浏览器上很漂亮的颜色在其他浏览器上可能无法显示。
  参考报纸的编排方式,为方便或快速阅读将你的内容分栏设计,甚至两栏也要比一满页的视觉效果要好。
  另一种能够提高文字可读性的因素是你所选择的字体,通用的字体(Arial, Times New Roman, Garamond and Courier)最易阅读,特殊字体用于标题效果较好,但是不适合正文(试想浏览整页的 Gothic, Script, Westminster, or Cloister会是怎样的感受)。因为阅读费力,你的眼睛很快就会疲劳,不得不转移到其他页面。
  明白我的意思了吗?
  6.网页标题的可读性
  必须尽量使你的网页易于阅读,除了分栏之外(将页面纵向分割),也需要利用标题和副标题将文档分段。
  为所有标题和副标题设置同一字体,并将标题字体加大一号,所有标题和副标题都采用粗体,这样便于识别标题(字体加大加粗)和副标题(粗体,与正文字体大小相同),使浏览者一眼就可以看到要点,以便找出并继续阅读有兴趣的内容。标题的重要性可见一斑,要认真写好每个标题!
  也可以将整句采用粗体或用不同的颜色突出某些内容,不过不要用难以阅读的颜色。
  7.导航
  由于人们习惯于从作到右、从上到下阅读,所以主要的导航条应放置在页面左边,对于较长页面来说,在最底部设置一个简单导航也很有必要(只要两项就够了:主页|页面顶部)。
  确定一种你满意的模式之后,最好将这种模式应用到同一网站的每个页面,这样,浏览者就知道如何寻找信息。
  8.保护个人信息声明和客户推荐信
  对于商业网站来讲,最重要的事情之一是确保潜在客户的信心,你应该明确地告诉人们,如何对其兴趣、爱好,尤其个人**保密,很有必要专门用一个页面详细陈述你的保护个人信息声明,包括对访问者的email地址保密、如何接受定单、如何汇总信息、汇总这些信息的目的、谁可以看到这些信息等基本内容。
  访问者也想知道你的产品或服务现有客户的反映,所以如果能引用与你关系融洽的客户对你的积极评价,对你的可信度将很有帮助。
  不要害怕向顾客索取推荐信——人们都愿意自己的意见有价值。
  你可以把客户的推荐信另设计为一个网页,作为对客户提供推荐信的回报,在这里链接到客户的网站——这也是一种"双赢"。
  9.词语
  一个网站如果只有漂亮的外观而词语错误连篇、语法混乱,同样是失败的,对于网站所有者和负责人将产生很坏的影响,人们会用许多贬义词来评价你:粗心大意、懒惰、外行、没水平等等。
  你愿意把自己辛苦挣来的钱花在一个连自己的网站都马马虎虎的人吗?
  你可以按照上述步骤改进你的网站制作技巧;
  你可以请人对你的工作进行校对、编辑;
  你也可以请人为你制作网页;
  总之,上述步骤在很多方面对你会有所帮助,不要因为对某些步骤的疏忽而影响你的网站的整体效果。
  保存网页的技巧
  我们在上网过程中遇到精彩的文章、图片、flash常常会把它们保存下来已备日后查看。
  保存网页的基本方法就是用浏览器带的保存功能。点击浏览器的菜单文件->另存为,输入文件名,保存类型可以选择 网页,全部(*.htm;*.html) Web 档案,单个文件(*.mht) 文本文件(*.txt) 。
  保存网页的过程中常见的问题:网页不能保存、保存失败,有些网页禁止了鼠标右键,不能复制。采用浏览器自带的"另存为"保存网页的时候,有时进度条前进速度非常缓慢,最后提示"保存网页失败",这中情况主要是由于网速慢或对方的服务器忙导致有部分文件不能下载引起的。网页采用脚本禁止了"Ctrl+v"和右键菜单功能,有些网页不仅禁止使用右键菜单功能,而且禁止使用了鼠标拉选文字的功能。
  除了采用浏览器自带的"另存为"保存网页之外还可以通过下列方法来保存网页,可以有效解决网页不能复制、保存失败等问题。
  1、将网页保存为图片。如果想要完整保存页面,通过屏幕拷贝的方式将网页保存为图片不失为一种很好的方法,这特别适合做设计的人员,需要看的是网页的整体。
  2、保存部分有用内容。事实上我们保存网页时往往是仅需保存网页中的正文部分,整个网页内容一大堆,正文也就一小部分。一种办法就是用"拷贝"、"粘贴"的方法将正文复制到word然后保存。你想象过只要点一下鼠标即可完成保存你需要的正文部分,不用你手工"拷贝"、"粘贴"呢?
  现在保存网页也讲人工智能,智能化的网页保存工具网童就实现了这样的功能,他能够自动识别并提取网页正文内容,在浏览器中点击鼠标右键,选择"网童,取网页正文",网页正文在一个新的窗口中显示可编辑、保存。还可以一键将网页保存为word文件,保存的是干干净净的网页正文,而且还包括下一页,省去很多的复制、粘贴操作。
  3、批量保存网页内容。要想批量保存网页内容那只能采用第三方工具了,浏览器本身不提供这种功能。最常见的就是下载工具了,如网际快车、迅雷,建立一个网页下载列表然后后下载工具下载。这种方法只能下载链接指向的html文件,不能下载关联的图片等文件。第二种方法就是网络爬虫,这种工具可以把自动抓取网页及其相关链接的文件。
  上面这两种方法都有一个问题就是只要是指向的链接都取,不能区分是否有用。批量保存网页内容最好的方法就是采用智能型的网页保存工具——网童。事实上我们保存网页经常只需要网页的正文内容,保存工具应当自动的智能化的识别网页正文内容,然后自动提取这些信息。网童不但可以批量保存网页而且自动提取正文内容并把网页内容汇编在一起。
  如果你经常需要保存网页或者你对网页技术不是非常熟悉建议采用专门的网页保存工具,傻瓜式的一键搞定。
  提升网页可用性的方法
  权威研究结果表明:人们在线的阅读习惯和平时的阅读习惯是完全不一样的。访问者通常是在非常随意的状态下快速浏览你
  的网页的,他们急于获取真实的、实用的,并且是有价值的信息。如果他们不能及时地获取所需信息,那么,他们将离开你
  的网页。
  下面的3点方法将会给你带来帮助,它会让你为你的访问者提供所需信息,指出提升网页可用性的方法。
  1. 精简的文本描述
  你所写的文章必须围绕一个主题,这可以方便访问者快速获取主旨信息和中心思想。好好想想如何把文章改得精简得体以便
  于访问者阅读。这里告诉你一个可行的办法,尽量把一段文章在3-4行之内叙述完整,然后再另起一行写下面一段。
  2. 便于快速浏览的文本
  网络用户一般不会在线精读文本内容,他们通常是快速浏览。因此,应该尽量使用简短、醒目的文本。举个例子来说,可以
  通过超链接的形式将重要的信息从页面中分离出来,这样做会使得这段重要信息显得非常醒目。将一个段落以重点列表的形
  式表示也是一种非常可行的方法。学会在你的重点词组前方加一个起强调作用的圆点。还有一点,学会在页面中使用副标题
  ,当你浏览网页时,将重点挑选出来,并将它们写在标题标签内,"标题2"和"标题3"的效果最好,但是"标题1"标签的
  效果也会相当不错,这样做会可以给整个页面的信息分出层次,以帮助阅读者在简单地浏览页面之后快速地获取所需信息。
  3. 必须要客观公正
  这里要提到的"客观公正"指的是:在你的网页上放上与你网页内容相关的链接,让访问者做出**的选择:是继续留在你
  的网页上,还是去别的网页上寻找信息。这对于你——网页的所有者来说,并不是一件坏事;因为你可以为访问者指明确切
  的方向。
  好好按照上面说的把你的网页改进一下。我相信,网页的可用性一定会大大提升;同时,你的访问者也会非常感激你,并且
  会很愿意与你进行往来。
[编辑本段]教你快速成长为一名厉害的网页设计师
  笔者曾经是一个网页设计的菜鸟,经过自己不断的摸索和实践,现在已经可以独立制作一个完整的静态站点,并且给学校的N(N>5)个部门、院系和外面的公司做网站,虽然不是一个完全意义上的Web Designer(网页设计师),但是完成一些要求不是很专业、不是十分完美的站点已经是小事儿了(嘿嘿,是不是有自吹自擂之嫌),自己心里已经是小有成就感了,所以自封为准Web Designer!
  自认为成长过程还算快,所以把本人的经历向大家介绍一下,给那些有志于此的朋友们一些参考意见。
  循序渐进学知识
  先学一学HTML,找本自己能看懂的教材,浏览为主,不用记住所有的概念,只要记住使用原理就行了,这一阶段,估计三天就够了;然后用两天时间学CSS,方法同上;进而再花些时间了解一下JavaScript。
  然后就可以用记事本尝试写几个网页,记住这时千万不要用那些可视化工具,比如FrontPage、Dreamweaver(那些以后再学)。
  有一个提高自己"写网页"的捷径,就是上各大网站,把网页保存下来(什么?你说你不会保存网页?就是"文件→另存为"),然后打开保存下来的网页,点击右键→查看源文件,看看人家的网页是怎么写的,然后模仿他们的写法,不断规范自己的代码。嘿嘿,这个方法不错吧。先好好模仿一下吧。
  接下来该学一下Fireworks了。建议一开始就到网上找些实例教程,这些实例教程一般都介绍得很详细,跟着它一步一步做下来,每学会一个实例就掌握了几项操作,而且也有了自己的作品,很有成就感的,长期积累下来对自己的提高很有帮助。学Fireworks主要是学图片处理,比如加一些效果,还有很重要的就是切图,这对于初学者是很重要的。
  这时还可以结合Dreamweaver进行学习,你就可以体会到Dreamweaver和Fireworks的无缝集成了。利用这些工具多做几个网页,你就可以达到一定水平了。
  要是想让你的网页多一些炫目的效果,建议你学一下Flash,难度并不大,而且要是前面的JavaScript基础打得好的话,学到Flash中Acti**cript时,你会有一种似曾相识的感觉,因为这两种语法几乎是一模一样的。
  到这时,相信你就可以真正领会到"网页三剑客"的威力了。
  在实践中不断提高
  要是每天能拿出两个小时来学习,完成以上这些学习估计只要20天就差不多了。要是天赋高的话(比如说像我这样的,呵呵),那需要的时间就更少了。接下来该实习了,找个地方锻炼一下自己,比如可以去一些公司干干兼职,或是给自己的单位设计一下主页等。
  最好是能进入一个正规的开发团队,你就会学会如何以团队合作的方式开发网站,特别是怎样和程序组合作,把页面与后台程序数据库配合起来。可能你会担心自己是新手,人家会嫌弃你,没关系,只要努力去找,总会有机会的。
   到此,你就基本可以称作是一个"准Web Designer"了,不过要从根本上提高自己,最好去学学美术,这是当一个网页设计师的基本功。
  笔者刚开始做网页纯粹是自娱自乐,但在这个过程中,我逐渐开始深深喜欢上了这项工作。这个学习过程是人生的一笔宝贵财富,至少我是这么认为的。
[编辑本段]网站设计65条原则
  01 明确内容
  如果你想成为一个网站设计者,并正想建一个网站的话,首先应该考虑网站的内容,包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。
  02 抓住用户
  如果用户不能够迅速地进入你的网站,或操作不便捷,网站设计就是失败的。不要让用户失望而转向你的对手的网站。
  03 优化内容
  内容是核心。大约在两年以前,企业网站就像一本广告册子,更槽糕的是,网站使用了大量的图片,似乎要几个世纪才能下载完。比如某网站在设计的某些方面是成功的,但是内容太贪乏,并且要花很长时间才能找到所要的东西,因此不能算是一个成功的网站。 
  04 快速下载
  没有什么比要花很长时间下载页面更槽糕的了。作为一条经验,一个标准的网页应不大于60K,通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。
  05 网站升级
  时刻注意网站的运行状况。性能很好的主机随着访问人数的增加,可能会运行缓慢。但是,如果你不想失去访问者的话,一定要仔细计划好你的升级计划。
  06 坚持基本原则
  即使你不懂HTML语言,你只需购买一个有版权的所见即所得的网页设计工具,如Adobe PageMill 或 Microsoft FrontPage Express,当然现在则是Dreamweaver啦,就可以创建一个看起来很合理的网站。但是,在设计时,这些软件包虽然不需要HTML,却使网站速度下降。为了成功地设计网站,你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案,用Notepad制作网页。
  07 学习HTML
  用HTML设计网站,可以控制设计的整个过程。但是,如果你仅仅是网站设计的新手,你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中,HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式,以便你在把网站发送到Web之前,预览你的网站。
  08 用笔画一个网站的框架
  圣人云:笔比剑更强大。在用计算机之前,用笔画一个网站的框架,显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。
  09 "在计算机上永远也找不到好的方案"。—专家忠告
  10 网站地图
  许多设计者把他们的网站地图放在网站上,这种做法,却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息,他们对于你的网站是如何工作的,并没有兴趣。如果你觉得你的网站需要地图,那很可能是需要改进你的导航和工具条。
  11 "睁大你的眼睛,留意所有的事情。对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结构的关键元素,确保你的设计是围绕站点浏览进行的。" —专家忠告
  12 点击规则
  听说过3次点击规则吗?对于小型网站,在你的主页上,没有任何一条信息,需要点击次数超过3次的。对于大型网站,使用导航和工具条来改善操作。
  13 特殊字体的应用
  虽然你可以在你的HTML中使用特殊的字体,但是,你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面,在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性,这虽然允许你使用特殊的字体,但是仍需要一些变通的方法,以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题,但是只有最新版的浏览器才支持CSS。
  14 "使用切合实际的简便的命名规则。" —专家忠告
  15 检查错别字
  好的拼写是人们一生中重要的技能。但是遗憾的是,许多设计者都缺少这种技能。确保你拼写正确,并且格外注意平常容易误写的错别字。
  16 避免长文本页面
  在一个站点上有许多只有文本的页面,是令人乏味的,且也浪费Web的潜力。如果你有大量的基于文本的文档,应当以Adobe Acrobat格式的文件形式来放置,以便你的访问者能离线阅读。
  17 不要使用卷滚条 
  人们厌恶在网上使用卷滚条。某站是一个典型的设计很差的网站。它基于一个浮动的架构,为了阅读所有的文本,浏览者不得不使用卷滚条。
  18 专家最喜爱的Web设计工具
  1.Adobe Photoshop
  2.Macromedia Flash
  3.Adobe Illustrator
  4.Adobe ImageRead
  5.Macromedia Dreamweaver
  6.Macromedia Fireworks
  7. Allaire Homesites
  8.Microsoft Notepad
  9. Macromedia Director
  10. Lightwave
  11. Macromedia Freehand
  12.其它:Adobe Acrobat Exchange,Allaire ColdFusion,BBEdit,HTML Validator等。
  19 网站介绍
  你应当有一个很清晰的网站介绍,告诉访问者你的网站能够提供些什么,以便访问者能找到想要的东西。但是,许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息,这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。
  20 "网站一旦发布,网站设计的优点和缺陷全都公布于世。没有什么方法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。" —专家忠告
  21 闪烁让人头痛
  通过使用标识可以吸引访问者对你的主页特殊部分的注意,但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站,就少用此方法。
  22 背景颜色
  背景颜色也会产生一些问题,可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的文本,另外还应当坚持使用通用字体。
  23 向前和向后按钮
  应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条,使浏览者能够从每一页**问网站的任何部分。
  24 专家忠告 :"坚持你的信念。严格遵守各种规则。避免想当然。绝不停止学习。"
  25 点击记数器
  不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务,而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义,它们很容易被做假,浏览者也不想看广告。如果你显示你的网站是多么受欢迎,你最好提供一个链接,显示访问日志。
  26 不要用框架
  与记数器一样,框架在网页上越来越流行。在大多数网站上,在屏幕的左边有一个框架。但是设计者立刻就发现,在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是,搜索引擎常常被框架混淆,从而不能列出你的网站。
  27 去掉图像
  在浏览器中即使去掉了图像功能,也要保证访问者能够在你的网站上获得满意的效果。对于那些使用ISDN连接并且关掉了图像功能的访问者,还能获得好的网页加载性能。可以通过在网页底部提供另外的链接和使用替代文字,而不是图像来满足访问者的需要。
  28 重复使用图像
  一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时,在网页上多次使用同样的图像是一个好的方法,并且一旦它们被装入,以后重新载入就会很快。
  29 避免使用过大的图像
  不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。
  30 专家忠告:"避免使用炫耀的技巧。"
  31 选择使用Flash动画
  许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源,使网站的操作变得很困难,因此,应该给用户一个跳过使用Flash动画的选择。
  32 尽量少使用Flash插件
  虽然许多Web设计者认为Flash功能很强大,并且Netscape5.0将支持Flash,在使用时不必再下载任何插件。 但是,最好还是取消使用Flash做各接口的想法。
  33 让用户先预览小图像
  如果不得不放置大的图像在网站上,就最好使用Thumbnails软件,把图像的缩小版本的预览效果显示出来,这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。
  34 动画与内容应有机结合
  确保动画和内容有关联。它们应和网页浑然一体,而不是干巴巴的。动画并不只是Macromedia Director等制作的东西的简单堆积。
  35 慎用声音
  声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢,同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣,但是多次以后肯定会很烦人。使用声音前,应该仔细考虑声音将会给你带来什么。
  36 少用Java 和AxtiveX
  在网页上应尽量少使用Java 和AxtiveX。因为并不是每一种浏览器都需要使用它,只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题,过分地使用Java,会使Mac崩溃。
  37 设计成功的网站
  蓝色理想
  七色鸟
  ChinaUI
  5D多媒体
  38 慎用插件
  在Web设计中,如果依赖于一些特别的插件,会减少网站的吸引力。如果访问者没有所要求的插件,将不得不到其它站点去下载,这样访问者有可能就不会返回了。
  39 使用著名的插件
  如果网站上有声音或视频,要保证使用者通过使用某个知名的插件,能够听到或看到。许多站点使用QuickTime、RealPlay和 Shockwave插件。因为,许多访问者并不愿意浪费很多时间和金钱去下载可能仅使用一次的插件。
  40 使用先进技术
  跟上新的技术。Web技术的进步绝不会停止,所以应花一些时间来研究新产品和开发技术。
  41 自己创建图像和声音
  使用你自己创建的或从某个商业网站上下载的图像和声音。在制作商业网站时,应该花足够的资金来创建图形,以增强公司的宣传。
  42 专家忠告— "无论是游戏、图像、动画还是电影,想想你喜欢的设计是怎样的,这将激发你的创作灵感,使你创作出新的和更好的网站。"
  43 平台的兼容性
  要为用户着想,必须最少在一台PC 和一台Mac机上测试你的网站,看看兼容性如何。
  44 用软件分析工具找错
  使用软件分析工具检查HTML。软件分析工具Doctor HTML能够帮助检查HTML中的任何问题。如果你有许多网页需要检查,可选用软件分析工具。
  45 避免错误链接 
  网站中可能与其它一些有用的站点作了链接。但是,如果在你的网页上有链接,一定要经常检查它们,保证链接有效。链接的网站可能很多,但不要链接到与你的内容无关的网站上。
  46 给观众成熟的东西
  如果网站没有完成,就不要发送到Web上。所有好的网站都是在幕后完成之后再发布的。
  47 在搜索引擎上登记网站
  任何一个人发现你的网站的机会都很少,除非你把你的网站在主要的搜索引擎上进行登记。
  48 设计一个留言板
  浏览者愿意把时间花在好的网站上,所以最好有一个留言本,这能激励访问者再次回到你的网站,还有助于扩充网站内容。
  49 测试网站
  在你的网站正式发布之前,必须进行有用的测试。在设计网站时要使用最新的软件,但是不要忘了人们并不会使用最新的浏览器,所以要照顾到以前的浏览器。在上载网站时还要测试所有的链接和导航工具条。
  50 专家忠告—"尽你所能反复测试所设计的网站,直到你不能发现新的东西为止。"
  51 演示即将发布的网站
  在网站正式运行之前,让人演示它。演示中人们会告诉你所设计的网站是否容易使用。
  52 动画点缀
  网页上的动画最多只用一个
  53 专家忠告—"倾斜的按钮看起来不会太好,最好不要使用。"
  54 内容组织
  在开始创建新的网页前,仔细考虑网站内容的组织。决定好想让访问者浏览的内容,然后设计导航系统。
  55 "空白万岁"
  注意留空白。不要用图像、文本和不必要的动画GIFs来充斥网页,即使有足够的空间,在设计时也应该避免使用。
  56 利用空白去吸引注意力。
  为了吸引眼球,Web设计者使用各种方法,比如:闪烁、旋转等,但是利用空白会吸引更多的注意力。"—专家忠告
  57 图像压缩
  为了保持小的图像,可以使用类似GIF向导的程序,它能自动对图像进行压缩。 先声明图像的大小,在图像显示之前最好能详细说明图像大小属性,可以在IMG标签中保存这个属性。这可以使网页显得很流畅,因为浏览器可以在图像被下载之前在屏幕上显示整个网页。
  58 设计一个失败的网站,从中找出原因,提高自己的鉴别能力。
  59 用户注册
  如果能知道谁浏览了网站以及是怎样浏览网站的,那么就能得到大量有用的信息。但是,要求访问者在浏览网站之前进行注册,这样做是要冒风险的,因为这将赶走一批不愿意注册的人。获得信息的另一种方法是进行有奖竞猜或金钱奖励,让用户能主动填一些信息反馈表。
  60 使网站具有交互功能
  在网站上提供一些回答问题的工具,使得访问者能从网站上获得交互的信息。
  61 图片更新
  尽可能经常更换网站上的图片,人们更愿意点击的是图片而不是文本。
  62 在网站上提供游戏
  游戏是很好的交互工具,它是使访问者能再次光顾网站的好方法。
  63 挑选工具软件
  仔细选择Web设计工具。保证使用自己最想要的、自我感觉最好的软件。
  64 使用最新版本的软件
  尽量使用Web设计软件的最新版本,还应当能被授权进行免费或便宜的升级。
  网站与网页的关系
  网站是由网页集合而成的,而大家通过浏览器所看到的画面就是网页,网页说具体了是一个html文件,浏览器是是用来解读这份文件的。也可以这样说:网页是有许多html文件集合而成。至于要多少网页集合在一起才能称作网站,这可就没有规定了,即使只有一个网页也能被称为网站。[/color]

架构中的无缝连接(边框线的对接)


From Evernote:

架构中的无缝连接(边框线的对接)

Clipped from: http://ideafuture.iteye.com/blog/1262851
架构中的无缝连接(边框线的对接)

今天 2011年11月16日,晴……每天还是哪么忙,忙得不可开交,自己一投入工作,就好想忘记一切。
总之就不想想起别的来。今天没什么发生,写了一个又一个页面。虽然大事没有,总算有一点让自己欣慰的事。在架构页面的时候,碰到了一个一下子头大的东东,不过后来还是缓过来了。我想了一个招搞定了,还很完美!没事,晚上回来和大家分享一下。效果是这样的了,有一个选项卡,选项卡的标题叫做查看详情,意味着这个标签可以点击,点击它不是进入另一页面,而是弹出一个DIV层来,显示出里面全部内来。这里肯定要用到JS,幸好,我自己写JS,否则要到网上到处搜JS了,哪将是痛苦的事。这种JS效果我写得太多了。点到这里,显示相应的DIV层,这种简单的控制Display样式,大家都能想得到,不过,我在没有进入这个门之前,却被它挡住了很长一段时间,知道的人说它简单,不知情况的人还是什么和尚摸不着头脑。可能我说得这么多,大家看不到效果,好像等于白说,但是又不能发图片,很让人无奈,其实用图说话,可以让我省打N多文字。算了吧,我还是描述一下,不然,下面的你会觉得不过如些,不值一提。这里的关键问题不是JS实现的问题,难点在于如何让选项卡也即查看详情的边框与DIV层的边框融合在一起,而看不出破绽来,是这样的,查看详情在左边,div层在右边,Div层是一个大的矩形框,选项卡查看详情是一个小的矩形框,而且只有当点击之后才会有边框,并且点击后的右边框线无,而且还要凑巧Div在靠着选项卡的区域,边框线也无,我的意思应该能看懂哦,就是div的左边线只有一个部分是无的,不是全无呢,我也想全无。呵呵……不过没哪么简单。问题描述清楚了,下面就要看实现思路了。
我的实现思路是这样的,选项卡这边我用一个<span>套一个<b>标签,也许大家会问,这里为什么不放a标签,是因为点击它之后不需要跳转页面,用了反而增加了不少麻烦,我考虑之后放的。完整就是<span><b>查看详情</b></span>当然了,它们都飘左才行,这样我才能控制不是?然后就是为它加样式了。<span class="pos_a"><b class="pos_b">查看详情</b></span>算了这样说太慢了,我还是一次写完,大家去研究吧。
css.css;
/*css实现*/
.pos_a{
position:relative;
float:left;
}
.pos_b{
position:absolute;
float:left;
width:70px;
top:0px;
left:0px;/*这里是用控制与dis靠近用的,自己调吧。
border:1px #ccc solid;
border-right:none;/*这里是关键,
}
.dis{
width:350px;
height:250px;
border:1px #ccc solid;
}

html.html;
/*html实现*/
/*开头我就省略了*/
<div class="wrapper">
<span class="pos_a"><b class="pos_b">查看详情</b></span>
<div class="dis">这里是待显示的内容</div>
</div>

代码就这么多了,主要思想就是利浮动层在上面,会挡住下面层的内容,就是靠哪一像素的庶挡,制造效果,当然也可多于两像素,这两像素怎么来,就是控制.pos_b的width就是了,自己慢慢调着试试就行了。
选项卡的JS代码也很简单,我比别人实现起来更省代码。今天不晚了,12点了,我该睡了,有想知道的朋友,请关注我,QQ:550703900

彻底弄懂CSS盒子模式一(DIV布局快速入门)


From Evernote:

彻底弄懂CSS盒子模式一(DIV布局快速入门)

Clipped from: http://lsn-1212.iteye.com/blog/1284077
实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.html

2.彻底弄懂CSS盒子模式二(导航栏实例) 【论坛讨论】http://www.blueidea.com/tech/web/2007/4563.asp

3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 【论坛讨论】http://www.blueidea.com/tech/web/2007/4579.asp
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 【论坛讨论】
http://www.blueidea.com/tech/web/2007/4601.asp
5.彻底弄懂CSS盒子模式五(定位强化练习) 【论坛讨论】
http://www.blueidea.com/tech/web/2007/4602.asp
前言

      如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网

页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,

这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义

的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常

浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查

找相关信息。

理解CSS盒子模型

      什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框

(border)、边界(margin), CSS盒子模式都具备这些属性。

CSS盒子模式

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那

么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于

边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等

元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS

盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,

而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要

保留多大距离。在现实生活中,假设我们在一个广场上,把不同大小和颜色的盒子,以一定的间隙和顺序摆放好,最后从广场上空往下看,

看到的图形和结构就类似我们要做的网页版面设计了,如下图。

由"盒子"堆出来的网页版面


现在对CSS盒子模式理解多少了,如果还不够透彻,继续往下看,我会在后面举例,并延用盒子的概念来解释它。

转变我们的思路

  传统的前台网页设计是这样进行的:根据要求,先考虑好主色调,要用什么类型的图片,用什么字体、颜色等等,然后再用Photoshop

这类软件自由的画出来,最后再切成小图,再不自由的通过设计HTML生成页面,改用CSS排版后,我们要转变这个思想,此时我们主要考虑

的是页面内容的语义和结构,因为一个强CSS控制的网页,等做好网页后,你还可以轻松的调你想要的网页风格,况且CSS排版的另外一个目

的是让代码易读,区块分明,强化代码重用,所以结构很重要。如果你想说我的网页设计的很复杂,到后来能不能实现那样的效果?我要告

诉你的是,如果用CSS实现不了的效果,一般用表格也是很难实现的,因为CSS的控制能力实在是太强大了,顺便说一点的是用CSS排版有一

个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当

容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。

实现结构与表现分离

  在真正开始布局实践之前,再来认识一件事——结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更

新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,

我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:P {text-indent: 2em;},

这样结果body内容部分就如下,这没有外加任何表现控制的标签:

<p>加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知

识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。</p>
复制代码


如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:

<p><font color="#FF0000" face="宋体">段落内容</font></p>
复制代码


这个是结构和表现混合一起写的,如果很多段落有统一结构和表现的话,再这样累加写下去代码就繁冗了。

再直接列一段代码加深理解结构和表现相分离:

用CSS排版

<style type="text/css">
<!--
#photoList img{
  height:80;
  width:100;
  margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>
复制代码


不用CSS排版

<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05.jpg" width="100" height="80" align="middle" />
复制代码


  第一种方法是结构表现相分离,内容部分代码简单吧,如果还有更多的图片列表的话,那么第一种CSS布局方法就更有优势,我打个比

喻你好理解:我在BODY向你介绍一个人,我只对你说他是一个人,至于他是一个什么样的人,有多高,是男是女,你去CSS那里查下就知道

。这样我在BODY的工作就简单了,也就是说BODY的代码就简单了。如果BODY有一个团队人在那里,我在CSS记录一项就行了,这有点像Flash

软件里的元件和实例的概念,不同的实例共享同一个元件,这样动画文件就不大了,把这种想法移到CSS网页设计中,就是代码不复杂,网

页文件体积小能较快被客户端下载了。

演示地址:http://www.blueidea.com/articleimg/2007/03/4545/css1.html
用CSS排版减小网页文件体积


  像上面我做的那个版面,一共分为四个区块,每个区块的框架是一样的,这个框架就是用CSS写出来的,样式写一次,就可以被无数次

调用了(用class调用,而不是ID),只要改变其中的文字内容就可以生成风格统一的众多板块了,它的样式和结构代码是(请不

要直接复制生成网页,把下面代码分别粘贴到网页中它们应在的位置):

<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
复制代码


熟悉工作流程

  在真正开始工作之前我们脑海中要形成这样一种思想:表格是什么我不知道,在内容部分我不能让它再出现表现控制标签,如:font、

color、height、width、align等标签不能再出现,(简单说工作前先洗脑,忘掉以前的一惯做法,去接受和使用全新的方法),我不是单

纯的用DIV来实现排版的嵌套,DIV是块级元素,而像P也是块级元素,例如要分出几个文字内容块,不是一定要用DIV才叫DIV排版,不是

"<div>文字块一</div><div>文字块二</div><div>文字块三</div>",而用"<p>文字块一</p><p>文字块二</p><p>文字块三</p>"更合适



  用DIV+CSS设计思路是这样的: 1.用div来定义语义结构;2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;3.最后在这

个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结

果图:

演示地址:http://www.blueidea.com/articleimg/2007/03/4545/css2.html
CSS排版结果图


用div来定义语义结构
  现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图),

典型版面分栏结构

其结构代码如下:

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
复制代码


  上面我们定义了四个盒子,按照我们想要的结果是,我们要让这些盒子等宽,并从下到下整齐排列,然后在整个页面中居中对齐,为了

方便控制,我们再把这四个盒子装进一个更大的盒子,这个盒子就是BODY,这样代码就变成:

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
复制代码


  最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
复制代码


  页头为了简单起见,我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙,目的是让页头的图像不要和下

面要做的导航栏连在一起,这样也是为了美观。其样式代码为:

#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
复制代码


  导航栏我做成像一个个小按钮,鼠标移上去会改变按钮背景色和字体色,那么这些小小的按钮我们又可以理解为小盒子,如此一来这是

一个盒子嵌套问题了,样式代码如下:

#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
复制代码


  内容部分主要放入文章内容,有标题和段落,标题加粗,为了规范化,我用H标签,段落要自动实现首行缩进2个字,同时所有内容看起

来要和外层大盒子边框有一定距离,这里用填充。内容区块样式代码为:

#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
复制代码


  版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这

里就不做了。其样式代码如下:

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
复制代码


  最后回到样式开头大家会看到这样的样式代码:

* {
margin: 0px;
padding: 0px;
}
复制代码


  这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以

这样的控制,这可以在一定程度上简化代码。最终完成全部样式代码是这样的:

<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>
复制代码


结构代码是这样的:

<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright &copy;2006 - 2008 Tang

Guohui. All Rights Reserved</p>
</div>
</body>
复制代码


  好了,此文到此结束,更多内容,如:CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料。如果觉得

此文还可以,看过之后记得跟帖,你的鼓励是我不断出新文章的动力^-^

本文完全为个人原创作品,转摘请注明作者,作者:唐国辉。感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处

看完本教程后,建议大家再看一下下面的回复,本人在下面的回复中有回答不同网友问及的问题,如果您有在这里提问,

记得过一段时间再回来看我的答复,一般我都会回复的,再次谢谢各位网友支持!

CSS样式基础


From Evernote:

CSS样式基础

Clipped from: http://sophie627.iteye.com/blog/1288211

一、如何创建 CSS

插入样式表的方法有三种:

1.外部样式表

<head>

<link rel="stylesheet" type="text/css"

href="/YGFMISWebRes/html/component/css/jquery.ygsoft.common.css"/>

</head>

       2. 内部样式表(html,位于 <head> 标签内部)

<head>

<style type="text/css">

                    hr {color: sienna;}

                    p {margin-left: 20px;}

             body {background-image: url("images/back40.gif");}

</style>

</head>

       3. 内联样式(在 HTML 元素内部)

              <p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

优先级:内联样式 > 内部样式表 > 外部样式表

二、CSS选择器

1. id 选择器

ID属性用于定义一个元素的独特的样式。

DOMid= sidebar的样式定义。

#sidebar {

                     border: 1px dotted #000;

                     padding: 10px;

                     }

2. 类选择器(class

1) class   = center的样式定义。

       .center {text-align: center}

2) 可以为对象的 class 属性(特性)指定多于一个值( className ),其方法是指定用空格隔开的一组样式表的类名。例如:<div class="class1 class2">注:id不可以用此方法。

3. 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 ph1tda

td { font-size:14px; width:120px; }
a { text-decoration:none; }

4. 包含选择器(后代选择器)E1 E2 { sRules }

1)        实例:

table td { font-size:14px; }
div.sub a { font-size:14px; }

2) 在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为"... ... 找到"、"... 作为 ... 的一部分"、"... 作为 ... 的后代",但是要求必须从右向左读选择器。

可以是ID选择器和类选择器之间相互包含,实用范围非常大。

5. 组选择器  E1 , E2 , E3 { sRules }

1)        实例:

.td1, div a, body { font-size:14px; }
td, div, a { font-size:14px; }

2) 将同样的定义应用于多个选择器,可以将选择器以逗号分隔的方式并为组。

6. 子对象选择器  E1 > E2 { sRules }

1) 实例:

h1 > strong {color:red;}

//这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:

<h1>This is <strong>very</strong> important.</h1>

2) 如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,使用子元素选择器(Child selector)。

7. 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}

这个选择器读作:"选择紧接在 h1 元素后出现的段落,h1 p 元素拥有共同的父元素"。

8. 属性选择器

对带有指定属性的 HTML 元素设置样式。

[title] { color:red; }

input[type="text"]

{

    background-color:yellow;

}

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class id 属性。

       [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

注:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。

三、伪类及伪对象

        css内部本身赋予它一些特性和功能,也就是你不用再class=...id=...你就可以直接拿来使用,当然你也可以改变它的部分属性比如:a:link{color:#ff0000;}

 

1. 伪类

CSS 伪类用于向某些选择器添加特殊的效果。

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000}         /* 未访问的链接 */

a:visited {color: #00FF00}     /* 已访问的链接 */

a:hover {color: #FF00FF}     /* 鼠标移动到链接上 */

a:active {color: #0000FF}     /* 选定的链接 */

提示:在 CSS 定义中,a:hover 必须被置于 a:link a:visited 之后,才是有效的。

提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

提示:伪类名称对大小写不敏感。

2. 对象

语法:(伪对象选择符共有4种)

1). Selector:first-letter

2). Selector:first-line

3). Selector:before

4). Selector:after

说明:

1). 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象,必须先设定对象具有块元素的表状。

2). 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象具有块元素的表状。

3). 用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。

4). 用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

注:first-letter:first-line目前所有主流浏览器均支持;:before:afterIE核心浏览器及IE8支持。