静态HTML/style/DIV布局技术重点资源-CSDN文库

共507个文件

jpg：229个

html：182个

gif：52个

4星 · 超过85%的资源需积分: 9 111 浏览量 2009-02-16 11:53:39 上传评论 1 收藏 8.51MB RAR 举报

在网页设计领域，静态HTML、CSS（样式表）和DIV布局是构建现代网站的基础技术。这些技术对于创建符合W3C标准、具有响应性和可维护性的网页至关重要。下面将详细阐述这些技术的重点。 1. 静态HTML：静态HTML，即HyperText Markup Language，是一种用于创建网页的标准标记语言。它不包含任何服务器端脚本，内容在用户请求时一次性发送。学习静态HTML主要包括以下几个方面： - HTML5元素：HTML5引入了许多新的语义元素，如<header>、<nav>、<article>、<section>和<footer>，它们有助于更好地组织和结构化内容。 - 标签语法：理解各种元素的使用，例如标题标签<h1>-<h6>、段落<p>、链接<a>、图像<img>等，以及如何嵌入多媒体（如音频和视频）。 - 响应式设计：使用<meta>标签设置视口，以便在不同设备上适配页面。 - 表单处理：创建表单元素如<input>、<select>、<textarea>，并学习如何处理用户输入。 2. CSS（层叠样式表）： CSS用于控制HTML元素的外观、布局和排版。掌握CSS的关键点包括： - 选择器：理解ID选择器 (#id)、类选择器 (.class)、元素选择器 (tag)、属性选择器等，以及如何组合使用。 - 属性与值：熟悉常用的CSS属性，如颜色、字体、背景、边框、布局（如margin、padding）、盒模型等。 - 盒模型：理解内容(content)、内边距(padding)、边框(border)和外边距(margin)之间的关系，以及如何计算元素的总宽度和高度。 - 浮动与定位：浮动(float)用于创建多列布局，定位(position)包括static、relative、absolute和fixed，用于精确控制元素位置。 - CSS3新特性：如渐变、阴影、过渡、动画、媒体查询（media queries）以实现响应式设计。 3. DIV布局： DIV是一个HTML标签，代表一个分区或容器。在CSS的帮助下，可以利用DIV进行布局设计： - 层叠结构：通过CSS将多个DIV堆叠在一起，形成页面的层次结构。 - 定位布局：使用display属性（如block、inline-block、flexbox或grid）创建灵活的布局模式。 - 响应式布局：结合媒体查询，使布局在不同屏幕尺寸下自适应。 - 容器与内容：将内容与样式分离，通过CSS将样式应用到特定的DIV，实现内容与表现的解耦。总结来说，掌握静态HTML、CSS和DIV布局技术是创建高质量网页的基础。通过熟练运用这些技术，开发者可以创建出符合W3C标准、具有良好视觉效果和用户体验的静态网页。在不断发展的Web技术中，持续学习和更新这些知识至关重要，以适应不断变化的用户需求和浏览器支持。

资源推荐

资源详情

资源评论

收起资源包目录

静态HTML/style/DIV布局技术重点（507个子文件）

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

main.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

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

icon2.gif 55B

icon.gif 55B

icon1.gif 55B

arrow6.gif 55B

arrow4.gif 55B

arrow1.gif 55B

icon5.gif 54B

arrow4.gif 53B

icon3.gif 52B

icon1.gif 52B

icon2.gif 52B

icon6.gif 52B

icon2.gif 52B

arrow2.gif 52B

arrow5.gif 52B

icon1.gif 51B

icon4.gif 51B

icon1.gif 51B

arrow5.gif 51B

arrow1.gif 51B

arrow3.gif 51B

arrow2.gif 51B

arrow6.gif 50B

arrow3.gif 50B

arrow2.gif 50B

arrow3.gif 50B

12-1.html 11KB

4-10.html 10KB

16.html 8KB

15-2.html 7KB

13-6.html 6KB

11-6.html 5KB

19.html 4KB

6-4.html 4KB

6-5.html 4KB

6-11.html 4KB

11-2.html 4KB

11-3.html 4KB

11-5.html 4KB

13-14.html 3KB

18.html 3KB

6-6.html 3KB

5-12.html 3KB

20.html 3KB

3-19.html 3KB

html.html 3KB

15-1.html 3KB

8-8.html 3KB

11-1.html 3KB

6-8.html 3KB

6-3.html 3KB

8-9_home.html 2KB

8-9_nextstation.html 2KB

6-2.html 2KB

共 507 条

<!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> <style type="text/css">  </style></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 h

评论收藏

内容反馈