<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的博客</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="header">
<h1><a href="#">我的<span class="gray">博客</span></a></h1>
<p>欢迎探讨div+css的问题 </p>
<ul>
<li ><a href="#">首页</a></li>
<li ><a href="#">布局</a></li>
<li><a href="#">样式</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div id="banner">
<img src="images/banner-bg.jpg" />
</div>
<div id="content">
<div id="main">
<div class="post">
<h1 class="bottomborder">给DIV CSS初学者的建议</h1>
<p>作者：XXX</p>
<p> 普及Web标准与CSS技术已成为一种潮流与趋势，目前以DIV CSS进行Web开发已成为一种时尚。需要不断的提高自己的技能以适应这种变革已迫在眉睫。在学习的过程中会面临许多疑惑与困难，应该静下心来认真的思考这样的开发模式，仔细的去理解变革对于Web发展的意义，切不可片面的认为Web标准即是以DIV CSS进行网页布局。学习的目标在于以XHTML建立良好的语义化的结构，结合CSS最大程度使表现与内容相分离。这也是Web标准化的意义所在。并不是说以DIV CSS构架网站就是Web标准化，如果以Table时代的思路去开发，只是将Table标签替换为DIV标签，毫无意义。</p>
<p>目前许多Web前端代码的编写工作落在"美工"肩上。所谓"美工"即注重Web页面的外观界面UI设计，借助于Photoshop、Fireworks或其他图形处理软件，进行美学设计与规划，画出图形化的Web外观界面。面对XHTML与CSS代码往往愁眉不展。有许多开发人员刚从大中专院校毕业，对图形化的东西不是很敏感，对代码开发有着一定的经验。而以CSS技术进行构架建立符合Web标准的网站是编码与图形的结合，优秀的编码还需要以合适的图形、图像为"原料"。DIV CSS初学者在学习中应注意以下几个方面。</p>
<p>注重基础知识的学习：想要学出成绩基础知识的学习必不可少，能灵活的运用各种标签与属性，需要付出一定的时间和精力。各种XHTML标签及CSS属性看似简单，不象其它语言涉及算法，也不象Web程序需要涉及数据库。但XHTML标签及CSS属性的含义必须要很熟悉。例如XHTML标签div、span、dl、dt、dd、ul、ol、li等，只有对它们熟悉了，才能在组织页面内容时运用自如，以合适的标签来组织内容是XHTML编码的基础，如果对XHTML标签不熟悉，合适的标签建立具有语义的文档就无从谈起了。CSS中的浮动、定位和盒模型（Box Model），如float、clear、position、margin、border、padding属性以及各种缩写形式等知识，需要认真学习理解，这些知识是CSS布局中最基本、最常用的属性，如果对它们不理解，布局会面临很大的困难、重构会举步为艰。</p>
<p class="mainfooter">
<a href="#" class="readmore">更多</a>
<a href="#" class="comment">评论(7)</a>
<span class="date">日期：Nov 11.26</span>
</p>
</div>
<h2>文章排名</h2>
<table>
<tr>
<th>发表日期</th>
<th>标题</th>
<th>大意描述</th>
</tr>
<tr class="row-a">
<td>2012.05.31</td>
<td><a href="#">Web标准的意义</a></td>
<td><a href="#">应该深刻理解Web标准的意义</a></td>
</tr>
<tr class="row-b">
<td>2012.07.21</td>
<td><a href="#">图形、图像的处理要优化</a></td>
<td><a href="#">力求以较小的图片实现效果。</a></td>
</tr>
<tr class="row-a">
<td>2013.04.01</td>
<td><a href="#">酷站欣赏</a></td>
<td><a href="#">酷站欣赏网址及赏析</a></td>
</tr>
<tr class="row-b">
<td>2013.05.08</td>
<td><a href="#">模板下载</a></td>
<td><a href="#">模板下载地址</a></td>
</tr>
</table>
</div>
<div id="sidebar">
<div class="sidebox">
<h1>搜索</h1>
<form action="#" class="searchform">
<p>
<input name="search-query" class="textbox" type="text" />
<input name="search" class="buttom" value="搜索" type="buttom" />
</p>
</form>
</div>
<div class="sidebox">
<h1 >内容介绍</h1>
<p>CSS 网页布局的相关文章，其中发布了很多实例教程，以及关于Web 标准理念的文章等。内容精彩丰富，并且尽量做到每日更新，相信它一定会成为您学习的良师益友。</p>
</div>
<div class="sidebox">
<h1>最新文章</h1>
<ul>
<li class="top"><a href="#" >CSS 酷站欣赏</a></li>
<li><a href="#">建立符合Web 标准的网站</a></li>
<li><a href="#">CSS共享模板</a></li>
<li><a href="#">CSS中的浮动、定位和盒模型</a></li>
<li><a href="#">深刻理解Web标准的意义</a></li>
</ul>
</div>
<div class="sidebox">
<h1>随机文章</h1>
<ul>
<li class="top"><a href="#" >图形、图像的处理要进行优化</a></li>
<li><a href="#">共享模板</a></li>
<li><a href="#">CSS中的浮动、定位和盒模型</a></li>
<li><a href="#">Web标准</a></li>
<li><a href="#">建立良好的语义化的结构</a></li>
</ul>
</div>
<div class="sidebox">
<h1>座右铭</h1>
<p>我们愈是学习，愈觉得自己的贫乏.</p>
<p class="align-right">- 雪莱</p>
</div>
</div>
</div>
<div id="footer">
<div class="left">
<h1>友情链接</h1>
<ul>
<li><a href="#"><strong>模板下载园地</strong> - 个性空间</a></li>
<li><a href="#"><strong>连云港职业技术学院</strong> - lygtc.net.cn</a></li>
<li><a href="#"><strong>酷站欣赏</strong> - xxxxxxxxx</a></li>
</ul>
</div>
<div class="left">
<h1>热门标签</h1>
<ul>
<li><a href="#">web标准</a></li>
<li><a href="#">div布局</a></li>
<li><a href="#">css样式</a></li>
</ul>
</div>
<div class="right">
<h1>版权所有</h1>
<p>
© copyright 2013 <strong>lygtc</strong><br />
Design by: <a href="#"><strong>lygtctyf</strong></a>
关键词：<a href="#"><strong>CSS</strong></a> |
<a href="#"><strong>div</strong></a>
</p>
</div>
</div>
</body>
</html>
归档(1)(1).zip （126个子文件） 
untitled.bmp 2.73MB
style.css 4KB styles.css 4KB style.css 2KB Thumbs.db 71KB Thumbs.db 47KB Thumbs.db 31KB Thumbs.db 29KB Thumbs.db 17KB Thumbs.db 14KB
3.gif 1KB 2.gif 637B 1.gif 613B page.gif 393B comment.gif 364B bullet.gif 281B clock.gif 272B
index.html 7KB index.html 7KB index.html 3KB
花果山1.jpg 288KB 1.jpg 285KB 1.jpg 204KB 花果山2 拷贝.jpg 188KB body.jpg 132KB 花果山.jpg 129KB 2.jpg 74KB 2.jpg 73KB banner-bg.jpg 70KB 4.jpg 67KB 4.jpg 53KB 3.jpg 53KB 7.jpg 50KB photo3.jpg 46KB 花果山3 拷贝.jpg 45KB 5.jpg 41KB photo4.jpg 41KB 6.jpg 38KB photo1.jpg 38KB 6.jpg 37KB 5.jpg 36KB 8.jpg 30KB 3.jpg 28KB photo2.jpg 28KB header-bg.jpg 25KB headerphoto.jpg 25KB 1.jpg 22KB photo-24.jpg 10KB bg.jpg 8KB photo-31.jpg 7KB photo-23.jpg 7KB photo-13.jpg 6KB photo-11.jpg 6KB photo-22.jpg 6KB photo-12.jpg 5KB photo-21.jpg 5KB link-bg.jpg 5KB photo-33.jpg 5KB photo-32.jpg 4KB login-bg.jpg 4KB photo-14.jpg 4KB photo-34.jpg 3KB firefox-gray.jpg 2KB nav-right-bg.jpg 778B nav-left-bg.jpg 715B content-left-bg1.jpg 655B list-style.jpg 636B bottom-bg2.jpg 496B bottom-bg1.jpg 478B sidebar-bot-bg.jpg 423B nav-bg.jpg 386B line.jpg 373B footer-bg.jpg 357B gradientbg.jpg 337B link-bg.jpg 332B footer-bg.jpg 327B whiteline.jpg 302B li-bg.jpg 287B list-style.jpg.mno 205B photo-22.jpg.mno 204B photo-33.jpg.mno 204B photo-23.jpg.mno 204B photo-13.jpg.mno 204B bottom-bg1.jpg.mno 204B photo-34.jpg.mno 204B photo-12.jpg.mno 204B footer-bg.jpg.mno 204B login-bg.jpg.mno 204B content-left-bg1.jpg.mno 204B sidebar-bot-bg.jpg.mno 204B photo-14.jpg.mno 204B photo-32.jpg.mno 204B photo-24.jpg.mno 204B bottom-bg2.jpg.mno 204B photo-11.jpg.mno 203B photo-31.jpg.mno 203B link-bg.jpg.mno 203B photo-21.jpg.mno 203B li-bg.jpg.mno 203B header-bg.jpg.mno 203B共 126 条
- 1
- 2
资源评论
m0_74361305
- 粉丝: 0
- 资源: 3
