实例十步学会用div+css建站
实例十步学会用div+css建站
第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div,网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难); 第十步：解决IE浏览器的显示BUG;
实例十步学会用div+css建站
第一步：规划网站， 第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。 规划网站，本教程将以下图为例构建网站。 规划网站
实例十步学会用div+css建站
其基本布局见下图
实例十步学会用div+css建站
规划网主要由五个部分构成1.Main Navigation 导航条，具有按钮特效。 导航条，具有按钮特效。 Width: 760px Height: 50px 2.Header 网站头部图标，包含网站的 网站头部图标，包含网站的logo和站名。 和站名。 和站名 Width: 760px Height: 150px 3.Content 网站的主要内容。 网站的主要内容。 Width: 480px Height: Changes depending on content 4.Sidebar 边框，一些附加信息。 边框，一些附加信息。 Width: 280px Height: Changes depending on content 5.Footer 网站底栏，包含版权信息等。 网站底栏，包含版权信息等。 Width: 760px Height: 66px。 。
实例十步学会用div+css建站
第二步：创建html模板及文件目录等 第二步：创建html模板及文件目录等 html1.创建 创建html模板 代码如下 模板 创建<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>CompanyName - PageName</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="Enlighten Designs" /> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> </body> </html>
实例十步学会用div+css建站
将其保存为index.html,并创建文件夹css,images,网站结构如下
实例十步学会用div+css建站
2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。 2.
在html文件的<body>和</body>之间写入 <div id="page-container"> Hello world. </div> 创建css文件，命名为master.css,保存在/css/文件夹下。写入： #page-container { width: 760px; background: red; }
实例十步学会用div+css建站
控制html的id为page-container的盒子的宽为760px,背景为红色。表现如下
现在为了让盒子居中，写入margin: auto;,使css文件为： #page-container { width: 760px; margin: auto; background: red; } 现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的
默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入： html, body { margin: 0; padding: 0; }
实例十步学会用div+css建站
第三步：将网站分为五个div, 第三步：将网站分为五个div,网页基本布局的基础 div1.将 第一步”提到的五个部分都放入盒子中， html文件中写入： 1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入： 文件中写入 <div id="page-container"> <div id="main-nav">Main Nav</div> <div id="header">Header</div> <div id="sidebar-a">Sidebar A</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> 表现如下： 表现如下：
实例十步学会用div+css建站
2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来， 在css文件写入#main-nav { background: red; height: 50px; } #header { background: blue; height: 150px; } #sidebar-a { background: darkgreen; } #content { background: green; } #footer { background: orange; height: 66px; }
实例十步学会用div+css建站
表现如下
实例十步学会用div+css建站
第四步：网页布局与div浮动等 第四步：网页布局与div浮动等 div1.浮动，首先让边框浮动到主要内容的右边。用css控制浮动 #sidebar-a { float: right; width: 280px; background: darkgreen; } 表现如下
实例十步学会用div+css建站
2.往主要内容的盒子中写入一些文字。在html文件中写入 <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div>
实例十步学会用div+css建站
表现如下
但是你可以看到主要内容的盒子占据了整个page-container的宽度， 我们需要将#content的右边界设为280px。以使其不和边框发生冲突。 css代码如下： #content { margin-right: 280px; background: green; }
实例十步学会用div+css建站
同时往边框里写入一些文字。在html文件中写入： <div id="sidebar-a"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div>
实例十步学会用div+cs …… 此处隐藏：2722字，全部文档内容请下载后查看。喜欢就下载吧 ……
相关推荐：
- [小学教育]四年级综合实践活动课《衣物的洗涤》教
- [小学教育]2014半年工作总结怎么写
- [小学教育]20世纪外国文学专题综合试题及答案
- [小学教育]TS_1循环使用催化丙烯环氧化反应研究
- [小学教育]最实用的考勤签到表(上下班签到表)
- [小学教育]气候与生态建筑——以新疆民居为例
- [小学教育]二人以上股东有限责任公司章程参考样本
- [小学教育]2014届第一轮复习资料4.1,3美好生活的
- [小学教育]土方开挖、降水方案
- [小学教育]手绘儿童绘本《秋天的图画》(蜡笔)
- [小学教育]2002级硕士研究生卫生统计学考试试题
- [小学教育]环保装备重点发展目录
- [小学教育]金蝶K3合并报表培训教材
- [小学教育]岩浆岩试题及参考答案
- [小学教育]知之深爱之切学习心得
- [小学教育]第十二章 蛋白质的生物合成
- [小学教育]Chapter 2-3 Solid structure and basi
- [小学教育]市政道路雨季专项施工方案
- [小学教育]中国海洋大学2012-2013学年第二学期天
- [小学教育]教育心理学第3章-学习迁移
- 浅谈深化国企改革中加强党管企业
- 2006年中国病理生理学会学术活动安排
- 设计投标工作大纲
- 基于ARP的网络攻击与防御
- 2016届湖北省七市(州)教科研协作体高三
- Google_学术搜索及其检索技巧
- 2019-2020学年七年级地理下册6.3美洲教
- 城市道路可研报告
- 【名师指津】2012高考英语 写作基础技
- 6级知识点培训北京师范大学《幼儿智趣
- 注册会计师会计知识点：金融资产
- 新安装 500 kV 变压器介损分析与判断
- PS2模拟器PCSX2设置及使用教程.
- 医院药事管理与药剂科管理组织机构
- {PPT背景素材}丹巴的醉人美景,免费,一
- NAS网络存储应用解决方案
- 青海省西宁市六年级上学期数学期末考试
- 测量管理体系手册依据ISO10012：2003
- 洞子小学培养骨干教师工作计划
- 浅谈《牛津初中英语》的教材特点及教学
