Div+css
一，什么是CSS
    CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。
2．DIV+CSS
    简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。
表格
以前html直接设置高度 width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。
例子：
<table>
<tr>
<td height="100">我的高度为100px</td>
</tr>
<tr>
<td height="50">我高度为50px</td>
</tr>
</table>
个人主页模板源代码
分别设置了高度为100px和50px的两行表格
DIV的布局方法
CSS 代码
.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}


Html body内代码：

<div class="yangshi">www.divcss5演示，内容
测试内容高度超出演示实例，divcss5实例
</div>
完整CSS html最小高度实例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS 高度实例</title>
<style>
.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}
</style>
</head>
<body>
<div class="yangshi">www.biadu演示，内容
测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例
</div>
</body>
</html>
CSS 宽度
  传统Html 宽度属性单词：width 如width="300";
  CSS 宽度属性单词：width 如width:300px;
HTML宽度与DIV+CSS对比
1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。而宽度值后无需跟单位，默认情况下以像素（px）为单位。
    如：<td width="300">我的宽度为300px</td>
    即：设置了对应表格td的宽度为300px.
2、div css中宽度设置width:300px;，即设置对应CSS样式为300px，这里需要跟单位。
    如：#header{ width:300px;}
  即：定义header CSS选择器样式为300px宽度。
而在标签运用：<div id="header">我的宽度为300px宽度</div>
CSS 宽度自适应
常常我们看见一个网页宽度随浏览器宽度改变而自动改变，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。
如果网页总宽度为80%即width:80%;，将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。
load upDIV CSS 自适应宽度例子：
CSS样式代码：
<style type="text/css">
body{ margin:0 auto; text-align:center;}
.yangshi{ width:80%; border:1px solid #003; margin:0 auto;}
</style>

Html中body div代码：
<div class="yangshi">我是80%自适应宽度</div>
CSS边框
CSS 边框即CSS border是控制对象的边框边线宽度、颜、虚线、实线等样式CSS属性
Html表格控制边框：
border="1" bordercolor="#000000"
说明：控制表格边框宽度为1px，颜为黑，默认为实线样式边框
DIV CSS边框：
border-color:#000; border-style:solid; border-width:1px;
说明：以上代码为设置对象边框颜为黑、边框为实线、宽度为1px边框。
边框样式包括
设置上边框：border-top：
设置下边框：border-bottom :
设置左边框：border-left:
设置右边框：border-right ：
边框显示样式：
jquery简单下拉菜单border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
参数值解释：
none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
int和integer的值相等吗
outset :  根据border-color的值画3D凸边
例子：
  设置上边框为1px实线黑边框。
    border-top-color:#000; border-top-style:solid; border-top-width:1px;
或简写  border-top:#000 solid 1px;
完整DIV CSS实例：
实例内容设置CSS 命名为yangshi的css 选择器，设置该属性选择器样式为边框为1px宽度实线黑边框、宽度为200px,高度为javaswitch标准格式50px的矩形。
CSS 代码：
div,body{ border:0; margin:5px; padding:0;}/* 初始化网页样式 */
.yangshi{ border:1px solid #000; width:200px; height:50px;}/* 设置对象样式 */

HTML中对应DIV代码：
<div class="yangshi">divcss5实例-CSS 边框实例<br />
这是一个 CSS 实例
</div>



CSS 背景
background CSS手册查询-background手册
background-color 设置颜作为对象背景颜
background-image 设置图片作为背景图片
background-repeat设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像位置。
图片背景样式（固定、滚动）
实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。
background-attachment使用解析：
background-attachment:fixed； 背景固定
background-attachment:scroll 背景图像是随对象内容滚动
浮动 float
float的作用：通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。
float语法：
float : none | left |right
参数值：
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边
效果图：如下。Css样式实例内容，我们让文字和图片在一个固定宽度div层内，让蓝背景文字内容居右，小图片居左。
例子：
    1、首先我们设置一个最外层的宽度为300px，高度为200px的css命名为box的css选择器代码如下（知识点px是什么意思）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。