CSS混沌初开VI:正文与图片的混排
与id不同的是,class类可以在一张页面中重复使用,里面的属性比较简单,需要补充一下的是,11px/18px表示字体大小是11px,行高是18px。在XHTML中,我们添加一个段落标签P来放置文本。
与id不同的是,class类可以在一张页面中重复使用,里面的属性比较简单,需要补充一下的是,11px/18px表示字体大小是11px,行高是18px。在XHTML中,我们添加一个段落标签P来放置文本。
作用于导航中的每个链接元素。display: block将链接对象转换为块级元素,然后再定义其宽和高,使得链接能具有类似按钮一样矩形的触发区域,并且让我们可以利用伪类a:hover来定义鼠标经过链接时的翻转效果。
合理的组织CSS和XHTML,让最终出炉的网页具有更好的灵活性和可访问性。我们必须明确几个问题,比如设计好的界面应该划分成几块?每块对应网页中的哪部分内容?只有对这些问题有了概念之后,我们才能开始进行切片和导出的操作。
一个系列教程,分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细,但是其中提及的很多技巧和经验都很值得初学者借鉴,从界面设计到页面构建,强调了很多细节的设计理念。
一是如何正确选择导航菜单中所涉及的颜色,虽然它没有很多的技术含量,但使用的颜色是否恰当,与后期出来的效果是有很大影响的;另外一部分主要是关于页面背景的,侧重于制作背景图片素材时的一些细节问题。
现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个部分:第一讲主要是关于如何在PS中制作导航按钮素材;第二部分主要针对的内容是背景,接着是页面的整体布局以及顶部解析,最后一部分是如何整合CSS和XHTML。
多数2.0风格的网站都会适当的使用微妙的3D效果来提升用户对设计质量的体验,我们都知道这些细节有很好的辅助作用,但是我们可能不知道其中的奥妙。诸如投影、斜角、倒影之类的视觉设计,使得网站的外观看起来更加贴切、实在以及“完美”。