CSS+DIV布局实讲.ppt

第一步：规划网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置。 CSS+DIV布局实讲 夏瑜 第一步：规划网站，将以图示为例构建网站 其基本布局见下图 规划网主要由五个部分构成 1.Main Navigation 导航条，具有按钮特效。 Width: 800px Height: 50px 2.Header 网站头部图标，包含网站的logo和站名。 Width: 800px Height: 150px 3.Content 网站的主要内容。 Width: 500px Height: Changes depending on content 4.Sidebar 边框，一些附加信息。 Width: 300px Height: Changes depending on content 5.Footer 网站底栏，包含版权信息等。 Width: 800px Height: 100px。 第二步：创建html模板及文件目录等 1.创建html模板 代码如下 htmlheadtitleTest/titlelink href=“css/mycss.css” rel=“stylesheet” type=“text/css”/headbody/body/html 将其保存为index.html,并创建文件夹css，images，网站结构如下 2.创建网站的大框，即建立一个宽800px的盒子，它将包含网站的所有元素。 在html文件的body和/body之间写入 div id=containerHello world./div 创建css文件，命名为mycss.css,保存在/css/文件夹下。写入： #container {width: 800px;background-color: red;} 控制html的id为container的盒子的宽为800px，背景为红色。表现如下 现在为了让盒子居中，写入margin: auto;，使css文件为： #container {width: 800px;margin: auto;background-color: red;} 现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入： html, body {margin: 0;padding: 0;} 第三步：将网站分为五个div，网页基本布局的基础 第四步：网页布局与div浮动等； 1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入： div id=containerdiv id=main-navMain Nav/div div id=headerHeader/div div id=contentContent/div div id=sidebarSidebar/divdiv id=footerFooter/div/div 2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入 #main-nav {background-color:red; height:100px; } #header {background-color:blue; height:150px; } #content {background-color:green; height:400px; width:250px; float:left; } #sidebar {background-color:yellow; height:400px; width:550px; float:right; } #footer { clear:both; background-color:orange; height:100px; width:800px; } 表现如下 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置。 END