第一范文网 - 专业文章范例文档资料分享平台

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

来源:用户分享 时间:2025/6/8 7:44:14 本文由loading 分享 下载这篇文档手机版
说明:文章内容仅供预览,部分内容可能不全,需要完整文档或者需要复制内容,请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ:xxxxxx 处理(尽可能给您提供完整文档),感谢您的支持与谅解。

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=\这种方式嵌入表格标签内,而且无需带单位,默认以px(像素)为单位。 例子:

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

DIV的布局方法

CSS 代码

.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}

Html body内代码:

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

html

PUBLIC

\

XHTML

1.0

Transitional//EN\

\

CSS 高度实例

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

CSS 宽度

传统Html 宽度属性单词:width 如width=\ CSS 宽度属性单词:width 如width:300px;

HTML宽度与DIV+CSS对比

1、传统html中宽度width=\,即设置对应元素宽度为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=\

说明:控制表格边框宽度为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 设置或检索对象的背景图像位置。

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

搜索更多关于: Div+CSS基础代码网页布局+实例教程 的文档
Div+CSS基础代码网页布局+实例教程.doc 将本文的Word文档下载到电脑,方便复制、编辑、收藏和打印
本文链接:https://www.diyifanwen.net/c5lo831quec4oweh0pir7_1.html(转载请注明文章来源)

Copyright © 2012-2023 第一范文网 版权所有 免责声明 | 联系我们
声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
客服QQ:xxxxxx 邮箱:xxxxxx@qq.com
渝ICP备2023013149号
Top