DIVCSS基础教程全攻略教学.docx

上传人:b****1 文档编号:10330787 上传时间:2023-05-25 格式:DOCX 页数:58 大小:807.17KB
下载 相关 举报
DIVCSS基础教程全攻略教学.docx_第1页
第1页 / 共58页
DIVCSS基础教程全攻略教学.docx_第2页
第2页 / 共58页
DIVCSS基础教程全攻略教学.docx_第3页
第3页 / 共58页
DIVCSS基础教程全攻略教学.docx_第4页
第4页 / 共58页
DIVCSS基础教程全攻略教学.docx_第5页
第5页 / 共58页
DIVCSS基础教程全攻略教学.docx_第6页
第6页 / 共58页
DIVCSS基础教程全攻略教学.docx_第7页
第7页 / 共58页
DIVCSS基础教程全攻略教学.docx_第8页
第8页 / 共58页
DIVCSS基础教程全攻略教学.docx_第9页
第9页 / 共58页
DIVCSS基础教程全攻略教学.docx_第10页
第10页 / 共58页
DIVCSS基础教程全攻略教学.docx_第11页
第11页 / 共58页
DIVCSS基础教程全攻略教学.docx_第12页
第12页 / 共58页
DIVCSS基础教程全攻略教学.docx_第13页
第13页 / 共58页
DIVCSS基础教程全攻略教学.docx_第14页
第14页 / 共58页
DIVCSS基础教程全攻略教学.docx_第15页
第15页 / 共58页
DIVCSS基础教程全攻略教学.docx_第16页
第16页 / 共58页
DIVCSS基础教程全攻略教学.docx_第17页
第17页 / 共58页
DIVCSS基础教程全攻略教学.docx_第18页
第18页 / 共58页
DIVCSS基础教程全攻略教学.docx_第19页
第19页 / 共58页
DIVCSS基础教程全攻略教学.docx_第20页
第20页 / 共58页
亲,该文档总共58页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

DIVCSS基础教程全攻略教学.docx

《DIVCSS基础教程全攻略教学.docx》由会员分享,可在线阅读,更多相关《DIVCSS基础教程全攻略教学.docx(58页珍藏版)》请在冰点文库上搜索。

DIVCSS基础教程全攻略教学.docx

DIVCSS基础教程全攻略教学

 

基础

一、CSS,,,,,高度_css,,,,,height

高度基础知识

这里的CSS高度是指通过来控制设置对象的高度。

使用单词height。

单位可以使用,等常用使用PX(像素)为单位。

实例:

.yangshi{height:

300px;}即设置了yangshi选择器对象高度为300px。

CSS高度单词:

height,,,,,

CSS,,,,,最大高度:

max-height,,,,,(IE7及以上版本浏览器支持),,,,,

CSS,,,,,最小高度:

min-height,,,,,(IE7及以上版本浏览器支持),,,,,

line-height,,,,,

以上可跟值为数字加单位。

Html初始高度与高度对照

以前html直接设置高度,,,,,width="300"这种方式嵌入表格标签内,而且无需带单位,默认以px(像素)为单位。

实例:

,,,,

我的高度为100px

我高度为50px

分别设置了高度为100px和50px的两行表格

接下来我们讲解CSS,,,,,高度使用方法及技巧

1、CSS自适应高度

一般我们需要让宽度一定时高度随内容增加而增高。

此时我们将无需设置高度即可实现此效果。

同时也无需使用height:

auto来实现高度自适应。

通常默认情况下不设置高度,对象高度即是自适应高度。

2、固定高度及隐藏超出固定高度的内容

3、很多时候我需要设置对象固定高度同时让多余的内容不显示出来。

4、解决办法:

设置固定高度值,和设置内容不被溢出(隐藏超出内容)

5、如设置一个高度为50px;宽度为50px,并禁止内容超出此高度宽度,为了观看效果同时设置对象为1px黑色边框演示,

6、:

7、.yangshi{,,,,,height:

50px;,,,,,width:

50px;,,,,,overflow:

hidden;,,,,,border:

1px,,,,,solid,,,,,#666;}

8、Html,,,,,body内代码:

9、演示,内容

10、测试内容高度超出演示实例,divcss5实例

11、

12、CSS,,,,,固定高度效果截图:

13、

说明观看此上图,看出设置固定高度宽度并设置1px的黑色边框,并且实现内容未超出设置高度宽度。

禁止溢出设置CSS高度、的CSS属性单词及值overflow:

hidden;,,,,,。

3、设置最小高度

使用:

min-height

为什么要设置最小高度?

有时特别是在文章页面里因为文章内容多少参差不齐,所以我们可以使用最小高度设置让左右结构的布局对齐,感觉饱和一点,但是我们又不能设置固定高度,因为内容可能多可能少,当多的时候自然设置固定高度就不会显示完整内容。

这里有个问题就是IE6不支持最小高度设置(min-height),解决办法使用方法来解决,大家知道区别不同浏览器时候用的css,,,,,hack中IE6可以使用“_”来区别其它浏览器。

最小高度运用:

.yangshi{min-height:

50px;,,,,,_height:

50px;}这样就可以解决此问题,说明这里就不能再使用overflow:

hidden;-设置隐藏超出内容溢出。

完整CSS,,,,,html最小高度实例代码:

,,,,

DOCTYPE,,,,,html,,,,,PUBLIC,,,,,"-angshi{,,,,,min-height:

50px;,,,,,_height:

50px;width:

150px;border:

1px,,,,,solid,,,,,#666;}

演示,内容

测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例,divcss5实例

效果图:

,,,,

以上是超出内容自动适应高

这里是内容够少,未能充满设置最小高度。

无论在IE6还是IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设置。

关于CSS,,,,,height高度总结说明:

这里讲解CSS,,,,,height与html,,,,,height区别及用法,同时讲解了最小高度、自适应高度、固定高度的设置及运用。

 

2、CSS,,,,,宽度——CSS,,,,,width

一、宽度基础知识

,,,,宽度是指通过设置对应div宽度,以下我们了解传统宽度、宽度自适应、固定宽度等宽度知识。

传统Html,,,,,宽度属性单词:

width,,,,,如width="300";

CSS,,,,,宽度属性单词:

width,,,,,如width:

300px;

最大宽度单词:

,,,,如max-width:

300px;,,,,,css手册中了解max-width:

最小宽度单词:

,,,,如:

min-width:

300px,,,,,css手册中了解min-width:

同时你可以进入中了解详细基础知识:

二、Html初始宽度与宽度对照

1、传统html中宽度width="300",即设置对应元素宽度为300px(像素)。

而宽度值后无需跟单位,默认情况下以像素()为单位。

如:

我的宽度为300px

即:

设置了对应表格td的宽度为300px.

2、中宽度设置width:

300px;,即设置对应CSS样式为300px,这里需要跟单位。

如:

#header{,,,,,width:

300px;}

即:

定义header,,,,,CSS选择器样式为300px宽度。

而在标签运用:

我的宽度为300px宽度

三、css宽度演示与讲解

1、CSS,,,,,宽度自适应

常常我们看见一个网页宽度随浏览器宽度改变而自动改变,如一样,宽度是自适应宽度。

这里运用了百分比即可实现自适应宽度。

如果网页总宽度为80%即width:

80%;,将使此宽度知道自适应宽度为浏览器80%。

当然前提是设置最外层没有宽度限制条件下。

DIV,,,,,CSS,,,,,自适应宽度例子:

CSS样式代码:

,,,,

body{,,,,,margin:

0,,,,,auto;,,,,,text-align:

center;}

.yangshi{,,,,,width:

80%;,,,,,border:

1px,,,,,solid,,,,,#003;,,,,,margin:

0,,,,,auto;}

Html中body,,,,,div代码:

,,,,我是80%自适应宽度

这样即设置内容居中,为了方便测试加上1px黑色边框。

大家可以测试观察其内容是随浏览器拉大而宽度变宽而自适应宽度80%,而左右两边始终有10%宽度留着,因为设置此box宽度为80%。

以上为CSS,,,,,宽度(width)演示图解。

2、CSS,,,,,宽度固定

固定即设置宽度为固定值即可如

很多时候需要对网页的宽度样式设置为固定,这时只需要设置宽度width:

300px,即设置对应固定宽度为300像素。

3、最小固定宽度

CSS样式属性单词:

min-width

兼容支持:

min-width除IE6不支持为,IE7以上浏览器、火狐、谷歌都支持

常常用于设置宽度最小值,如设置对应DIV的样式最小宽度值限制。

例:

.yangshi{border:

1px,,,,,solid,,,,,#003;,,,,,min-width:

300px;}

即设置最小宽度为300px,当然一般很少设置最小宽度。

如果要使用最小宽度即,使用浮动(float)可使用最小宽度限制。

最大固定宽度

单词:

max-width

兼容支持:

max-width除IE6不支持为,IE7以上浏览器、火狐、谷歌都支持

最大固定宽度是对对应的样式div设置最大宽度限制,即内容不超过此设置最大宽度。

最大宽度限制例子:

.yangshi{border:

1px,,,,,solid,,,,,#003;max-width:

300px;}

即设置了最大宽度限制为300px,以下为设置最大宽度限制演示图:

通过图例和基础知识DIVCSS5给大家讲解了关于css宽度知识,希望大家能掌握其宽度运用。

CSS,,,,,边框即CSS,,,,,border

,,,,边框基础知识

CSS,,,,,边框即CSS,,,,,border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。

Html原始边框与边框对照

Html表格控制边框:

border="1",,,,,bordercolor="#000000"

说明:

控制表格边框宽度为1px,颜色为黑色,默认为实线样式边框。

边框:

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平台上+为点线。

否则为实线

dashed,,,,,:

,,,, 在MAC平台上IE4+与WINDOWS和UNIX平台上+为虚线。

否则为实线

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边框技巧

如果设置对象上、下、左、右边框相同样式,可以简写无需分别写出上下左右的属性及对应值。

例,设置上下左右边框为1px宽度、实线、黑色边框如下:

border:

1px,,,,,solid,,,,,#000;

完整DIV,,,,,CSS实例:

实例内容设置为yangshi的,设置该样式为边框为1px宽度实线黑色边框、宽度为200px,高度为50px的矩形。

CSS,,,,,代码:

 div,body{,,,,,border:

0;,,,,,margin:

5px;,,,,,padding:

0;}/*,,,,,初始化网页样式,,,,,*/

.yangshi{,,,,,border:

1px,,,,,solid,,,,,#000;,,,,,width:

200px;,,,,,height:

50px;}/*,,,,,设置对象样式,,,,,*/

HTML中对应DIV代码:

 divcss5实例-CSS,,,,,边框实例

 

上图为CSS,,,,,边框(CSS,,,,,border)实例主要片段代码截图

说明:

以上代码对应显示效果,看到实线以外虚线是因DW软件特自动对DIV,,,,,box区加虚线,实际浏览是没有此虚线,特此说明。

三边有边而一边没有设置技巧

如左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。

CSS,,,,,代码:

,,,,border:

1px,,,,,solid,,,,,#000;,,,,,border-top:

none;

注意border:

1px,,,,,solid,,,,,#000;,,,,,和border-top:

none;前后顺序不能调换。

因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。

从而无需分别设置下、左、右,从而节约一定代码。

总结CSS,,,,,边框,常见对对象设置CSS样式使用属性代码:

border:

1px,,,,,solid,,,,,#000;

CSS,,,,,背景-CSS,,,,,background

背景基础知识

CSS,,,,,背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式。

CSS中背景单词:

background,,,,,查询-

,,,,设置颜色作为对象背景颜色

,,,,设置图片作为背景图片

设置背景平铺重复方向

,,,,设置或检索背景图像是随对象内容滚动还是固定的。

,,,,设置或检索对象的背景图像位置。

Html原始背景与CSS背景对照

Html是指对应效果的table背景设置,

Html背景单词:

Bgcolor设置背景颜色,,,,,与CSS,,,,,背景颜色对应background-color

Background设置图片作为背景与CSS背景图片对应background-image

最原始HTML背景设置演示代码:

 

 

这里设置了table背景颜色为#996600,然后设置了td的背景图片为背景颜色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。

如果是CSS,,,,,背景颜色,可使用background-color:

颜色值;或,,,,,background:

颜色值设置对象背景颜色。

CSS,,,,,背景颜色设置演示图:

 

以上截图分别使用background-color和background来设置对象背景颜色,,,,,

CSS图片背景

这里说的是以图片作为背景图片,,,,,- ,,,,,详细介绍:

CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

background:

url设置的LOGO图片作为背景

background-image:

url具有相同效果。

这样设置图片作为背景有个缺陷就是图片会上下左右的重复,接下来我们只需看以下图例教程即可掌握CSS,,,,,background

图片背景样式(固定、滚动)

实现这个效果使用CSS单词是background-attachment,,,,,当然通常情况下背景默认是固定的如果是自己使用CSS,,,,,background简写则如上图。

background-attachment使用解析:

background-attachment:

fixed;,,,,,背景固定

background-attachment:

scroll,,,,,背景图像是随对象内容滚动

,,,,背景居中

CSS,,,,,背景分为左右居中和上下居中,具体左右居中方法见上图。

背景图像上下居中,可以使用计算上下高度然后平分设置,如上下高度距离为500px,那就设置图片居顶部多少PX可以让图片实现上下居中。

CSS,,,,,background(背景)总结:

使用图片作为背景在一个网页布局中常常会遇到,希望大家能在实际中掌握其知识。

一般设置对象图片作为背景属性实例,,,,,background:

#666,,,,,url(图片地址),,,,,no-repeat,,,,,center,,,,,top,,,,,;(解释首先设置背景颜色,,,,,紧跟设置图片作背景,,,,,紧跟图片是否重复,,,,,然后跟图片在对象位置。

前面的背景颜色可以不用设同时不是必须,一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置)

1、设置图片作为背景如果图片设置图片在X坐标方向重复,如果再设置图片在对象位置的左或右位置时将无效,可设置在对象上或下位置开始显示。

2、设置图片作为背景如果图片设置图片在Y坐标方向重复,如果再设置图片在对象位置的上或下位置时将无效,可设置图片在对象左或右位置开始显示。

3、如果设置背景完全重复显示,那设置图片在对象上下左右位置开始显示将无线。

希望大家好好理解有不懂的地方可以进入讨论区发表问题,我们将尽力答复您。

中float认识及css,,,,,float用法

float是什么意思?

float是浮动,翻译成中文也是浮动意思。

进入对应中了解float基本信息。

float的作用

通过定义float(浮动)让层块,向左或向右(靠)浮动。

float语法:

,,,,

float,,,,,:

,,,,none,,,,,|,,,,,left,,,,,|right,,,,,

参数值:

,,,,

none,,,,,:

,,,, 对象不浮动

left,,,,,:

,,,, 对象浮在左边

right,,,,,:

,,,, 对象浮在右边

接下来我们来通过一个讲解float使用技巧。

实验一

Css样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。

演示最终效果图如下

1、首先我们设置一个最外层的宽度为300px,高度为200px的为box的代码如下(知识点是什么意思)

.box{width:

300px;,,,,,height:

200px;}

2、设置box内的文字内容部分命名为yangshi,并设置背景为蓝色,宽度为120px,居右浮动

.yangshi{,,,,,width:

120px;,,,,,float:

right;,,,,,background:

#0066FF;}

3、设置图片居左浮动div+css样式

img,,,,,{,,,,,float:

,,,,left;}

4、body内的div布局,代码如下

 

我是网站,测试内容

说明:

这里img标签是链接外部图片,图片名为

最终演示结果截图

CSS实验二

接下来我们演示使用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;}

中的和内容不变

最终演示结果截图如下:

 

希望通过以上两个对你认识float有帮助。

希望大家多少实际操作实践试试!

 

css,,,,,font,,,,,_,,,,,css,,,,,文字

DIV+Css开发中设置字体常用css属性单词英文css,,,,,font-可进入CSS手册查看更详细CSS,,,,,文字知识

font、font-family(字体)、font-size(字大小)、font-style(字样式)、font-weight(加粗)、text-decoration(下划线)、font-variant(字母大小写)、text-transform(英文大小写)、letter-spacing(间隔)

接下来,我们一一实例讲解通过css文字控制方法

1、字体大小使用到font-size,实例如下  

首先设置了font-size的值为36px,则下面结果显示字体比较大。

2、文字的颜色使用css中color颜色属性通过color更样式值设置文字样式的颜色为红色  

  ,,,,,3、Css来控制文字的下划线方法css,,,,,font,用到text-decoration可以进css手册了解对应值,你还可能还希望了解,样式、

  ,,,,,4、文字的间隔-进入详细的了解

  ,,,,,5、文字的字体-用到属性font-family,字体设置图例如下

一般font-family字体可以跟常见的“宋体”,“新宋体”,“黑体”,注意的是不能自己设置不参加的字体样式,虽然在自己电脑上可能自己设置字体能表现出了,但是一般电脑用户都没有添加字体的,所以在这里字体只能设置常见,系统自带的字体,而不能设置自己安装的字体。

电脑自带字体,和常设置文字字体有黑体、新宋体、宋体、Arial,,,,,,Helvetica,,,,,,sans-serif等

  ,,,,,6、文字的上下行间距,使用到css文字设置单词line-height,这里设置line-height:

50px;

可以看到演示css,,,,,font文字段“我是被css控制文字样式演示。

”离上下文字间隔距离是通过来实现。

也许你需要了解。

  ,,,,,7、字体样式(斜体)使用到css样式中font-style标签设置如font-style:

,,,,italic,当然可以使用标签将文字变为斜体

  ,,,,,8、字加粗方式-可以直接对需要加错文字前加文字后加来实现,对文字的加粗,这里你可以用css来控制对文字加粗。

这里用到font-weight来设置如font-weight:

bold;

这里的值可以为100-900不等的方式为值,值越大字体越粗,如果值为bold则为正常加粗,同使用b或strong一致效果。

  

展开阅读全文
相关搜索
资源标签

当前位置:首页 > 经管营销 > 经济市场

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2