立信软件工作室

网页美感来源于形式和内容统一

摘要：现在视觉专家表明：用户浏览网站是按照“F”型的视觉路线。我们看任何东西都是从上往下的，最顶部左上角的位置是最明显的，也是最先被看到，这一点已经被现在所有的网站都运用上了，大家通常把公司的LOGO，网站的名称放在这个位置。接下来看到的是中间区域左边的一部分，这个区域大多数电商站喜于放产品栏目，以便用户查找。最后就是底部内容部分的。了解了这个规律，当我们在设计页面的时候就知道怎么样做内容，怎么样让内容搭配图片，做到协调统一。文字和图片的统一，就是形式和内容的统一文字口号是引起注意的元素之一，配加一个亮色调的按钮图标，瞬间让页面充满活力，美感，给到浏览者丰富的视觉体验。如图一：上下配有粉... 阅读全文

posted @ 2011-11-24 15:27 立信软件工作室阅读(142) 评论(0) 推荐(0)

我学习css看的第一篇文章（强烈推荐，适合新手学习）

摘要：点击链接查看教程具体内容！第一步：规划网站http://www.cnblogs.com/lixinstudio/archive/2011/11/24/2261527.html第二步：创建html模板及文件目录等http://www.cnblogs.com/lixinstudio/archive/2011/11/24/2261526.html第三步：将网站分为五个div网页基本布局http://www.cnblogs.com/lixinstudio/archive/2011/11/24/2261525.html第四步：网页布局与div浮动等http://www.cnblogs.com/lixin 阅读全文

posted @ 2011-11-24 13:13 立信软件工作室阅读(381) 评论(0) 推荐(1)

第一步：规划网站，本教程将以图示为例构建网站

摘要：首先需要规划网站，本教程将以下图为例构建网站。其基本布局见下图：主要由五个部分构成：Example Source Code[www.52css.com]1.MainNavigation导航条，具有按钮特效。Width:760pxHeight:50px2.Header网站头部图标，包含网站的logo和站名。Width:760pxHeight:150px3.Content网站的主要内容。Width:480pxHeight:Changesdependingoncontent4.Sidebar边框，一些附加信息。Width:280pxHeight:Changesdependingon5.Foote. 阅读全文

posted @ 2011-11-24 13:12 立信软件工作室阅读(293) 评论(0) 推荐(1)

第二步：创建html模板及文件目录等

摘要： 1.创建html模板。代码如下：Example Source Code<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/><title 阅读全文

posted @ 2011-11-24 13:12 立信软件工作室阅读(341) 评论(0) 推荐(1)

第三步：将网站分为五个div，网页基本布局的基础：

摘要： 1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：Example Source Code[www.52css.com]<divid="page-container"><divid="main-nav">MainNav</div><divid="header">Header</div><divid="sidebar-a">SidebarA</div><divid="content">Co 阅读全文

posted @ 2011-11-24 13:11 立信软件工作室阅读(256) 评论(0) 推荐(1)

第四步：网页布局与div浮动等

摘要： 1.浮动：首先让边框浮动到主要内容的右边。用css控制浮动。Example Source Code[www.52css.com]#sidebar-a{float:right;width:280px;background:darkgreen;} 表现如下：2.往主要内容的盒子中写入一些文字。在html文件中写入：Example Source Code<divid="content">Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.Praesentsapienpur 阅读全文

posted @ 2011-11-24 13:11 立信软件工作室阅读(192) 评论(0) 推荐(1)

第五步：网页主要框架之外的附加结构的布局与表现

摘要：除网页主要框架之外的附加结构的表现(Layout),包括以下内容： 1.主导航条； 2.标题(heading),包括网站名和内容标题； 3.内容； 4.页脚信息,包括版权,认证,副导航条(可选)。加入这些结构时，为了不破坏原有框架，我们需要在css文件"body"标签(TAG)下加入:Example Source Code.hidden{display:none;} ".hidden"即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用，现在请暂时忘记它。现在我们加入标题(heading 阅读全文

posted @ 2011-11-24 13:10 立信软件工作室阅读(194) 评论(0) 推荐(1)

第六步：页面内的基本文本的样式(css)设置

摘要：你是不是厌倦了那些大红大绿的背景，现在是去掉它们的时候了，只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此，很好，再过几步，你就能很好了解css控制整个网页版面(Layout)的能力。先设置全局的文本样式：Example Source Codebody{font-family:Arial,Helvetica,Verdana,Sans-serif;font-size:12px;color:#666666;background:#ffffff;} 一般我们把body标签放在css文件的顶端，当然你要是执意要把它放在尾部，浏览器不会和你计较。font-family内的顺序决定字体显示.. 阅读全文

posted @ 2011-11-24 13:10 立信软件工作室阅读(239) 评论(0) 推荐(1)

第七步：网站头部图标与logo部分的设计

摘要：为实现设计时的网页头部效果，我们需要以下两幅图：（点击另存，并相应修改文件名） /images/headers/about.jpg /images/general/logo_enlighten.gif 首先我们给#header层添加背景图案： Example Source Code[www.52css.com]#header{height:150px;background:#db6d16url(../images/headers/about.jpg);} 我们使用的背景属性为一些简写的属性名，用其能规定背景的颜色，图案，图案的位置，是否重复以及如何重复。之所以把背景色设为桔黄色，是因为... 阅读全文

posted @ 2011-11-24 13:05 立信软件工作室阅读(241) 评论(0) 推荐(1)

第八步：页脚信息的表现设置

摘要：首先需要控制页脚的文本显示： Example Source Code[www.52css.com]#footer{clear:both;height:66px;font-family:Tahoma,Arial,Helvetica,Sans-serif;font-size:10px;color:#c9c9c9;} 接着我们需要设置存在链接的文本的显示，在这我们没有改变文本的颜色(仍然为#c9c9c9)，而只是让下划线消失： Example Source Code[www.52css.com]#footera{color:#c9c9c9;text-decoration:none;} 但是我们想.. 阅读全文

posted @ 2011-11-24 13:03 立信软件工作室阅读(208) 评论(0) 推荐(1)

导航

公告

2011年11月24日