导读： 利用DIV+CSS设计《网站首页》， 是一个网站首页以及一些效果 目 录（参考文章http://houdunwangcom/lessonhtml） 之一章课程设计的内容与要求 4 第二章网页设计的思路 5 1建立站点； 5 4
利用DIV+CSS设计《网站首页》， 是一个网站首页以及一些效果
目 录（参考文章http://houdunwangcom/lessonhtml）
之一章课程设计的内容与要求 4
第二章网页设计的思路 5
1建立站点； 5
4切割效果图； 6
41．头部导航栏 6
42．主体 7
43．底部 8
5布局页面——头部和导航； 8
(1)视图： 8
(2)代码实现： 9
6布局页面——侧边栏； 10
61．该布局为右侧边栏 10
(1)视图： 10
(2)代码实现: 10
62：该布局为右侧边栏 13
(1)视图： 13
(2)代码实现： 13
7布局页面——主体部分； 14
(1)视图 14
(2)代码实现： 14
8底部和细节调整。 17
(1)底部视图 17
(2)代码实现： 18
第三章程序代码与视图 19
1程序代码： 19
2 对于整个页面实现的效果图为： 25
第四章课程设计心得 27
第五章参考文献（资料） 29
更多问题到问题求助专区《http://bbshoudunwangcom/》
只修改了 css 部分 没有修改你的 html部分
必要的地方那个写了些注释，希望对你有帮助。
<style>
img{
float:left;/必须 浮动 方便其他不浮动的容器环绕 /
width:100px;
height:100px;
padding:0px;
border:none;
margin:10px;
}
P{}
span{ background:#00FFCC; line-height:08;wdith:350px;/ 这里的 宽度=350px 是你写的 没有用。 span默认是内嵌属性容器，没有宽度 需要display：block;或display:inline-block；后 宽度才有用，
这里不需要 变成块属性 变成块属性 就不环绕了。宽度删除了吧，没有用！/}
div {
width: 400px;background:#CC6666;/在这个html结构中 宽度 不要 给 p 标签 ，p 标签得到宽度后 回变成 块属性 方块就不会环绕 了。 背景 和宽度 都给外层容器/
}
</style>
不知道和不和你意思，欢迎交流学习，如果还有其他问题欢迎到空间浏览
空间地址 见参考资料
网页设计代码不直接打空格的原因如下：
1、网页设计代码不直接打空格是因为空格在HTML和CSS中被视为无效的字符，它们只是用来增加代码的可读性和易于理解。
2、空格被称为“白空格”，包括空格、制表符和换行符。在编写HTML和CSS代码时，可以使用空格来分隔标记和属性，使代码更易于阅读和理解。
3、但是，在编写代码时，不应该过度使用空格，因为它们会增加文件大小并降低加载速度。
4、因此，为了编写高质量的代码，应该遵循更佳实践，包括使用适当的缩进和分隔符来组织代码，而不是仅仅使用空格。所以网页设计代码不直接打空格。网页设计代码是指用于创建和设计网页的编程语言和标记语言，例如HTML、CSS、JavaScript等。这些代码可以用来定义网页的结构、样式和交互行为。
相信很少有人会在网页设计的过程中把代码设计单独拿出来说，虽然在软件设计中代码设计很受重视，但在web设计里，大家更关心网站结构设计、数据库设计、页面视觉设计，很少有人会真正关心前端代码设计。这恰恰是因为代码设计的优劣不是一般用户所能感觉出来的，设计得差的前端代码，在用户使用过程中也许毫无影响，却能将前端工程师和web程序员弄得一塌糊涂。
DIV的规范及科学统筹
说到前端代码，不能不说DIV架构。目前主流的网站页面架构方式已经转向DIV+CSS的结构层和表现层脱离的方式，这个过程也叫做网站的标准化。这与以往的利用表格定位的方式完全不同，更加强调了界面元素的模块化定位，由DIV确定模块的界限，再由CSS代码表现该DIV元素的表现形式。
在DIV的布局方式中，我们更多强调的是规范，因为DIV的ID名称和CLASS类名称是能够由代码编写者自行定义的，所以有明确规范的DIV设计是前端代码设计的前提。如今的web工作往往牵涉到一个团队中的多人进行协作开发，代码被阅读和被修改的次数远远多于它被编写的次数，而保持代码易读、易修改的关键，就在于在代码编写前期确定能被认同的代码规范。
首先我们先了解DIV架构中的命名规则，DIV的许多规范要点体现在ID或者CLASS的命名中，绝大多数设计师习惯使用属性命名方式：即显示绿色14号字的类就命名为green14，蓝色背景区域的类就命名为blueBg。这样命名也未尝不可，但是这样的命名方式对于合作的其他职能部门的同事来说，是毫无意义的。PHP程序员不会关心这个类的字是什么颜色，他只管这块区域应该和哪个程序模块接口；模板编辑也不会关心背景究竟该是什么颜色，他只管哪个区域是用来显示头图、哪个区域显示全站导航和全站通用底部。所以我们比较倡导表意命名方式和接口命名方式，比如pageHead和loginArea这样的命名，pageHead明确表示了这块区域的意思，而loginArea指代了这是个登录区域的接口。不管这两个类里的字号颜色等将来因为改版发生了什么改变，它们起到的作用和所定义的固定区域是不会改变的。
其次我们了解一下DIV中类的复用，同一个页面中，DIV的ID是唯一的，表示该页面上独一无二的一种特定表现；而CLASS（类）是可以无限重复使用的，表现该页面上有某些属性相同的若干区域，所以DIV的复用仅仅指的是类。牵涉到复用的时候，类的命名应该尽量多地表意化，有必要的情况下使用属性命名也能起到很好的效果。比如页面中有很多个不同的内容列表区块，但是宽度都是760px，那么使用contList760这样的类名称进行复用就比contListA、contListB、contListC……这样单独且表意不明显的命名要好得多。如图1所示的网站alistapartcom，由图2我们可以看出，它的代码设计非常规整。
名词解释
CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者通过使用样式表格式化这个块来进行控制。
DIV+CSS是网站标准（或称“Web标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
CSS整站规划――网站设计的重中之重
说过DIV当然要说说CSS，CSS使现代网站大放异彩。符合标准化的网站，仅仅通过更换一个不同的CSS文件，就可以瞬间实现整站所有页面改变更新的显示效果。CSS统一了网页的表现层，而不影响网站结构和数据传输。
而CSS的书写方式也因设计师的不同而各有千秋，在此，我们强调CSS的设计关键在于代码的缩略与复用：缩略能使CSS代码更加简明扼要，CSS文件也能缩小体积；复用则是提高代码的利用率，以最少的代码实现更高的重复使用效率。如图3所示，腾讯网的CSS设计就十分优秀。
首先我们来看代码的缩略，很多编辑器生成的CSS代码片段会像图4一样杂乱随意，而实际上这段代码能缩略掉所有不需要的空格，组合起同系列元素，使得代码行读起来更加轻松无负担。
毕竟，编辑器是按照一定的程序运算而提供出来的CSS样式，它能自动实现预期效果的CSS样式，而绝不会自动精简代码。这个过程还是需要人的干预，而且对于不同的应用场合，CSS代码中的缩略方式也会有所不同，而取谁舍谁，则完全看具体情况而定了。
其次，我们来了解CSS的复用。同样是复用，CSS的复用情况和DIV很不同。设计中我们需要尽量实现CSS代码的复用，尽量多利用CSS的继承和层叠，而不是到处定义新的CSS类。在繁琐的CSS设计中，也许会遇见两个大部分属性一致而只有某一两个细节不同的类，那么可以考虑这两个类是否是继承关系，或者说将它们相同的属性提炼出来，形成另一个可供公用的类。
后期整理――代码也可以很美
之前说的都是代码编写的前期规范，而页面完成之后，代码的后期整理对于今后的修改维护“可持续发展”也非常重要。在这里，我们需要注意以下几个方面的内容。
1样式表统一：样式表分为内联样式表和外联样式表，成型的网站架构要求对样式表统一管理，所有的样式表都需要独立出来，作为一个或几个外联样式表文件；除非是极特殊的情况，该CSS只在这一个页面中出现，不会有另外的页面需要复用它，那么可以考虑使用内联，而内联样式很多时候会被视为极不专业的做法。如图5，色影无忌网站的设计从外观看很符合标准化设计，但从图6我们可以看出色影无忌的代码设计非常混乱。
2注释：再科学、再规范的代码，也不见得能一眼就被其他人读懂，所以这个时候需要代码注释。CSS的注释很简单，在HTML里的DIV注释因为其层级嵌套关系的问题，需要使用和的方式进行包含处理，这样能使代码更加模块化。如图7所示，新浪的页面注释就很整齐。
3空格：关于CSS代码中的空格问题一直被激烈地讨论着，我的主张是，在页面发布之前，因为代码的规整而产生的空格是没有问题的，这样更便于编辑与调试，而在网站定稿上线后，可以将CSS类里的空格换行都删除，每个定义类都并成一行代码，这样既能压缩文件空间，也能使所有类的名称整齐划一，便于查找。
4其他：有些编辑器产生的CSS代码会出现大写字符，建议统一修改成小写，而对color:#666666之类的颜色代码，可以缩写为color:#666。这对维护没增加什么困难，而且确实减小了文件体积。
CSS标准化在页面应用的补充
● 摒弃table布局不是说禁止使用table，table标签仍可以用在容纳表格型数据的场合，而不用于页面布局的目的。
● 页面中的标签都是带有结构含义的，尽量少因为布局的目的引入额外的div标签。
● 页面中的结构与表现完全分离，结构位于html文件中，表现位于css文件中。
● 尽量使用通用的CSS语法，少用特定于某种浏览器的CSS语法。必需要用的，则将这类语法隔离在单独的css文件中，以便日后浏览器升级后删除。
复制进去试试看哦STRONG,B{FONT-WEIGHT: NORMAL!IMPORTANT;}#MAIN{MARGIN-BOTTOM:-48PX;BACKGROUND-IMAGE:URL(
" target="_blank" >
);BACKGROUND-REPEAT:NO-REPEAT;BACKGROUND-POSITION:-50% 100%;WIDTH:1024PX!IMPORTANT;MARGIN-LEFT:-10PX}#HEADER{HEIGHT:374PX;PADDING-LEFT:100PX;MARGIN-LEFT:0PX;BACKGROUND:URL NO-REPEAT CENTER TOP;}#HEADER DIVLC{}#HEADER DIVRC{}#HEADER DIVTIT{TOP:100PX;LEFT:80PX;LINE-HEIGHT:24PX;FONT-SIZE:20PX;FONT-FAMI *** :微软雅黑;FONT-WEIGHT:NORMAL;COLOR:#FFF;}#HEADER DIVTIT ATITLINK{COLOR:#BDAB92;TEXT-DECORATION:NONE}#HEADER DIVTIT ATITLINK:VISITED{COLOR:#BDAB92;TEXT-DECORATION:NONE}#HEADER DIVDESC{TOP:120PX;LEFT:80PX;COLOR:#BDAB92;FONT-SIZE:12PX;FONT-FAMI *** :TAHOMA;} #TAB{WIDTH:AUTO!IMPORTANT;DISPLAY:TABLE;HEIGHT:30PX;LEFT:11 *** X;TOP:255PX;}#TAB A{PADDING-LEFT:0!IMPORTANT;FONT-SIZE:0PX;PADDING-RIGHT:0!IMPORTANT;HEIGHT:0PX;LINE-HEIGHT:15PX;OVERFLOW:HIDDEN;BACKGROUND:#BDAB92;DISPLAY:BLOCK;FLOAT:LEFT;WIDTH:64PX;}#TAB AON{PADDING:0PX!IMPORTANT;}#TAB A,#TAB A:LINK,#TAB A:VISITED{FILTER:ALPHA(OPACITY=0);FONT-SIZE:1PX;}#TAB A:HOVER{COLOR:#383229;BACKGROUND:#BDAB92;FONT-SIZE:0PX;FILTER:ALPHA(OPACITY=30)}#TAB AON,#TAB AON:LINK,#TAB AON:VISITED,#TAB AON:HOVER{COLOR:#383229;BACKGROUND:#BDAB92;FONT-SIZE:1PX;FILTER:ALPHA(OPACITY=50)}#TAB SPAN{DISPLAY:NONE}#TAB LINE{DISPLAY:NONE}STAGE{ MARGIN-TOP:0PX;MARGIN-BOTTOM:144PX;TEXT-ALIGN:CENTER;BACKGROUND:URL(
" target="_blank" >
) REPEAT-Y CENTER;}STAGEPAD{WIDTH:880PX!IMPORTANT;MARGIN:0 AUTO;POSITION:RELATIVE!IMPORTANT;MARGIN-TOP:-290PX}#LAYOUT{WIDTH:AUTO;WIDTH:880PX!IMPORTANT;MARGIN:0 AUTO;}#LAYOUT{POSITION:RELATIVE!IMPORTANT;MARGIN-TOP:-290PX}#LAYOUT TDC1T1,#LAYOUT TDC2T1,#LAYOUT TDC2T3,#LAYOUT TDC3T1,#LAYOUT TDC3T3,#LAYOUT TDC3T5{PADDING-TOP:10PX;}#LAYOUT TDC2T1{PADDING-LEFT:0PX;PADDING-RIGHT:2PX; }#LAYOUT TDC2T3{}#LAYOUT TDC2T2{WIDTH:10PX;BORDER-LEFT:# DOTTED 1PX ; }#LAYOUT TDC2T2{BORDER-LEFT:#595041 DASHED 0PX ; }
一、可以重载css定义，比如主页indexhtm引用了bodycss式样<link href="js/bodycss" rel="stylesheet" type="text/css"> ，而js/bodycss里面有如下定义：
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 75pt;
color: #999999;
line-height: 11pt;
}
那么你可以在indexhtm中重新定义th，只要在<link>语句之后就有效，例如：
<link href="js/bodycss" rel="stylesheet" type="text/css">
<style type=text/css>
th {
font-size: 13pt;
color: #123456;
line-height: 18pt;
}
</style>
二、如果只是部分th表格需要使用特殊格式，武林是否使用了上面的方式重载，都可以单独为部分表格指定格式，例如:
<table><tr><th style='font-size:13pt'>
