CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误： 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2...
目录：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布局中最基本也...
1.图片下方出现几像素的空白间隙问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 <div><img
src=""/></div>这个图片下面会有一条空白间隙，解决方法：给图上一个垂直方向的属性如:vertical-align:
top(任意一个就行middle);这个问题从而延伸到，object(视频)和textarea在火狐下也会出现类似的问题，解决方法一样。细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,img{vertical-align:
top...
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。 DIV本身就是容器性质的,你不但可以内嵌table还可以...
传统页面数据和布局都混合在一起，如下图：而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> ...