收藏
下载资源下载资源 加入VIP,免费下载

Div+CSS基础代码网页布局+实例教程.docx

上传人：b****6 文档编号：4359258 上传时间：2022-11-30 格式：DOCX 页数：13 大小：92.53KB
下载 相关 举报
Div+CSS基础代码网页布局+实例教程.docx_第1页
第1页 / 共13页
Div+CSS基础代码网页布局+实例教程.docx_第2页
第2页 / 共13页
Div+CSS基础代码网页布局+实例教程.docx_第3页
第3页 / 共13页
Div+CSS基础代码网页布局+实例教程.docx_第4页
第4页 / 共13页
Div+CSS基础代码网页布局+实例教程.docx_第5页
第5页 / 共13页
点击查看更多>>
下载资源
资源描述

Div+CSS基础代码网页布局+实例教程.docx

《Div+CSS基础代码网页布局+实例教程.docx》由会员分享，可在线阅读，更多相关《Div+CSS基础代码网页布局+实例教程.docx（13页珍藏版）》请在冰豆网上搜索。

Div+CSS基础代码网页布局+实例教程.docx

Div+CSS基础代码网页布局+实例教程

Div+css

一，什么是CSS

CSS全称为CascadingStyleSheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。

2．DIV+CSS

简单地说DIV+CSS（DIVCSS）被称为“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:

1pxsolid#666;}

Htmlbody内代码：

演示，内容

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

完整CSShtml最小高度实例代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

CSS高度实例

演示，内容

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

CSS宽度

传统Html宽度属性单词：

width如width="300";

CSS宽度属性单词：

width如width:

300px;

HTML宽度与DIV+CSS对比

1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。

而宽度值后无需跟单位，默认情况下以像素（px）为单位。

如：

我的宽度为300px

即：

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

2、divcss中宽度设置width:

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

如：

#header{width:

300px;}

即：

定义headerCSS选择器样式为300px宽度。

而在标签运用：

我的宽度为300px宽度

CSS宽度自适应

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

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

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

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

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

DIVCSS自适应宽度例子：

CSS样式代码：

body{margin:

0auto;text-align:

center;}

.yangshi{width:

80%;border:

1pxsolid#003;margin:

0auto;}

Html中bodydiv代码：

我是80%自适应宽度

CSS边框

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

Html表格控制边框：

border="1"bordercolor="#000000"

说明：

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

DIVCSS边框：

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:

#000solid1px;

 

完整DIVCSS实例：

实例内容设置CSS命名为yangshi的css选择器，设置该属性选择器样式为边框为1px宽度实线黑色边框、宽度为200px,高度为50px的矩形。

CSS代码：

div,body{border:

0;margin:

5px;padding:

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

.yangshi{border:

1pxsolid#000;width:

200px;height:

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

HTML中对应DIV代码：

divcss5实例-CSS边框实例

这是一个CSS实例

CSS背景

backgroundCSS手册查询-background手册

background-color设置颜色作为对象背景颜色

background-image设置图片作为背景图片

background-repeat设置背景平铺重复方向

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

background-position设置或检索对象的背景图像位置。

图片背景样式（固定、滚动）

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

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文字cssfont

DIV+Css开发中设置字体常用css属性单词英文cssfont

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}

Divhtml代码：

我被加粗

我也被加粗了

我未被加粗

Padding属性

Padding属性包含了

paddingleft：

左补距离（设置距左内边距）

；paddingtop：

头顶补距离（设置距顶部内边距）

；paddingright：

右补距离（设置距右内边距）

；paddingbottom：

底补距离（设置距低内边距）。

其二维构建图可见CSS属性二维图。

Padding解析图

paddingleft用法：

padding-left:

10px;这个意思距离左边补距10像素，可跟百分比如（padding-left:

10%;距离左边补10%的距离）；

paddingright用法：

padding-right:

10px;这个意思距离右边补距10像素，可跟百分比如（padding-right:

10%;距离右边补10%的距离）；

paddingtop用法：

padding-top:

10px;这个意思距离顶边补距10像素，可跟百分比如（padding-top:

10%;距离顶边补10%的距离）；

paddingbottom用法：

padding-bottom:

10px;这个意思距离低边补距10像素，可跟百分比如（padding-bottom:

10%;距离底边补10%的距离）；

注意padding中间的链接“-”号，设置距离值时用“：

”并赋予值，并以“；”结束，并且全部用小写半角字母。

CSS注解

作用：

css注解（css注释）可以帮助我们对自己写的CSS文件进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性，同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的，以便顺利快速开发divcss网页。

CSS注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说明内容放到“/*”“*/”中间。

css注解——div+CSS注释示例如下：

/*css注解实例css注释实例*/

/*body定义*/

body{text-align:

center;margin:

0auto;}

/*头部css定义*/

#header{width:

960px;height:

120px;}

CSS超链接

超链接的代码

DIV+CSS

解析如下：

href后跟被链接地址目标网站地址这里是

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代码

.yangshia{color:

#333;text-decoration:

none;}

.yangshia:

hover{color:

#CC3300;text-decoration:

underline;}

这里值得注意的是a.yangshi与.yangshia的样式css代码区别

字体（font-family）

CSS运用实例代码：

.divcss5{font-family:

黑体;}

我也是黑体字体

 

Html的文字字体设置代码：

我是黑体字

边距margin

CSS优化

CSS代码优化地方：

1、border（CSS边框）简写：

border-top:

1pxsolid#000;border-bottom:

1pxsolid#000;border-left:

1pxsolid#000;border-right:

1pxsolid#000;

可以简写为：

border:

1pxsolid#000;

2、padding（CSSpadding）简写：

padding-top:

1px;padding-right:

2px;padding-bottom:

3px;padding-left:

4px;

可简写为：

padding:

1px2px3px4px;

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:

1px2px3px4px;

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/12pxArial,Helvetica,sans-serif;

2、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;}

CSSID与CSSCLASS

Cssid知识

一个网页里ID只能使用一次。

当然即使一个id在一个网页内被使用多次，其CSS样式仍然可以实现生效，但是一般规定W3C标准是使用一次

 

id选择器以"#"来定义，命名CSS选择器。

定义命名cssid选择器例子：

#yangshi1{color:

#F00;}定义红色实例

#yangshi2{color:

#0F0;}定义绿色

对应html中div引用

我颜色为红色

我颜色为绿色

一个div标签的定义只能使用一个id如：

测试内容

或

测试内容

两个都是不正确的，并且CSS样式属性也不能生效-成为CSS失效之一。

CSSclass知识

与CSSID不同class可以在网页中多次用到。

Class选择器定义以“.”来定义。

定义cssclass选择器例子：

.yangshi1{color:

#F00;}定义文字为红色.yangshi2{font-size:

28px;}定义文字大小为18px

对应html中div+css引用：

我颜色为红色

我字体大小为28px

我颜色为红色文字大小为28px

以上即是“yangshi1”“yangshi2”类的正确使用方法

图片img

图片实例

Img{padding:

0;border:

0;}

 

列表LI

li不能单独使用，需要与

    或
      配合使用，使用范例：

      1. div+css范例

      2. div+css范例之li

      • div+css范例

      • div+css范例之li

       

      此内容来自：

      唐山小鱼网络工作室

      更多内容请访问

      展开阅读全文
      猜你喜欢
      相关搜索

      当前位置：首页 > 高中教育 > 数学

      copyright@ 2008-2022 冰豆网网站版权所有

      经营许可证编号:鄂ICP备2022015515号-1