班级主页(使用DIV+CSS布局班级主页)资源-CSDN文库

共139个文件

gif：73个

jpg：33个

mht：15个

5星 · 超过95%的资源需积分: 34 177 浏览量 2009-02-21 12:38:06 上传评论 5 收藏 3.17MB RAR 举报

在构建一个班级主页时，使用`DIV+CSS`布局是一种高效且灵活的方法。`HTML`负责页面的内容结构，而`CSS`则负责样式和布局，两者结合可以创建出美观且响应式的网页。以下是对这个主题的详细解释： 1. **HTML（HyperText Markup Language）**：HTML是网页的基础，它定义了网页的结构和内容。在班级主页中，我们可以用`<div>`标签来创建不同的区域，如头部、导航栏、主要内容区、侧边栏和页脚等。`<h1>`到`<h6>`用于设置标题等级，`<p>`用于段落，`<a>`用于链接，`<img>`用于图片，`<ul>`和`<ol>`及`<li>`用于列表等。 2. **CSS（Cascading Style Sheets）**：CSS是网页的样式表语言，用于控制网页的布局和视觉呈现。在班级主页中，我们可以通过CSS来设置`div`元素的宽度、高度、背景色、字体样式、边距、对齐方式等属性，实现页面元素的定位和美化。CSS有多种引入方式，包括内联样式、内部样式表（`<style>`标签）和外部样式表（`.css`文件）。 3. **布局原理**： - **盒模型**：理解CSS盒模型至关重要，它包括元素的内容区域、内边距（padding）、边框（border）和外边距（margin）。通过调整这些属性，可以精确控制元素的大小和位置。 - **浮动布局**：早期的布局方法常使用`float`属性，如让导航栏或侧边栏浮动，以便其他内容围绕它们流动。 - **定位布局**：使用`position`属性（如`static`、`relative`、`absolute`和`fixed`），可以更精细地控制元素的位置。 - **Flexbox布局**：现代布局方案，适用于一维布局，如行或列。通过`display: flex`和相关属性（如`justify-content`、`align-items`等），可以轻松实现内容的弹性分布。 - **Grid布局**：适用于二维布局，如网格系统。使用`display: grid`和相关属性（如`grid-template-columns`、`grid-template-rows`等），可以创建复杂的网格布局。 4. **响应式设计**：考虑到不同设备的屏幕尺寸，班级主页应采用响应式设计。可以利用`media queries`来定义不同屏幕尺寸下的样式，确保页面在手机、平板电脑和桌面电脑上都能良好显示。 5. **CRIMSON2s 网站**：这可能是项目实例或模板的名称，可能包含了一个完整的HTML和CSS文件结构，用于学习和参考。在这个例子中，你可以通过分析和修改代码，了解如何将理论知识应用到实际项目中。构建班级主页时，通过合理的`HTML`结构和有效的`CSS`布局，可以创建出富有吸引力和功能性的页面。同时，理解和掌握响应式设计，能使页面适应各种设备，提升用户体验。实践中，不断学习和实践，是提高网页设计技能的关键。

资源推荐

资源详情

资源评论

收起资源包目录

班级主页(使用DIV+CSS布局班级主页) （139个子文件）

index.dwt 7KB

moban.dwt 5KB

q.gif 32KB

olympic.gif 24KB

229230.gif 19KB

0755pxw.gif 18KB

w.gif 10KB

sousuo.gif 9KB

gif001.gif 8KB

zhongli.gif 7KB

zslogo.gif 7KB

sonyericsson.gif 4KB

main_pic_01.gif 4KB

jiangsu.gif 4KB

job88.gif 3KB

123.gif 3KB

page_07.gif 2KB

page_002.gif 2KB

gdpx_logo2.gif 2KB

baidu.gif 2KB

page_02.gif 2KB

page_05.gif 2KB

page_04.gif 2KB

page_03.gif 2KB

page_06.gif 2KB

splogo.gif 2KB

necrd.gif 2KB

anniu.gif 2KB

page_01.gif 2KB

tcl060403.gif 2KB

background.gif 1KB

right-menu1.gif 491B

tubiao.gif 311B

right-menu2.gif 215B

index-bg-right.gif 207B

index-bg-left.gif 207B

index-bg-right.gif 207B

index-bg-left.gif 207B

left_right_01.gif 198B

left_l_01.gif 197B

index-bg-center.gif 179B

left_m_01.gif 70B

kechengbiao.htm 10KB

index1.html 14KB

inde.html 13KB

zhuce.html 10KB

touxue6.html 9KB

touxue4.html 9KB

touxue3.html 9KB

touxue2.html 9KB

touxue5.html 9KB

touxue1.html 9KB

touxue.html 9KB

教师节.html 8KB

TXL.html 8KB

fanhui.html 705B

zhuye.html 580B

gg.jpg 36KB

top-bg22.jpg 22KB

5.jpg 12KB

product_left_top.jpg 11KB

4546.jpg 10KB

u=3086987358,692430315&fm=0&gp=40.jpg 9KB

共 139 条

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>耀天出品，必属精品</title>  <style type="text/css"> #head{ width:985px; height:99px; font-size:12px; } #img{ width:220px; height:99px; float:left; } #daohanglan{ width:765; height:40px; float:left; margin-top:65px; font-size:14px; font-weight:bold; background-image:url(images/background.gif); } #daohanglan ul li{ float:left; list-style:none; margin-right:10px; padding-top:7px; } #daohanglan a{ text-decoration:none; width:47; height:23; background-repeat:no-repeat; text-align:center; padding-top:3px; color:#FFFFFF; } #daohanglan a:hover{ background-image:url(images/top-bg22.jpg); width:80px; height:31px; color:#FFFF66; } .STYLE1 {color: #FFFFFF} #sousuo a:hover{ color:#FF0000; } #Layer1 { position:absolute; width:760px; height:29px; z-index:1; left: 236px; top: 41px; } #Layer2 { position:absolute; width:849px; height:32px; z-index:2; left: 33px; top: 162px; } #Layer3 { position:absolute; width:112px; height:31px; z-index:3; left: 709px; top: 163px; } #Layer4 { position:absolute; width:59px; height:29px; z-index:3; left: 920px; top: 168px; } #Layer4 a{ text-decoration:none; color:#000000; } #Layer5 { position:absolute; width:484px; height:23px; z-index:4; left: 4px; top: -36px; } #sousuolan{ width:414; height:23; float:left; } #sousuolan ul li{ list-style:none; float:left; padding-top:10px; margin-left:10px; } #sousuolan a{ font-size:14px; text-decoration:none; color:#000000; } #Layer6 { position:absolute; width:417px; height:34px; z-index:1; left: 322px; top: 86px; } #kaifarenyuan a{ color:#FF0000; text-decoration:none; font-size:12px; } #kaifarenyuan a:hover{ color:#FFFFFF; background-image:url(images/right-menu1.gif); width:47px; height:23px; font-weight:bold; } #weibu{ width:985px; height:121px; background-image:url(images/product_left_top.jpg); } .STYLE2 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .STYLE5 {font-size: 14px} </style> </head> <body align=center> <div id="head"> <form> <div id="img"><img src="images/20071018110459476.jpg"></div> <div id="daohanglan"> <ul> <li> <div id="Layer1"> <marquee> <span class="STYLE2">T23班，欢迎你们的光临！~~~(*^__^*) </span> </marquee> <div class="STYLE5" id="Layer6"> <div id="kaifarenyuan" style="color:#FF0000;"> <ul> <li>热门搜索:</li> <li><a href="#">MP3</a></li> <li><a href="#">图片</a></li> <li><a href="#">贴吧</a></li> <li><a href="#">视频</a></li> <li><a href="#">更多...</a></li> </ul> </div> </div> </div> <a href="index1.html">首页</a> <span class="STYLE1">|</span></li> <li><a href="touxue.html#2">相册</a> <span class="STYLE1">|</span></li> <li><a href="Templates/f">概况</a> <span class="STYLE1">|</span></li> <li><a href="#">互动</a> <span class="STYLE1">|</span></li> <li><a href="index1.html#s">文学</a> <span class="STYLE1">|</span></li> <li><a href="touxue.html#3">留言板</a> <span class="STYLE1">|</span></li> <li><a href="touxue.html#4">同学录</a> <span class="STYLE1">|</span></li> <li><a href="#">音乐盒</a> <span class="STYLE1">|</span></li> <li><a href="Templates/a">友情网</a></li> </ul> </div> <div id="sousuo" style="background-image:url(images/sousuo.gif); width:985; height:85;"> <div id="Layer2"> <label> <input name="textarea" type="text" value="" size="100"> </label> <div id="Layer5"> <div style="float:left;"><img src="images/baidu.gif" width="70" height="35"></div> <div id="sousuolan"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">网页</a></li> <li><a href="#">贴吧</a></li> <li><a href="#">知道</a></li> <li><a href="#">MP3</a></li> <li><a href="#">图片</a></li> <li><a href="#">视频</a></li> <li><a href="#">更多...</a></li> </ul> </div> </div> <label> 　　 <input type="submit" name="Submit" value="搜    索" style="background-image:url(images/123.gif); width:100px; height:23px; border:0px; margin:0px; padding:0px; color:blue; font-size:14px; font-weight:bold;"> </label> </div> <div id="Layer4"><a href="#">高级搜索</a></div> </div> </form> </div>  </form> </div> <div id="main"> <div id="left"> <div><table border="0" width="100%" margin="0" padding="0"> <tr> <td align="center" colspan="3"> <div style="float:left;"><img src="images/left_l_01.gif"></div> <div style="float:left; background-image:url(images/left_m_01.gif); background-repeat:repeat-x; width:93.5%; height:31px; color:#FFFF66; text-align:left; padding:5px;">登录</div> <div style="float:right"><img src="images/left_right_01.gif"></div> </td> </tr> <tr> <td>欢迎登录：</td> <td colspan="2"></td> </tr> <tr> <td>今天是星期1：</td> <td> </td> <td> </td> </tr> <tr> <td > </td> <td> </td> </tr> <tr> <td > </td> <td> </td> </tr> </table> </div> <div style="text-align:center; height:200;"> <div style="float:left;"><img src="images/left_l_01.gif"></div> <div style="float:left; background-image:url(images/left_m_01.gif); background-repeat:repeat-x; width:94%; height:31px; padding-top:5px; color:#FFFF66; text-align:left;">班级公告</div> <div style="float:right;"><img src="images/left_right_01.gif"></div> <marquee direction="up" scrolldelay="150">欢迎来到T23！</marquee></div> <div style="text-align:center; height:200;"> <div style="float:left;"><img src="images/left_l_01.gif"></div> <div style="float:left; background-image:url(images/left_m_01.gif); background-repeat:repeat-x; width:94%; height:31px; padding-top:5px; color:#FFFF66; text-align:left;">友情链接</div> <div style="float:right;"><img src="images/left_right_01.gif"></div> <table> <tr> <td><a href="#"><img src="images/图片/jiangsu.gif" border="0"></a></td> <td><a href="#"><img src="images/图片/0755pxw.gif" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/图片/gdpx_logo2.gif" border="0"></a></td> <td><a href="#"><img src="images/图片/job88.gif" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/图片/splogo.gif" border="0"></a></td> <td><a href="#"><img src="images/图片/u=154564228,3949862109&fm=0&gp=6.jpg" width="88" height="31" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/tcl060403.gif" border="0"></a></td> <td><a href="#"><img src="images/lianbang.jpg" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/sonyericsson.gif" border="0"></a></td> <td><a href="#"><img src="images/necrd.gif" border="0"></a></td> </tr> </table> </div> </div> <div id="zhongjian"> <div style="width:47%; float:left; margin-left:8px; height:210px;"> <div style="float:left;"><img src="images/left_l_01.gif"></div> <div style="float:left; background-image:url(images/left_m_01.gif); background-repeat:repeat-x; width:95%; height:31px; padding-top:5px; color:#FFFF66; text-align:left;"><a name="gaikuang">学校概况</a></div> <div style="float:right;"><img src="images/left_right_01.gif"></div> <div id="chaolianjie"> <ul> <li><a href="#">北大青�

评论收藏

内容反馈