急求大学HTML5与CSS网页制作作业

html-css014

急求大学HTML5与CSS网页制作作业,第1张

网页模板素材下载:

http://sc.chinaz.com/moban/cssmoban.html

www.dedecms.com/template/

找个合适的随便修改下就可以了。都是免费的~~亲

CSS(层叠样式表)

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

注:单独使用CSS是无法实现QQ邮箱登录实例(CSS为样式代码)。

实例

可以使用iframe代码实现QQ邮箱登录实例。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>qq邮箱登录实例</title>

</head>

<body>

<p align="center" style="margin-top:0pxmargin-left:0">

<iframe width="1000" height="500" src="https://mail.qq.com" class="t-iframe" scrolling="no" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 

</p>

</body>

</html>

代码解释:

url是你要调用的网址,<p align="center" style="margin-top: -109margin-left: -109">是网页布局、其中margin-top: 0表示顶部缩进,margin-left: 0表示左边缩进。至于右边和底部缩进,很简单,修改<iframe>的宽度和高度就可以了。

CSS 外边距,div与div间距设置基础之css margin DIV CSS margin外边距外补白边距样式属性

margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反css padding却是紧贴边框位于边框内侧。

目录

margin语法与应用结构

css margin缩写简写

常用的margin样式

css margin用法案例

css margin总结

一、margin基础语法与结构 - TOP

DIV CSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。

1、margin语法

Margin:10px

Margin的值是数字+html单位,同时也可以为auto(自动、自适应)

2、应用结构

Div{margin:10px}

设置div对象四边间距为10px

3、Margin说明

margin是设置对象外边距外延边距离。

margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left:20px);可以为auto自动属性(margin-left:auto 自动);可以为百分比(%)值(margin-left:3%)。

Margin延伸(单独设置四边间距属性单词)

margin-left 对象左边外延边距 (margin-left:5px左边外延距离5px)

margin-right 对象右边外延边距 (margin-right:5px右边外延距离5px)

margin-top 对象上边外延边距 (margin-top:5px上边外延距离5px)

margin-bottom 对象下边外延边距 (margin-bottom:5px下边外延距离5px)

常见margin使用场景

4、margin实际应用地方

两个布局之间距离设置。

如上图中“CSS手册”和“DIV CSS研教室”黄颜色的背景之间空隙(背景土红)。

二、css margin缩写简写 - TOP

margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。

你可能需要了解:CSS优化-CSS压缩:http://www.divcss5.com/jiqiao/j97.shtml

你可能需要了解:HTML优化-HTML代码优化压缩:http://www.divcss5.com/jiqiao/j326.shtml

1、只有上下情况缩写

原始:margin-top:5pxmargin-bottom:6px

缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情况缩写

原始:margin-left:5pxmargin-right:6px

缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px

3、只有三边情况缩写

原始:margin-top:5pxmargin-bottom:6pxmargin-left:4px

缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四边相同值缩写

原始:margin-top:5pxmargin-bottom:5pxmargin-left:5pxmargin-right:5px

缩写:margin:5px

5、四边不同值缩写

原始:margin-top:5pxmargin-bottom:6pxmargin-left:7pxmargin-right:8px

缩写:margin:5px 8px 6px 7px

6、四边其中上下值和左右值各相同缩写

上下相同、左右相同原始:margin-top:5pxmargin-bottom:5pxmargin-left:7pxmargin-right:7px

缩写:margin:5px 7px

Margin简写分析图:

css div margin样式简写语法应用分析图

三、常用的margin样式 - TOP

1、用margin设置对象盒子间距

我们常用margin设置2个盒子之间距离,无论上下左右的距离我们均可以利用margin实现间隔。

实际可用margin地方示图

2、利用margin实现布局居中,基础单词:

marign:0 auto

即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式,这里divcss5提供一个css初始化模板为DIV CSS布局时候无需重复设置css text-align:center等初始化样式属性。

四、css margin普通案例 - TOP

DIVCSS5设置2个盒子,为了体现margin作用,我们对其2盒子设置css border边框、一定css宽度和css高度。

1、margin用法css代码

.divcss5-top,.divcss5-bottom{width:300pxheight:100pxborder:1px solid #F00}

.divcss5-bottom{ margin-top:10px}

2、html代码片段

<div class="divcss5-top">上对象</div>

<div class="divcss5-bottom">下对象,我们设置了margin-top为10px间距</div>

3、mairgin应用案例截图

margin实例实践案例效果图《http://www.51rgb.com/nbbs/forum-82-1.html》

从上案例我们分析出margin是设置对象(比如div盒子、span盒子等)之间间距,并体现出margin是存在与对象盒子边框外侧。

五、css margin总结 - TOP

Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。

margin缺点:

在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。

您可能需要了解CSS兼容浏览器知识。