Div+CSS基础代码网页布局+实例教程
Div+css
一，什么是CSS
CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。
二．DIV+CSS
简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV 是用于搭建html网页结构（框架）标签，像、、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。
表格
以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。
例子：
| 我的高度为100px |
| 我高度为50px |
分别设置了高度为100px和50px的两行表格
DIV的布局方法
CSS 代码
.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}
Html body内代码：
测试内容高度超出演示实例，divcss5实例
完整CSS html最小高度实例代码：
测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例
CSS 宽度
传统Html 宽度属性单词：width 如width="300";
CSS 宽度属性单词：width 如width:300px;
HTML宽度与DIV+CSS对比
1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。而宽度值后无需跟单位，默认情况下以像素（px）为单位。
如：
即：设置了对应表格td的宽度为300px.
2、div css中宽度设置width:300px;，即设置对应CSS样式为300px，这里需要跟单位。
如：#header{ width:300px;}
即：定义header CSS选择器样式为300px宽度。
而在标签运用：
CSS 宽度自适应
常常我们看见一个网页宽度随浏览器宽度改变而自动改变，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。
如果网页总宽度为80%即width:80%;，将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。
DIV CSS 自适应宽度例子：
CSS样式代码：
Html中body 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：
边框显示样式：
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凹边
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,高度为50px的矩形。
CSS 代码：
div,body{ border:0; margin:5px; padding:0;}/* 初始化网页样式*/
.yangshi{ border:1px solid #000; width:200px; height:50px;}/* 设置对象样式*/
HTML中对应DIV代码：
这是一个CSS 实例
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是什么意思）
.box{width:300px; height:200px;}
2、设置box内的文字内容部分css样式命名为yangshi，并设置背景为蓝色，宽度为120px，居右浮动
.yangshi{ width:120px; float:right; background:#0066FF;}
3、设置图片居左浮动div+css样式
img { float: left;}
4、body内的div布局，代码如下
说明：这里img标签是链接外部图片，图片名为demo.gif
接下来我们演示使用div+css让这里小图片居右（上个例子是居左），蓝色背景文字内容区居左。这里我们只需要改变yangshi的float:right;为float:left和图片css样式img { float: left;}为img { float: right;}
CSS代码如下：
.box{width:300px; height:200px;}
.yangshi{ width:120px; float:right; background:#0066FF;}
img{ float:left;}
CSS 文字css font
DIV+Css开发中设置字体常用css属性单词英文css font
font、font-family(字体)、
font-size（字大小）、
font-style（字样式）、
font-weight（加粗）、
text-decoration（下划线）、
font-variant（字母大小写）、
text-transform（英文大小写）、
letter-spacing（间隔）
例子：
加粗
Html常规加粗标签
以前html直接对对象加粗的标签如下：
或两者效果相同。
加粗实例，代码如下：
我被加粗
我也被加粗了
我未被加粗
CSS 加粗基础技巧实例
CSS 代码
.yangshi1{ font-weight:bold}
.yangshi2{ font-weight:800}
Div html代码：
我被加粗
我也被加粗了
我未被加粗
Padding 属性
Padding属性包含了
padding left ：左补距离（设置距左内边距）
；padding top：头顶补距离（设置距顶部内边距）
；padding right ：右补距离（设置距右内边距）
；padding bottom ：底补距离（设置距低内边距）。
其二维构建图可见CSS属性二维图。
Padding 解析图
padding left用法：
padding-left:10px; 这个意思距离左边补距10像素，可跟百分比如（padding-left:10%; 距离左边补10%的距离）；
padding right用法：
padding-right:10px; 这个意思距离右边补距10像素，可跟百分比如（padding-right:10%; 距离右边补10%的距离）；
padding top用法：
padding-top:10px; 这个意思距离顶边补距10像素，可跟百分比如（padding-top:10%; 距离顶边补10%的距离）；
padding bottom用法：
padding-bottom:10px; 这个意思距离低边补距10像素，可跟百分比如（padding-bottom:10%; 距离底边补10%的距离）；
注意padding中间的链接“- ”号，设置距离值时用“：”并赋予值，并以“；”结束，并且全部用小写半角字母。
CSS 注解
作用：css注解（css 注释）可以帮助我们对自己写的CSS文件进行说明，如说明某段CSS 代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性，同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的，以便顺利快速开发div css网页。
CSS注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说明内容放到“/*”“*/”中间。
css注解——div+CSS注释示例如下：
/* css注解实例css注释实例*/
/* body定义*/
body{ text-align:center; margin:0 auto;}
/* 头部css定义*/
#header{ width:960px; height:120px;}
CSS超链接
超链接的代码
解析如下：
href 后跟被链接地址目标网站地址这里是https://www.sodocs.net/doc/8c18613444.html,/
target
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
CSS可控制超链接样式css链接样式如下
a:active是超级链接的初始状态
a:hover是把鼠标放上去时的状况
a:link 是鼠标点击时
a:visited是访问过后的情况
超链接样式案例
1、通常对全站超链接样式化方法
a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none;
a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;
2、通过链接内设置类控制超链接样式css方法
案例超链接代码CSS
对应CSS代码
a.yangshi{color:#333;text-decoration:none; }
a.yangshi:hover {color:#CC3300;text-decoration:underline;}
通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式
3、通过对应超链接外的父级的css类的css样式来控制超链接的样式
案例超链接代码
对应CSS代码
.yangshi a{color:#333;text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline;}
这里值得注意的是a.yangshi与.yangshi a的样式css代码区别
字体（font-family）
CSS运用实例代码：
.divcss5{ font-family:黑体;}
Html的文字字体设置代码：
我是黑体字
边距margin
CSS优化
CSS代码优化地方：
1、border(CSS边框)简写：
border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid
#000;border-right:1px solid #000;
可以简写为：border:1px solid #000;
2、padding（CSS padding）简写：
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
可简写为：padding:1px 2px 3px 4px;
padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
可简写为：padding:1px;
3、margin简写
margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;
可简写为：margin:1px 2px 3px 4px;
margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;
可简写为：margin:1px;
4、background简写
background-color:#000;可以简写为background:#000;
background-image:url(图片地址)
可简写为：background:url(图片地址)
5、font简写
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可简写为：font:12px/12px Arial, Helvetica, sans-serif;
二、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便
CSS实例如下：
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;} 他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同
我们就可以提取他们相同属性
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }
CSS ID与CSS CLASS
Css id 知识
一个网页里ID只能使用一次。当然即使一个id在一个网页内被使用多次，其CSS样式仍然可以实现生效，但是一般规定W3C标准是使用一次
id 选择器以"#" 来定义，命名CSS选择器。
定义命名css id选择器例子：
#yangshi1{color:#F00;}定义红色https://www.sodocs.net/doc/8c18613444.html,实例
#yangshi2{color:#0F0;}定义绿色
对应html中div引用
一个div标签的定义只能使用一个id如：
或
两个都是不正确的，并且CSS样式属性也不能生效- 成为CSS 失效之一。
CSS class 知识
与CSS ID 不同class 可以在网页中多次用到。
Class 选择器定义以“.”来定义。定义css class选择器例子：.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28px;}定义文字大小为18px
对应html中div+css引用：
以上即是“yangshi1”“yangshi2”类的正确使用方法
Img{padding:0; border:0;}
列表LI
li不能单独使用，需要与
- 或
- div+css范例
- div+css范例之li
- div+css范例
- div+css范例之li
- 配合使用，使用范例：
此内容来自：唐山小鱼网络工作室https://www.sodocs.net/doc/8c18613444.html,
更多内容请访问https://www.sodocs.net/doc/8c18613444.html,