日期:2014-05-17  浏览次数:20698 次

DIV+CSS布局实例一

主要内容:

  • “结构与表现分离”的设计思想
  • 纵向导航条与横向导航条的切换

【步骤1】

一、效果

二、HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
  <h1 id="logo">INSERT WEBSITE NAME</h1>
  <h2 id="tagline">optional tagline here</h2>
</div>

</body>
</html>


三、CSS

@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	background: url(../images/mm_bg_red.gif);
	color:#f90;
}
ul {
	list-style:none;
}
img {
	border:none;
}

#header {
	height:109px;
	background:#220103 url(../images/header_bg.jpg) no-repeat;
	position:relative;
}
#logo, #tagline {
	position:absolute;
	color:#f90;
	left: 216px;
	font-weight:normal;
	width:300px;
}
#logo {
	font-size:14px;
	letter-spacing:7px;
	top:30px;
}
#tagline {
	font-size:14px;
	letter-spacing:2px;
	top:50px;
	font-size:11px;
}


【步骤2】

一、效果

二、HTML

<div id="xian"></div>


三、CSS

#xian {
	height:26px;
	background:url(../images/xian.gif) repeat-x;
}

【步骤3】

一、效果

二、HTML

<div id="content">
  <ul id="nav">
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">THE SPA</a></li>
    <li><a href="#">TREATMENTS</a></li>
    <li><a href="#">CLASSES</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>

</div>

三、CSS

#nav, #mainCon, #products {
	float:left;
}
#nav {
	padding-top:10px;
	overflow:hidden;
}
#nav li a{
	width:130px;
	height:32px;
	line-height:32px;
	padding-left:30px;
	color:#f90;
	display:block;
	border-bottom:1px solid #f90;
	text-decoration:none;
}
#nav li a:hover{
	color:#fff;
	font-weight:bold;
	background:url(../images/arrow.gif) no-repeat 20px center;
}

四、技术要点:

1、使用无序列表<ul id="nav">时,无需再使用div,与后面两个div(<div id="mainCon">、<div id="products">)并列一行的时候,直接设置它们的float属性即可:

#nav, #mainCon, #products {
 float:left;
}

2、把纵向导航条改成横向导航条:

(1)取消<ul id="nav">的float属性,或者重新设置#nav的float属性为none

#mainCon, #products {
 float:left;
}
#nav {
 padding-top:10px;
 overflow:hidden;

}

#nav,#mainCon, #products {
 float:left;
}
#nav {
 padding-top:10px;
 float:none;
 overflow:hidden;
}

(2)设置<ul id="nav">中的<li>float属性

#nav li
{
    float:left;
}
 

3、这一特性很好的说明了“结构与表现分离”的Web标准设计思想。

 

【步骤4】

一效果:

二、HTML

  <div id="mainCon">
    <h2>WELCOME MESSAGE</h2>
    <p>This Home Page layout makes a great starting point for your website. Virtually all of the content is custo