DIV+CSS格局实例一-HTML教程-爱易网页

DIV+CSS格局实例一

日期：2014-05-17　浏览次数：20913 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

DIV+CSS格局实例一

相关资料更多>

推荐阅读更多>