css+div布局实例_div布局实例资源-CSDN下载

共521个文件

jpg：229个

html：178个

gif：52个

css+div布局实例

4星 · 超过85%的资源需积分: 9 196 浏览量 2009-06-18 14:03:37 上传评论 2 收藏 8.88MB RAR 举报

在网页设计领域，CSS（Cascading Style Sheets）与DIV元素是构建现代网页布局的核心技术。CSS+DIV布局实例是学习网页布局时不可或缺的一部分，它能够帮助开发者掌握如何有效地利用CSS控制网页元素的布局和样式，实现灵活多变的设计效果。 CSS是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。它允许我们将样式信息与结构内容分离，使页面设计更加清晰，维护更为便捷。CSS可以控制字体、颜色、大小、间距、位置等视觉元素，以及元素的对齐方式、浮动属性、背景图像等。 DIV元素，全称为“division”，是HTML中的一个通用容器，通常用于组合HTML元素并为其应用样式。通过CSS，我们可以为DIV设置宽度、高度、边距和填充，从而创建各种布局模式。例如，可以使用浮动（float）属性实现流式布局，或者使用定位（positioning）属性实现固定、绝对或相对定位，进一步实现复杂的布局设计。在CSS+DIV布局实例中，我们通常会遇到以下知识点： 1. **盒模型**：理解CSS盒模型是布局的基础，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。 2. **选择器与属性**：熟练使用类选择器、ID选择器、元素选择器以及伪类和伪元素，来精确地选中需要操作的DOM元素。同时，掌握常见的CSS属性，如display、position、float、clear、width、height等。 3. **布局模式**：学习流式布局（流动布局）、网格布局（grid system）、Flex布局（Flexible Box）和CSS Grid布局，它们分别适用于不同场景，提供更高效、灵活的布局解决方案。 4. **响应式设计**：了解媒体查询（media queries）的应用，使得页面能在不同设备和屏幕尺寸上自动适应。 5. **浮动与清除**：通过浮动元素，可以让元素在父元素内左右排列，而清除浮动则可以解决因浮动引起的父元素高度塌陷问题。 6. **定位**：掌握static、relative、absolute和fixed四种定位方式，以及z-index属性控制元素的堆叠顺序。 7. **CSS预处理器**：如Sass、Less和Stylus等，它们提供变量、嵌套规则、混合、函数等功能，让CSS编写更简洁、易于维护。 8. **性能优化**：了解CSS性能优化技巧，如减少重绘和回流，合理组织CSS代码，避免使用!important等。 9. **浏览器兼容性**：理解不同浏览器对CSS的支持程度，合理使用前缀和处理兼容性问题。通过深入学习和实践CSS+DIV布局实例，你可以提升网页设计能力，创造出美观且功能强大的网页界面。在实际工作中，结合HTML5的新特性，如section、article、nav等语义化标签，以及现代布局技术如Grid和Flexbox，可以更好地应对各种网页布局挑战。

资源推荐

资源详情

资源评论

收起资源包目录

css+div布局实例（521个子文件）

01.css 9KB

02.css 9KB

03.css 8KB

20.css 4KB

19.css 4KB

18.css 4KB

16.css 3KB

8-9.css 2KB

17.css 2KB

11-6catalog.css 2KB

14-8.css 1KB

index.css 1023B

11-6ppt.css 1009B

14-7.css 542B

14-6.css 495B

1.css 114B

14-5.css 85B

2.css 62B

3.css 46B

Thumbs.db 103KB

Thumbs.db 76KB

Thumbs.db 70KB

Thumbs.db 69KB

Thumbs.db 61KB

Thumbs.db 30KB

Thumbs.db 29KB

Thumbs.db 26KB

Thumbs.db 23KB

Thumbs.db 19KB

Thumbs.db 8KB

Thumbs.db 7KB

Thumbs.db 6KB

Thumbs.db 5KB

Thumbs.db 4KB

baby.gif 16KB

mypic_bg.gif 10KB

tiger.gif 8KB

muma.gif 7KB

fishing.gif 7KB

girl.gif 5KB

picture_h1.gif 4KB

bg8.gif 3KB

route_h1.gif 3KB

bg9.gif 2KB

2.gif 916B

1.gif 909B

6.gif 907B

5.gif 899B

3.gif 886B

4.gif 881B

03.gif 388B

right_right.gif 147B

icon.gif 104B

bg.gif 96B

arrow4.gif 63B

arrow5.gif 58B

icon1.gif 55B

arrow6.gif 55B

arrow4.gif 55B

icon2.gif 55B

arrow1.gif 55B

icon1.gif 55B

icon.gif 55B

icon5.gif 54B

arrow4.gif 53B

icon3.gif 52B

icon6.gif 52B

icon2.gif 52B

icon1.gif 52B

arrow5.gif 52B

arrow2.gif 52B

icon4.gif 51B

icon1.gif 51B

arrow3.gif 51B

icon1.gif 51B

arrow5.gif 51B

arrow2.gif 51B

arrow1.gif 51B

arrow3.gif 50B

arrow2.gif 50B

arrow6.gif 50B

arrow3.gif 50B

12-1.html 11KB

4-10.html 9KB

16.html 7KB

15-2.html 6KB

13-6.html 5KB

11-6.html 5KB

19.html 4KB

18.html 3KB

6-4.html 3KB

共 521 条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>CSS博客</title> <script language="javascript"> var number = new Date().getSeconds() % 3 + 1; //随机数，从1到3 //随机选择CSS外部文件 document.write('<link href="0' + number.toString() + '/0' + number.toString() + '.css" rel="stylesheet" type="text/css">'); </script> </head> <body> <div id="container"> <div id="globallink"> <ul> <li id="one"><a href="#">首页</a></li> <li id="two"><a href="#">论坛</a></li> <li id="three"><a href="#">推荐</a></li> <li id="four"><a href="#">最新日志</a></li> <li id="five"><a href="#">最新评论</a></li> <li id="six"><a href="#">尚未登录</a></li> </ul> <br> </div> <div id="parameter"> <div id="lstatistics"> <h3 class="statistics"><span>样式统计</span></h3> <ul> <li>用户: <b>893</b> 人</li> <li>日志: <b>4397</b> 个</li> <li>评论: <b>4596</b> 篇</li> </ul> <br> </div> <div id="lhotblog"> <h3 class="hotblog"><span>热门博客</span></h3> <ul> <li><a href="#">艾萨克</a> <<a class="author1" href="#">isaac</a>></li> <li><a href="#">詹尼花儿</a> <<a class="author1" href="#">jennifer</a>></li> <li><a href="#">流觞</a> <<a class="author1" href="#">shenhuanyan</a>></li> <li><a href="#">CYBERSPACE</a> <<a class="author1" href="#">cyber</a>></li> <li><a href="#">小舔一下</a> <<a class="author1" href="#">LifeSucks</a>></li> <li><a href="#">楚岑·洗心</a> <<a class="author1" href="#">popla</a>></li> <li><a href="#">小孩儿</a> <<a class="author1" href="#">bazhuazhua</a>></li> <li><a href="#">未名空间</a> <<a class="author1" href="#">sheva</a>></li> <li><a href="#">Dark City</a> <<a class="author1" href="#">freax</a>></li> <li><a href="#">E心E意&36</a> <<a class="author1" href="#">moonbow</a>></li> </ul> <br> <span><a href="#">更多</a> <a href="#">OPML</a></span> </div> <div id="lrecent"> <h3 class="recent"><span>最近更新</span></h3> <ul> <li><a href="#"><span>托波索的小屋</span></a> <<a class="author1" href="#">quixote</a>></li> <li><a href="#"><span>小孩儿</span></a> <<a class="author1" href="#">bazhuazhua</a>></li> <li><a href="#"><span>詹尼花儿</span></a> <<a class="author1" href="#">jennifer</a>></li> <li><a href="#"><span>E心E意&36</span></a> <<a class="author1" href="#">moonbow</a>></li> <li><a href="#"><span>Beyond Paradise</span></a> <<a class="author1" href="#">sherrielin</a>></li> <li><a href="#"><span>加州旅馆</span></a> <<a class="author1" href="#">zhanxiongfei</a>></li> <li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li> <li><a href="#"><span>个人文集</span></a> <<a class="author1" href="#">sherry</a>></li> </ul> <br> <span><a href="#">更多</a> <a href="#">OPML</a></span> </div> <div id="lapply"> <h3 class="apply"><span>最新申请</span></h3> <ul> <li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li> <li><a href="#"><span>蓝空霞彩</span></a> <<a class="author1" href="#">wcylester</a>></li> <li><a href="#"><span>随缘</span></a> <<a class="author1" href="#">matata</a>></li> <li><a href="#"><span>大山的孩子</span></a> <<a class="author1" href="#">tuonene</a>></li> <li><a href="#"><span>伊的四季</span></a> <<a class="author1" href="#">Ifishamm</a>></li> <li><a href="#"><span>SONG, original</span></a> <<a class="author1" href="#">song</a>></li> <li><a href="#"><span>买买提※温和的树</span></a> <<a class="author1" href="#">mimiti</a>></li> </ul> <br> <span><a href="#">更多</a> <a href="#">OPML</a></span> </div> </div> <div id="mainsupport"> <div id="recommendblog"> <h3><span>博客推荐</span></h3> <span><a href="#">詹尼花儿</a> <a class="author2" href="#">jennifer</a></span> <ul> <li><a href="#"><span>禅</span></a></li> <li><a href="#"><span>又地震了</span></a></li> <li><a href="#"><span>老李说</span></a></li> <li><a href="#"><span>地铁发飙记</span></a></li> <li><a href="#"><span>“王”者归来</span></a></li> </ul> <br> </div> <div id="currenttime"> <p class="p1"><script language=javascript src="date.js"></script></p> <p class="p2"><script language=javascript src="lunar.js"></script></p> <ul> <li><a href="#" title="进入自己的博客">*</a></li> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> <li><a href="#">F</a></li> <li><a href="#">G</a></li> <li><a href="#">H</a></li> <li><a href="#">I</a></li> <li><a href="#">J</a></li> <li><a href="#">K</a></li> <li><a href="#">L</a></li> <li><a href="#">M</a></li> <li><a href="#">N</a></li> <li><a href="#">O</a></li> <li><a href="#">P</a></li> <li><a href="#">Q</a></li> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> <li><a href="#">U</a></li> <li><a href="#">V</a></li> <li><a href="#">W</a></li> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> <br> </div> <div id="blogsearch"> <ul> <form> <li id="sear1">博客搜索:<input name="keyword" type="text" size="13" onMouseOver="this.focus();" onFocus="this.select();"></li> <li id="sear2"><input type="hidden" name="exact" value="0"></li> <li id="sear3"><input type="radio" name="key" value="u" checked>ID</li> <li id="sear4"><input type="radio" name="key" value="c">名称</li> <li id="sear5"><input type="radio" name="key" value="d">描述</li> <li id="sear6"><input type="submit" value="GO"></li> </form> </ul> <br> </div> <div id="logoin"> <ul id="per"> <form name="form1"> <li id="per1">用户名: <input type="text" class="textinput1" onMouseOver="this.focus()" onFocus="this.select()" name="id" maxlength="12" tabindex="1"> <input type="submit" value="登录" tabindex="3"></li> <li id="per2">密  码: <input type="password" class="textinput2" name="passwd" maxlength="39" tabindex="2"> <input type="button" value="注册" onClick="window.location='/bbsreg0.html';return false;" tabindex="4"></li> </form> </ul> <br class="br2"> </div> <div id="recommendart"> <h3><span><a class="middle" href="#">文章推荐</a></span></h3> <ul> <li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li> <li><a href="#"><span>姐姐说坚强的就是快乐的...</span></a> <a class="author2" href="#">cyber</a></li> <li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="author2" href="#">alvin</a></li> <li><a href="#"><span>景致南浔</span></a> <a class="author2" href="#">amandavela</a></li> <li><a href="#"><span>Windows快捷键大全</span></a> <a class="author2" href="#">inming</a></li> <li><a href="#"><span>地铁发飙记</span></a> <a class="author2" href="#">jennifer</a></li> <li><a href="#"><span>2006发生的事</span></a> <a class="author2" href="#">xfavorx</a></li> <li><a href="#"><span>姐姐说坚强的就是快乐的...</span></a> <a class="author2" href="#">cyber</a></li> <li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li> <li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="autho

评论收藏

内容反馈