基于CSS进行设置实现的一个首页-优快云博客

本文链接：https://blog.youkuaiyun.com/cxwen78/article/details/6639485

通过实现设计模型中的页面，来深入学习CSS的背景知识以及定位。

设计模型图如下所示：

一、设计要求：

设计是流式的(fluid)或易于变化的，也就是说它的高度和宽度应该能够子的哦哦那个适应用户的浏览器，同时保持所需的比例。具体要求如下：

1）位于左侧的每个图片必须固定在原有的位置；

2）树和LOGO必须能够向右侧移动，即树必须一直与布局的底部相关联；

3）层次上，树不能遮挡logo以及其他板块，必须处于最下层；左侧的图片模块在最顶层。

二、CSS背景的基本概念：

先看一段背景属性的CSS代码：

body{
      background: #1299AB url(images/myBackground.gif) no-repeat fixed 10% 50px;
}

CSS的背景可以分解成5个独立的属性：颜色、图片、重复、附加和位置。下面着重介绍重复、附加和位置这三个属性。

1、重复：重复属性规定的是图片的重复情况，它有几个有效的取值：n0-repeat（不重复，图片只产生一次），repeat-x（水平方向上从左到右重复），repeat-y（使图片从元素顶端开始沿着Y轴重复），repeat（属性的默认值，从元素左上角开始平铺整个元素）。

2、附加：附加属性定义“位置”属性的计算是与页面内容相关，还是与浏览器视口相关。所以它有两个有效值，fixed和scroll(默认值)。fixed可以约定背景图片将固定不动，而scroll则约定背景图片会随着页面其余部分滚动而移动。

3、位置：这个属性定义了背景图片起始的X和Y坐标。确定背景图片X坐标的水平方向的关键字有：left（默认值）、center、right；确定背景图片Y坐标的垂直方向的关键字有：top（默认值）、center、bottom；其他的有效选择还有：相对值（百分比）或绝对值（px/em/mm/pt）.

三、HTML页面

回到实例中，根据设计模型，编写实现的HTML代码如下：

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<!--meta标记定义的字符集是支持中文的gb2312-->
		<meta http-equiv=content-type content="text/html; charset=gb2312">
		<!--链接外部CSS样式 -->
		<link rel="stylesheet" href="deadwood.css" type="text/css" media="screen" />
		<title>Deadwood Design</title>
	</head>

	<body>
		<!--页面的logo -->
		<h1 id="logo">Deadwood Design</h1>
		<!--页面上的介绍信息 -->
		<div id="intro">
			<p><span>D</span>eadwood design is Australia's 47th best 
			web design and development agency.</p>
			<p>We specialise in awesomeness.</p>
		</div>

	<!--为排序列表显示图片，理论上是要放入页面作品区portfolio的DIV块中，并将浅色格子作为背景，但是IE对z-index支持不好，所以把这个列表置于div外 -->
    <ul>
      <li><a href="1.html"><img src="images/portfolio1.jpg" alt="Mountains and Sky"/></a></li>
      <li><a href="2.html"><img src="images/portfolio2.jpg" alt="Lampshade"/></a></li>
      <li><a href="3.html"><img src="images/portfolio3.jpg" alt="Cat"/></a></li>
      <li><a href="4.html"><img src="images/portfolio4.jpg" alt="Bark"/></a></li>
      <li><a href="5.html"><img src="images/portfolio5.jpg" alt="Thumbs Up"/></a></li>
      <li><a href="6.html"><img src="images/portfolio6.jpg" alt="Flowers"/></a></li>
    </ul>
	<!--设计一个格子模型延伸横跨整个页面，并位于树的图像之下 ，所以HTML中，portfolio div块先与tree div-->
    <div id="portfolio"></div>
	<!--在DIV元素中放置页面右下角的枯树图片 -->
	<div id="tree"></div>
	</body>
</html>

对HTML代码解读的示意图如下所示：

四、CSS代码

为上述页面编写的CSS代码如下：

/*CSS STYLE SHEET FOR [基于CSS进行设置实现的一个首页] 
	Created by [Serein_Chan]
	Email: [Serein_Chan@foxmail.com]
	Author Blog:[http://blog.youkuaiyun.com/cxwen78]
*/

/*注释 */
/*body的样式 */
/*背景图片水平方向重复，图像的最底端的颜色与背景颜色灰色 #A4A4A4接近，实现效果，适应性高，效率高 */
body {
  background: #A4A4A4 url(images/bg_gradient.gif) repeat-x;
}
/*树DIV块的样式 */
#tree {
  position: absolute;  /*要将DIV固定在右下角，所以采取绝对定位*/
  bottom: 0;  /*紧贴页面底部 */
  right: 40px; /*和页面右侧距离40px */
  background: url(images/tree.gif) no-repeat; /*背景图片，不重复 */
   /*根据图片大小设置DIV的宽度和高度 */
  width: 331px;
  height: 400px;
}

/*logo DIV块的样式 */
#logo {
  position: absolute;  /*要使DIV块与页面顶部和右侧距离固定，采取绝对定位*/
  top: 15%;	/*采用百分比值使得logo更好的适应显示器*/
  right: 40px;	 /*和页面右侧距离40px */
  width: 334px;
  height: 36px;
  background: url(images/logo.gif) no-repeat;  /*背景LOGO图片，不重复 */
  text-indent: -9999em;   /*HTML中添加h1描述使页面具有意义，这里设置负的text-indent把文本反向转移到页面之外*/
  margin: 0;
  z-index: 3;  /*具有较高z-index值的元素会覆盖值低的元素，即将logo置于tree的上层 */
}

/*介绍性段落的DIV块的样式 */
#intro {
  position: absolute;
  top: 15%;		/*与logoDIV块呼应，将div置于距顶部15%*/
  left: 40px;	 /*距body元素的左边界40px的位置 */
  background: url(images/d.gif) no-repeat;/*段落的第一个字母D是图片 */
  padding: 5px 0 0 61px;	/*为了确保文本不会覆盖这个div的背景图片，分别在图片左侧和顶部添加61px和5px的内边距补白 */
  width: 250px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 0.8em;
}

/*为确保文本Deadwood的完整性，将文本字母D插到span元素中，并将其置于页面之外 */
#intro span {
  position: absolute;
  top: -1000px; /*将span元素置于页面之外 */
}

#intro p {
  margin: 0 0 12px 0;
}

 /*页面的作品区，包括6个链接，分别链接到不同页面来展示作品集 */
  /*样式要求，设计一个格子模型延伸横跨整个页面，并位于树的图像之下 ，所以HTML中，portfolio div块先与tree div*/
#portfolio {
  position: absolute;
  top: 35%;
  left: 0;
  width: 100%;
  height: 294px;
  background: url(images/bg_checkered.gif);   /*用一张40*40的方块图像作为格子背景 */
}

/*未排序列表显示作品集 */
ul {
  position: absolute;
  top: 35%;
  left: 40px;
  padding:0;
  z-index: 4;	/*具有较高z-index值的元素会覆盖值低的元素，即将置于portfolio和tree的上层 */
  list-style: none inside;  /*列表样式：无标记；列表项目标记放置在文本以内，且环绕文本根据标记对齐。*/
  width: 482px;
  height: 294px;
  margin: 0;
}

ul li {
  width: 138px;
  height: 138px;
  float: left;
  margin: 0 18px 18px 0;
  background: url(images/bg_checkered_dark.gif); /*设置8*8像素的格子图片做背景，显得颜色更深一点 */
}

/*链接图像区域的设置 */
ul li a {
  float: left;
  width: 102px;
  height: 102px;
  margin: 18px 0 0 18px;
}

ul li a img {
  border: 0;
}

大功告成，最终的效果图如下：