传统页面数据和布局都混合在一起，如下图：而DIV+CSS存在下述优势：1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
4、样式的调整更...
body{}表示是对body标签的设置，就是<html><head></head><body></body></html> 里面的body。 *{}表示对页面所有元素的设置，一般我们会设置*{margin:0px;padding:0px}来表示所有元素的margin和padding为0； 这两个的设置一般是为了页面标签的初始化，因为不同的浏览器默认标签有一些不同的属性。比如chrome默认li有margin-left:30px;的属性，p标签也默认有属性。有些浏览器会给body默认属性。如果不进行设置的话在不同浏览器...
以下代码实现纵向导航功能，并为导航添加了超链接（用#不可用的超链接代替），如下图所示 复制代码代码如下:<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{...
复制代码代码如下:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Jxchen</title> <style type="text/css"> .box{ border:1px solid #f60; width:100px; height:100px; margin:0 auto; -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; border-radius:50px; } </style> </head> <body> <div class="box"> </div> </body> </html> 原文：http://www.jb51...
实现效果：500 Internal Server Error(图片为效果图：上——左右——下)代码：<!DOCTYPE html>
<html>
<head>
<!--或者利用DW里面的母版-->
<style type="text/css"> *{
margin:0;
padding:0;}
#container
{
width:70%;
background-color:Red;
margin:0px auto;
}
#container #header
{
height:150px;
...
1.CSS常用属性??应用示例如下：<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css常用属性-背景</title><style type="text/css">#bg_CSS01{border: 2px #00ff00 solid;background: #ff00ff;width: 200px;height: 200px;}#bg_CSS02{border: 2px #00ff00 solid;background-color: #000000;width: 200px;height: 200px;}<!-- -->#bg_CSS03{border: 2px #00ff00 solid;bac...
方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。结构效果如下：CSS复制代码代码如下:div#wrapper { display: table; width: 500px; height: 500px; background-color: #c00;}div#row { display: table-row;}div#cell { display: table-cell; vertical-align: middle;}html复制代码代码如下:<div id="wrapper"> <div id="row"> <div id="cell"> ...
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。Margin: Margin属性用于设置两个元素之间的距离。Padding: Padding属性用于设置一个元素的边框与其内容的距离。Clear: 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使...
本文实例讲述了DIV+CSS实现的绿色水平一级菜单代码。分享给大家供大家参考。具体如下：这是一款基于DIV+CSS实现的绿色水平网站菜单，相信是你喜欢的一种CSS菜单，绿色风格，用到了几张背景图片，大家顺着路径把图片下载下来吧。这款菜单整体感觉效果不错，兼容性又好，不管是用在你的网站或是学习研究CSS，都是不错的选择。运行效果截图如下：在线演示地址如下：http://demo.jb51.net/js/2015/div-css-green-line-nav-menu-codes/具...
段落前面空两个字的距离，不要再使用空格了，用CSS实现段落首缩进两个字符。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。<style type="text/css">p{text-indent: 2em;/*em是相对单位，2em即现在一个字大小的...
<html><head><title>div+css页面布局</title><meta http-equiv="content-type" content="text/html" ><link rel="stylesheet" type="text/css" href="css/layout.css" /></head><body><div id="container"><div id="head"> <div id="logo"> </div> <div id="banner"> </div> <div id="tool"> </div> <div class="nav"> </div> <div id="menu"> <ul> <li><a href="#">公司概况</a></li> <li class="tiao"></li> ...
DIV+CSS中让布局居中_背景图片居中_文字内容居中原文：http://www.cnblogs.com/as3lib/p/4466282.html
搜索引擎优化(seo)有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前比较好的CSS+DIV的命名规则 1DIV CLASS或者ID 页头:header 登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚网登录</title><style type="text/css">.main{width:100%;height:920px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52px;border:1px solid #000;}.downMenu{width:100%;height:30px;font:normal normal 20px "宋体";color:#fff;background-color: #000000; }#search{margin-left:520px;}a{text-decoration: none;}#img1{margin-left:330...
目录：1、Div+Css布局教程（-）CSS必备知识注：本教程要求对html和css有基础了解。一、CSS布局属性Width：设置对象的宽度（width:45px）。Height：设置对象的高度(Height:45px;)。Background：设置对象的背景颜色、背景图像。1.背景颜色background:#09F;2.背景图像background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;repeat-x代表横向重复，还可以设置repeat-y。Float: Float属性是DIV+CSS布局中最基本也...
