网页设计与网站制作html_第1页
网页设计与网站制作html_第2页
网页设计与网站制作html_第3页
网页设计与网站制作html_第4页
网页设计与网站制作html_第5页
已阅读5页，还剩97页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与网站制作李于网页设计这门课专业方向、就业前景、学习状态等代码之美/技术之美基础——识记；中、高级——灵活运用敲代码，赏析各种优秀网页，模仿制作，拓展理论（专业术语、书籍）。

赏析网页地址：/课外阅读书籍关键词：用户体验、可用性设计、交互设计、网页设计等评分在8以上一：网页的构造一个html网页包含什么一个html网页主要包含三个部分

文本内容——纯文字

对其他文件的引用——影、音、图、样式表、javascript

标签（标记）

------------------------------------------------- Html——描述内容是什么，网页内容主要的语义化容器 Css样式表——控制内容的外观

（每个浏览器自带的样式可以被css覆盖） -------------------------------------------------其他部分：用于浏览器和搜索引擎的信息

网页的顶部和头部

Doctype——告诉浏览器

html——添加属性，表明页面语言

meta——字符集

title——浏览器书签名、对搜索引擎有用标签：元素、属性、值及其他元素由开始标签、内容和结束标签组成。有的元素包含一个或者多个属性来进一步描述元素。属性和值

属性包含元素的额外信息，推荐加引号，小写字母。

有的属性接受任意值，有的仅接受预定义值。

数字值默认单位是像素，可以不加单位。

值为布尔属性时，只要这种属性出现即可。Html（html5）开始标签结束标签

<p>……</p>

<header>……</header>单独标签

<meta/>

<link/>

<img/>Html的树状结构父元素和子元素

必须正确嵌套

父子，祖，后代

<body>

<header>

<h1>……</h1>

……

</header>

</body>网页内容、命名、后缀名网页的文本内容

浏览器处理空格与换行

字符编码指定--<metacharset=“utf-8”/>链接、图像其他文本内容文件夹、文件名——小写，有意义名称，便于组织扩展名/后缀名——.html名称分割线用短横线地址——url绝对地址相对地址

同目录

子目录

上层目录根相对地址htmlHtml描述的是网页内容的含义，即语义。语义化html指的是那些使用最恰当的html元素进行标记的内容，在标记过程中并不关心内容显示。语义化html优势：

访问性、操作性无障碍访问

seo优化

易于添加样式

加载快

块级元素、行内元素二：处理网页文件规划网站（赏析网址）创建、编辑网页保存网页指定默认主页组织站点文件在浏览器中查看网页及源代码浏览器插件三：基本html结构<!Doctypehtml>不分大小写，但推荐大写首字母<htmllang=“zh-cn”>非必须，推荐加，搜索引擎根据lang属性指定语言区分搜索结果<head><metacharset="utf-8"><title>页面标题</title>……</head>页面标题title、搜素引擎优化、样式、js（javascript）仅title可见<body>……</body></html>标题分级标题

h1—h6，依据层次关系选择标题级数，避免跳级，不要标记副标题，标题对的搜索引擎重要性，尤其h1H1～h6是块级元素页面构成带导航的页头显示在主体内容区域的文章显示次要信息的附注栏页脚页眉--header<header>标签定义文档的页眉（介绍信息）。如果页面中有一块包含一组介绍性或导航性内容的区域，用header元素进行标记。一个页面可以有任意数量的header元素，含义根据上下文有所不同。通常，页眉包括网站标志，主导航，其他全站链接，搜索框。通常，header包括其自身的标题（h1-h6）。Header作为页面级页眉时，添加role=“banner”提高访问性。如果h1-h6能满足需求就没有必要用header将它包起来。不能在header里嵌套footer或另一个header，也不能在footer或者address里嵌套headerHeader不必需包含nav，除非header包含导航性链接。

Header是块级元素标记导航--nav<nav>标签定义导航链接的部分。Nav中的链接可以指向页面中的内容也可以指向其他页面或资源，或者两者兼而有之。仅对文档中重要的链接群使用nav添加role=“navigation”属性可以提高访问性不推荐对辅助性的页脚链接使用nav，除非再次显示顶级全局导航或其他重要链接。不允许将nav嵌套在address中nav是块级元素标记页面的主要区域--main<main>标签规定文档的主要内容。一个页面只有一个部分代表其主要内容，该元素在一个页面仅使用一次，就可以将这样的内容包在main元素里。在一个文档中，不能出现一个以上的<main>元素。<main>元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。在main开始标签中添加role=“main”属性可以帮助屏幕阅读器定位页面的主要区域。不能将main放在article、aside、footer、header、nav中，即：<main>元素不能是以上元素的后代。main是块级元素创建文章--articlearticle表示文档、页面、应用或网站中一个独立的容器，是可以独立分配或可再用的部分，可以是一篇帖子、一篇文章、一篇博文、一条评论、一篇影评、一个案例、一个产品描述、一个交互式的小部件或小工具，或者任何其他独立的内容项。可以将article嵌套在另一个article中，只要里面的article与外面article是整体与部分关系。一个页面可以有多个article一个article可以包含一个或多个section在article里包含独立的h1~h6是很好的做法article是块级元素定义区块--sectionSection元素代表文档或应用的一个一般的区块、文档中的区段，比如章节、页眉、页脚或文档中的其他部分。section是具有相似主题的一组内容，通常包含一个标题。Section是页面中的特定区域，是有语义的，与div不同。Section在本质上组织性和结构性更强，而article代表的是自包含的容器。section是块级元素指定附注栏--aside页面中一个与主题内容、或者附近的内容有相关性且可以独立存在的部分用aside标签定义。重要的引述、文章的侧栏、指向相关文章的一组链接（如新闻网站）、广告、nav元素组（如博客的友情链接）、相关产品列表（如电子商务网站）如果aside嵌套在页面主要内容内（而不是作为侧栏位于主要内容之外）则其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关。给aside添加role=“complementary”提高可访问性。在html中应该将aside放在main内容之后对于与内容有关的图片，使用figure不允许将aside嵌套在address元素内aside是块级元素创建页脚--footer<footer>标签定义页面或节的页脚，页脚通常包含文档的作者、版权声明、指向隐私政策的链接、使用条款链接、联系信息等等，与header一样，也可以用在其他地方。<footer>元素内的联系信息应该位于<address>标签中。footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素的页脚，只有当它最近的祖元素是body时，它才是整个页面的页脚。如果一个footer包着它所在区块（如一个article）的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。通常，页脚位于所在元素的末尾。可以在一个文档中使用多个<footer>元素。不能在footer里嵌套header或另一个footer，也不能将footer嵌套在header或address元素里。仅对页面级footer使用role=“contentinfo”footer是块级元素创建通用容器--div<div>可定义文档中的分区或节（division/section）。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。当需要在一段内容外包围一个容器，从而可以为其应用css样式或javascript效果，又不需要考虑语义时，可以添加一个完全没有任何语义的容器—divdiv应该作为最后一个备用容器，适合所有页面容器而无需使用新的html5元素div是块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用额外的样式。

（

class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。）作为内容区块的主要语义化容器header，footer,aritcle、section、aside、nav可以用在任何地方。Div适合所有页面容器，而无需使用新的html5元素，但是要把它作为最后一个备用容器。使用ARIA（无障碍网页访问倡议）改善访问性ARIA的地标角色——role属性

role=“banner”

横幅，添加到页面级的header元素，一个页面只用一次

role=“navigation”

导航，可以每个页面使用多次，但是同nav一样，不要过度使用该属性

role=“main”主体

在每个页面仅使用一次

role=“complementary”补充性内容

可以在一个页面里包含多个complementary，不要过度使用该属性

role=“contentinfo”内容信息

在每个页面仅使用一次ARIA的地标角色用于提升用户体验，对页面外观没有影响。

为元素指定类别或者ID名称给html元素指定id或类别，或同时指定id和类别，推荐以指定类别为主。

Id=“name”

class=“nameanothername”

一个页面不能出现两个具有相同id的元素，且每个元素只能有一个id。一个页面可以有一个以上的class。元素可以同时拥有id和任意数量的class尽量避免使用描述表现样式的名称为元素添加title属性可以为任何元素添加title提升无障碍访问功能，不过用的最多的是链接添加注释<!–开始

……注释内容-->结束第四章<p>

段落<small>细则<p>

标签定义段落，是块级元素，p元素会自动在其前后创建一些空白(这个空白也可以用css样式调整)。<small>标签表示细则一类的旁注，包括免责声明、注意事项、法律限制、版权信息、署名、满足许可等。small元素通常是行内文本中的一小块，small元素呈现小号字体效果。<small>标签也可以嵌套，从而连续地把文字缩小，每个<small>标签都把文本的字体变小一号。

small只适用于短语,内容较多时应该采用p元素。<br/>创建换行<br/>可插入一个简单的换行符。<br/>标签是空标签（意味着它没有结束标签）。使用<br/>来输入空行，而不是分割段落。<span><span>标签被用来组合文档中的行内元素。<span>标签没有固定的格式表现，没有语义，只适合包围字词或短语内容。可以<span>应用id或class属性，这样既可以增加适当的语义，又便于对<span>应用样式。<em>强调<strong>重要HTML的<em><strong><dfn><code><cite>等标签都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。如果您只是为了达到某种视觉效果而使用这些标签的话，需要使用样式表<em>标签把文本定义为强调的内容。文字用斜体来显示,除强调之外，当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用<em>标签。<strong>标签把文本定义为语气更强的强调的内容。

<strong>标签和<em>标签一样，用于强调文本，但<strong>标签强调的程度更强一些。<em>和<strong>是行内元素<mark>突出显示文本

在需要突出显示文本时使用<mark>标签，用于提醒读者对特定文本片段的注意。<time>指定时间<time>标签定义公历的时间（24小时制）、日期或时间。使用datetime属性规定日期或时间。

不能在<time>里嵌套另一个<time>也不能在没有datetime属性的time元素中包含其他元素，只能包含文本。<time>是行内元素

语法：<timedatetime="YYYY-MM-DDThh:mm:ss">……</time>

日期或时间。下面解释了其中的成分： YYYY-年(例如2011) MM-月(例如01表示January) DD-天(例如08)

T-必需的分隔符，若规定时间的话 hh-时(例如22表示10.00pm) mm-分(例如55) ss-秒(例如03)<address>作者联系信息<address>标签定义文档或文章的作者/拥有者的联系信息。大多数时候联系信息的形式是作者的电子邮件地址或指向联系信息页的链接，或者是作者的通讯地址。

<address>元素中的文本通常呈现为斜体。大多数浏览器会在address元素前后添加折行。如果<address>元素位于<body>元素内，则它表示文档联系信息。

如果<address>元素位于<article>元素内，则它表示文章的联系信息。<cite>引用标题、名称<q>引用短语

<blockquote>引用文本块<cite>标签通常表示它所包含的文本是对某内容源的引用，比如某参考文献、书籍或者杂志的标题。引用的文本默认将以斜体显示。如果引用的这些文档有联机版本，还应该在这个标签内部把引用包括在一个<a>标签中，从而把一个超链接指向该联机版本。属于行内元素。<q>标签定义简短的引用。浏览器经常在引用的内容周围添加引号。

<q>标签在本质上与<blockquote>是一样的。不同之处在于它们的显示和应用。<q>标签用于简短的行内引用，并且引用内容不能跨越不同的段落。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用<blockquote>标签。<blockquote>标签定义块引用。<blockquote>元素包围的所有文本都会从常规文本中分离出来，显示在新一行，在左、右两边进行缩进（即增加外边距）。<code>标记代码<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code>标签就是为他们设计的。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用<code>标签。<pre>预定义格式pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体，它是计算机代码示例的理想元素。<pre>标签的一个常见应用就是用来表示计算机的源代码。如果你的代码需要显示<和>，应该分别使用<和>

如果你的代码需要显示引号，应该使用"

/不变。<abbr>缩写词<abbr>标签指示简称或缩写，比如"WWW"或"NATO"。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。可以在<abbr>标签中使用全局的title属性，这样就能够在鼠标指针移动到<abbr>元素上时显示出简称/缩写的完整版本。也可以同时将全称放在缩写词后面的括号里。当含有title属性是firefox浏览器会添加下划虚线以引起注意。例：

The<abbrtitle="People'sRepublicofChina">PRC</abbr>wasfoundedin1949.<dfn>定于术语<dfn>标签可标记首次定义的术语（不是包围定义），后续使用术语时不再需要使用dfn对其进行标记。现在流行的浏览器通常用斜体来显示<dfn>中的文本。<sup>上标<sub>下标<sup>标签可定义上标文本。

包含在<sup>标签和其结束标签</sup>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。<sub>标签可定义下标文本。

包含在<sub>标签和其结束标签</sub>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。如果和<a>标签结合起来使用，就可以创建出很好的超链接脚注。

<ins>

添加的内容<del>删除的内容<ins>标签定义已经被插入文档中的文本。

<del>标签定义已经被删除的内容。两个元素一同使用，来描述文档中的更新和修正。属性 值

描述CiteURL

指向另外一个文档的URL，此文档可解释文本被插入的原因。DatetimeYYYYMMDD定义文本被插入的日期和时间。<figure>独立流内容<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。请使用<figcaption>标签为figure添加标题。<figcaption>定义figure元素的标题<figcaption>标签定义figure元素的标题。用作文档中插图的图像，带有一个标题。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。<img/>img元素向网页中嵌入一幅图像。请注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img/>标签有两个必需的属性：src属性和alt属性。图像尺寸：属性 值 描述height pixels/%定义图像的高度。width pixels/%设置图像的宽度。<imgsrc="/i/eg_tulip.jpg"alt="上海鲜花港-郁金香"/>图像格式JpgGifPngWebpSvgIcon网站图标Retina显示屏的图像及网站图标Retina显示屏在相同的空间里，它拥有的像素数量是普通显示屏的像素数量的四倍。其他元素<progress>标签标示任务的进度（进程）。结合<progress>标签与JavaScript一同使用，来显示任务的进度。属性 值

描述max number

规定任务一共需要多少工作。valuenumber

规定已经完成多少任务。<progressvalue="22"max="100">20%</progress><metervalue=“0.8”>80%</meter>链接指向另一个网页的链接<ahref=“url”title=“”>……</a>

url会显示在状态栏，title文字会显示在链接旁边。块链接

包含块级元素锚链接

创建锚——id=“name”

href=“#name”，href=“a.html#name”其他类型链接

指向万维网任何文件（图片、压缩包、程序、pdf、docx等）

mailto:name@

tel:国家代码和电话号码7css构造块css构造块一条css样式规则由两部分组成：选择器+声明块选择器：告诉浏览器网页上哪个元素或哪些元素定义了要进行样式设置；声明块：以左”{”开始，以右”}”结束；声明：一个属性+一个值，并以一个分号结束；放在{}之间属性：css提供的格式化选项——属性，表示一种特定的样式效果；值：给属性赋值，类型有颜色、长度、url、关键字等。声明的顺序不重要样式规则的注释

/*……*/可以包含多行描述，通常加在每组规则前关于“继承”1.应用在一个标签上的css属性被传递到嵌套标签上的过程称为继承。（继承也在多代间进行）2.继承不是万能的，许多css属性不传递给派生标签，如border,padding等属性。

3.可以利用继承的优势简化样式表并使之更有效。

影响网页上的元素位置的属性、页边距和元素的边框不被继承；

当样式发生冲突时，更具体的样式胜出。关于“层叠”：当规则发生冲突时

指定浏览器应该如何处理应用给同一个标签的多个样式的问题，以及当css属性相冲突时该做什么。当一个标签继承多个祖先的样式时以什么方式进行格式设置？ *.直接应用于元素的样式击败所有继承来的样式； *.顺序：最近的样式胜出（最后定义的样式胜出）

*.特殊性：哪种样式胜出（见下图）

*.重要性：在某条规则的末尾加上!important.如：p{color:red!important;}但不推荐使用。

!important>行内>ID>类>元素属性的值任何值预定义值长度和百分数纯数字urlCss颜色Rgb十六进制

rgba

hsl和hsla8操作样式表Css样式结构Css样式（单独）声明(块)声明1声明2声明3属性值css3手册.chm颜色、长度、url、关键字Css样式一个网页需要多个css样式——css样式表；一个样式表可能是两种存在形式——嵌入样式表、外部样式表（样式放置的位置）嵌入样式表（又叫内部样式表）

<style>

h1{

color:#ff6600;

}

</style>外部样式表<linkrel="stylesheet"href="main.css“/>内联样式表（又叫行内样式）<pstyle=“color:#f60”>受影响的文字</p>Css样式——外部样式表外部样式表

<linkrel=“stylesheet”href=“css/global.css”/>

rel:表示链接类型——这里表示链接到样式表的一个链接；

href:指向网站中那个外部css文件的位置，该属性值是一个url。Css样式——内联样式创建一个内联样式表

如果你必须改变单张网页的单个元素的样式时使用。

不省时间，不节省宽带，只有紧要关头用。<pstyle="color:#003300;font-size:20px;">……<p>

Css样式表结构Css样式表（集合）Css样式（单独）选择器声明(块)声明1声明2声明3属性值css3手册.chm颜色、长度、url、关键字嵌入样式表外部样式表内联样式表使用与媒体相关的样式表可以指定用于特定输出的样式表，如打印、或浏览器查看,如：

<linkrel=“stylesheet”href=“style.css”media=“screen”/>

<linkrel=“stylesheet”href=“print.css”media=“print”/>也可以在样式表中用@media规则指定其他媒体类型，把样式规则放在@mediaprint{}中，如：p{ color:rgba(7,118,251,1.00); }@mediaprint{ p{ color:#f60;} }9定义选择器按元素名称选择元素

元素{属性:值；}按类或ID选择元素

.classname{属性:值；}

#id{属性:值；}

.classname1.classname2{属性:值；}类选择器和ID选择器区别

尽可能使用类

ID在一个页面只出现一次

可以组合一个或多个类

ID可以在页面定义锚按上下文选择元素

1.按祖元素选择格式化的元素

ancestordescendant{属性:值;}

2.按父元素选择要格式化的元素

parent>child{属性:值;}/*直接后代*/

3.按相邻

同胞元素选择要格式化的元素

sibling+element{属性:值;}

/*相邻且同胞*/

指定元素组

selector1,selector2{属性:值;}组合使用选择器

h1,h2,.class,#id{属性:值;}}通配符选择器

*按状态选择链接元素

a:link{属性:值;}

a:visited{属性:值;}

a:focus{属性:值;}

a:hover{属性:值;}

a:active{属性:值;}按属性选择元素E:目标元素,可以根据具体情况省略。

att：属性名称

val：值选择第一或最后一个子元素

元素:first-child{属性:值;}

元素:last-child{属性:值;}

选择元素的第一个字母或第一行

元素:first-letter{属性:值;}

元素:first-line{属性:值;}10为文本添加样式字体，文字样式，字号，行距，颜色font-family:Constantia,“LucidaBright”;/*字体系列*/

列出一种以上的字体或者系统默认字体；逗号和空格分隔每个字体。font-style:italic;

/*文字样式--斜体*/font-weight:bold;

/*文字加粗*/font-size:14px;

/*字号*/

1em=100%=16px；

根据父级元素设定字号；line-height:1.5;/*行高*/color:#CD0F12;/*文字颜色*/

颜色名称、十六进制、rgb、hsl、rbga、hsla同时设定字体值，至少要包含字体大小和字体系列属性

如果设置行高，必须出现在大小和斜杠后面

font属性是继承的字/词间距，文本缩进、对齐、大小写，文字修饰线，边框letter-spacing:10px;/*中文单个字距，英文字母间距*/Word-spacing：15px;/*英文单词间距*/text-indent:40px;/*缩进*/text-align:left;/*文本对齐*/text-decoration:underline;/*装饰文本—下划线*/text-transform:uppercase;/*大写*/text-transform:small-caps;

/*小型大写*/border:1pxsolid#f60;/*边框*/背景色，背景图background-color:#DBE0E3;/*背景色*/background-image:url(3.jpg);/*背景图*/background-repeat:no-repeat;/*背景图不重复*/background-position:lefttop;/*背景图定位*/

可以用负值background-attachment:fixed;/*背景图固定*/Background属性

颜色、图片……设置空白White-space:nowrap;/*设置空白属性*/

pre/nowrap/normalcss常用属性、值列举 font-family:Constantia,“LucidaBright”;/*字体*/ font-style:italic;

/*文字样式--斜体*/ font-weight:bold;

/*文字加粗*/ font-size:14px;

/*字号*/ line-height:1.5;

/*行间距*/ color:#CD0F12;/*中文单个字距*/ background-color:#DBE0E3;

/*背景色*/ background-image:url(3.jpg);

/*背景图*/ background-repeat:no-repeat;

/*背景图不重复*/ background-position:lefttop;

/*背景图定位*/ letter-spacing:10px;/*中文单个字距，英文字母间距*/ text-indent:40px;

/*缩进*/ text-align:left;

/*文本对齐*/ text-decoration:underline;

/*装饰文本—下划线*/

display:inline-block;

/*行内、块级显示*/ width:120px;

/*宽度*/ border:1pxsolid#f60;

/*边框*/11用css进行布局网页布局注意事项内容（语义化标签包围的内容）与表现（css美化/外观）分离布局方法

固定宽度布局

响应式布局兼容不同浏览器构建页面恰当使用article、aside、nav、section、header、footer、div等元素，将页面划分成不同的逻辑分区并制定地标角色；同时使用合适的语义标记内容，如段落、图和列表。按照一定顺序放置内容，保证合理性。正确使用h1~h6，按照优先级排序。使用必要的注释来标识页面不同区域和内容。兼容旧版本浏览器在网站主样式表中添加兼容旧版本浏览器的css样式：

article,aside,figcaption,figure,footer,header,main,nav,section{display:block;}在</head>之前添加兼容旧版本浏览器的js：

<!--[ifltIE9]>

<scriptsrc="js/html5shiv.js"></script>

<![endif]-->盒模型Css处理网页时，它认为每个元素都包含在一个不可见的盒子里，这就是盒模型盒子由内容区域、内容区域周围的空间（内边距、padding）、内边距的外缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。移除所有html标签默认边距、填充区域：

*{margin:0;padding:0;}

作为书写习惯书写。Css中的width、height指的是内容的宽度盒模型外边距：Margin两个值分别代表上下左右；四个值分别代表上右下左；三个值代表上、左右、下。内边距：Padding两个值分别代表上下左右；四个值分别代表上右下左；三个值代表上、左右、下。边框：Border粗细样式颜色背景：Background-color/Background-image应用于内容和填充组成的区域Margin可以为负值padding一般不可以(非标准做法)控制显示类型display:inline;设置元素显示为块级元素display:block;设置元素显示为行内元素display:inline-block;设置元素混合显示行内元素和块级元素(例：p、h1、divulli属块级元素；strongspanemimga属行内元素)行内元素和块级元素之间转化的方法：display：inline/block混合显示方式:display:inline-block;让元素与其他内容出现在同一行，同时具有块级元素的属性。对于行内元素可以使用水平内边距、边框、外边距调整他们的水平间距。但是垂直内边距、边框、外边距不影响元素显示的高度，而是添加line-height。控制可见性普通文档流

元素在html中默认显示为自上而下的次序，并且在块级元素开头和结尾处换行。display:none;/*隐藏后不占据文档流空间*/visibility:hidden;

/*隐藏后仍占据文档流空间*/使元素浮动浮动框旁边的行框被缩短，从而在浮动框侧面留出了空间，行框围绕浮动框。使元素浮动

浮动的框可以左右移动，直到他的外边缘碰到包含框或另一个浮动框的边缘。

浮动框不在文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

如果包含块太窄无法容纳水平排列的浮动元素，那么其他浮动块向下移动，直到有足够的地方。如果浮动元素的高度不同，那么他们向下移动时可能会被其他浮动元素“卡住”。

除非你正浮动一张带有预设宽度的图片，否则你应该始终给浮动设定一个宽度

浮动要阻止行框围绕在浮动框的外边，需要对这个行框应用clear。Clear属性的值可以是left、right、both、none，表示行框的哪些边不应该挨着浮动框。添加了清理的元素的顶边缘垂直下降到浮动框下面。也可以让浮动元素的父元素“自清除”

在样式表中引用.clearfix规则，然后为浮动元素的父元素添加clearfix类

Css样式——浮动的两列布局1.*{margin:0;padding:0;}

（去除浏览器默认内外边距）2.元素居中

(左右外边距auto)3.给浮动设定一个宽度

（可以是px、em、%）4.对容器应用溢出方法或清除浮动

（容器在视觉上包含浮动元素）Css样式——相对定位Css中的三种基本定位机制：普通流（相对定位）、浮动、绝对定位（固定定位）。

普通文档

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论