PIZn.Me 是 PIZn 的又一个博客。使用 Jekyll 构建的 GitHub 博客。PIZn.Net 即将迎来 Violet 2.0 !
“.Web页面布局(三)、 1,058 views
布局的灵感
学习画画的时候,布局的灵感来源于平时的观察。选景与构图是息息相关的,选的景物布局恰当,是一幅作品的基础之基础。
在我进行页面布局设计的时候,灵感大部分也是来源于平日里的观察和欣赏优秀作品得来的。灵感这回事,有时候不可靠,有时候就是一瞬间的事情,需要及时的捕抓。如果没有了,那么就正正规规地做个简单点,简洁点的布局吧。
布局上的通用法则
“.Web页面布局(二)、 1,061 views
布局是一个页面或者说是网站界面构架的基础。
Web页面的布局可以分为两类:
1,固定布局
固定布局是指页面有着固定的宽度,例如960px、950px等,居左、居右对齐,或者是居中。所谓的固定还有另外一个方面,是指页面内容的宽度不随浏览器宽口的宽度变化而变化。
使用固定布局,设计师可以很方便地进行设计,即使图片文字混排,一行中的文字长度很容易进行控制。也就是说,使用固定布局可以进行精确控制。
2,流式布局
流式布局又称不固定布局或动态布局。流式布局的页面宽度用百分比来指定,所以当浏览器宽口大小变化时,页面宽度也随之变化,始终填满浏览器。
填满浏览器意味着最大限度地使用了空间,而且避免了页面多余的空白。然而流式布局的局限是难以进行控制,设计时需要多方面的考虑,需要仔细斟酌。
流式固定布局:
最近完成的项目上,我使用了流式固定布局。从名字来看,应该很容易就明白了吧,既要填满窗口,又要固定布局进行精确控制。而在我的这个网站,也使用到了流式固定布局。具体是这样实现的:
1,确定html里的div关系层:
<div id=”head”>
<div class=”header”>
</div>
</div>
<div id=”content”>
<div class=”contenter”>
</div>
</div>
<div id=”foot”>
<div class=”footer”>
</div>
</div>
“.好的主页、 804 views
每当我接触一个新网站的时候,我总是会先考虑这个网站的使命和内容,这是为什么呢?因为一个网站最难的设计在于主页。而优秀的主页并不是一开始就进行设计的,而是自底向上设计——基于网站所提供的信息(或者内容)来设计的。
昨晚做项目的时候,突然有这么一个想法,到底什么样的主页才是一个好的主页呢?让我们来了解一下主页的使命:
1,标识网站,建立品牌
“.Web页面布局(一)、 888 views
引言:
在我小时候,学习画画,老师总爱先教我们如何选景,紧接着就是如何构图。如今设计网页,我想套路也是差不多的。布局就好比建造一座房子的框架,好的布局是人看起来稳定而且清晰明朗。布局应该算是构建一个网页的第一步吧。
如果你拿到设计好的PSD文件,肯定也是会对即将进行开发的页面进行一番研究和分析,之后便是通过合理的布局来实现PSD2HTML。那么,这个时候,css样式表就会派上用场了。
布局基础:
“.css雪碧、 1,033 views
什么是css雪碧?
哈哈,所谓的css雪碧可不是我们平常喝的雪碧的另外一个牌子,而是CSS Sprites。至今仍没有一个合适的中文翻译,所以很多人将其称之为css 雪碧,个人觉得很有趣,而且容易记住。
为什么会有css雪碧?
css雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。这使得你的网站在加载的时候比每一张图片请求一次http来的快写。因而采用这种方法来加快网页渲染。
“.Border 0 and none、 1,162 views
在设计登陆界面的时候,遇到过按钮的问题,input对象有其原本的border属性,为了使得input没有边框,那么经常要用到border:none;来解决。最近发现了border:0;也可以解决,这就纳闷了,这两者都可以实现,那有什么区别呢?
区别如下:
1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
【border:none;】把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP主题下均会出现此情况。
“.浅谈CSS编写风格、 964 views
编写css已经有一段时间了,算有点儿经验,结合网上的一些书写风格,在这里小结一下。
主要的书写风格有2种:
1、横向书写,将所有class和id都排列成纵向的,而该类的属性一律横排过去,例如:
#body{width:100%;height:auto;background:#bbb;font-size:14px;}
#header{width:890px; height:200px; background:#aaa;}
#header .logo{marign:4px;padding:4px;background:ulr(img/1.gif);}
#header .title{font-size:20px; color:#fefefe;}
这样的书写风格的优点是很容易就找到class和id,而且css文件可以不需要压缩就可以很小,因为没有多余的tab和空格键。但编写代码也是一种艺术,代码不仅仅是给自己看的,而且还需要简单易懂。
(在最初的时候,我选择使用横向编写的方法,过了几个月之后再回头去看之前写过的代码,需要花费一定的实际才能明白,所以我一般选择第二种方法)
2、纵向书写、将class和id的每一个属性分配一行来写,采用适当的缩进和层次来编排,例如:
#body{
width:100%;
height:auto;
background:#bbb;
font-size:14px;
}
#header{
width:890px;
height:200px;
float:left;
}
#header .logo{
marign;3px;
border:1px solid #bbb;
}
采用这种写法主要的目的是使得代码可读性比较强,简洁而富有层次感。
注意:在编写css样式表的时候,少不了的是注释。
