suchen
HeimWeb-FrontendHTML-TutorialCSS3秘笈第三版涵盖HTML5学习笔记13~17章 - 平凡世界平凡人

第13章,构建基于浮动的布局

使用的是float(浮动)属性
注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动。
切记:不需要给正文的div设计宽度,即使设计成固定宽度也不用

用浮动进行布局

LayoutGala网站(http://blog.html.it/layoutgala/)上提供了40种不同的CSS设计,但大多只是基本框架,里面只有
标签及其定位用的CSS代码
布局生成器,Cridinator(http://gridinator.com)提供了简单的工具,用以创建复杂的多列网格系统
在浮动元素中浮动元素,会在列中增加列。

克服浮动问题

清除浮动和保持浮动
<span style="color: #800000;">footer</span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;">both</span>;
}
清除元素两边的浮动
clear属性值:left,right,both
在非浮动的外围元素如
标签中浮动元素,有可能造成当浮动元素高于div里面的其他内容时,从外围元素的底部凸出来,
解决方法:
1、在外围
底部添加一个清除元素
2、浮动外围元素
3、利用overflow:hidden,在外围元素中使用
4、使用Micro Clear Fix

多列布局

CSS3引入了multicolumn layout(多列布局)模块,IE9及其更早版本不支持,multicolumns属性可以在W3C官网上找到:www.w3.org/TR/css3-multicol/,用以创建和预览多列的在线工具:www.aaronlumsden.com/multicol/

第14章,响应式Web设计

响应式Web设计基础知识

响应式Web设计简称RWD。
Ethan Marcotte在他的著作Responsive Web Design中详细讲解了RWD的步骤,原稿:http://www.alistapart.com/articles/responsive-web-design
RWD中结合了三大理念:用于布局的弹性网络、用于图片和视频的弹性媒体、为不同屏幕宽度创建不同样式的CSS媒体查询
在网页中添加以下代码(标签上方就是它最佳位置)可以忽略手机浏览器对于网页的自动缩放:
<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width"</span><span style="color: #0000ff;">></span></span>
CSS的@viewport也可以实现同样的功能,应该将这个代码放在所有样式表前,但目前还有很多浏览器不支持,需要添加供应商前缀才行
<span style="color: #800000;">@viewport</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">device-width</span>; }

媒体查询

可以根据目标浏览器的宽高给网页分配样式

使用媒体查询的策略

1、调整列
2、弹性宽度
3、缩进空白空间
4、调整字号
5、修改导航菜单
6、在手持设备上隐藏内容
7、使用背景图片

创建断点

媒体查询可给告诉浏览器在特定条件下使用特定的样式,特定条件通常被称为断点
如何进行断点设置呢?简单做法是在网页中打开一个网页,然后使用浏览器窗口句柄,让窗口变窄,在某个点时设计将会变得很难看,这时可以设置一个断点,如此循环。一般来说会设计3个断点,一个针对智能手机,一个针对平板电脑,一个针对桌面型浏览器

桌面型优先还是手机版优先

创建媒体查询

<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="css/small.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> media</span><span style="color: #0000ff;">="(width:480px)"</span><span style="color: #0000ff;">></span></span>
只是新增了media属性,设定条件
IE8及更早版本不支持,通过在文档中添加一些js,也可以让旧版IE支持媒体查询,从http://tinyurl.com/7w49a6z下载respond.js,引入:
<span style="color: #008000;"><!--</span><span style="color: #008000;">[if lte IE 8>
    <script src="respond.min.js"></script>
<![endif]</span><span style="color: #008000;">--></span>
这种只针对精确的查询,最好使用范围值,即借助max-width(小于等于)和min-width(大于等于)
关于浏览器查询信息:www.w3.org/TR/css3-mediaqueries

弹性网格

HTML源码的顺序的重要性
重置盒模型
将固定宽度转换成弹性网格

流式图片

虽然弹性设计中列会随着浏览器窗口变小而收缩,但图片不会,这就可能导致图片溢出边界
可以使用如下方式使图片变成具有弹性:
1、首先,添加样式:
<span style="color: #800000;">img </span>{<span style="color: #ff0000;"> max-width</span>:<span style="color: #0000ff;">100</span>; }
2、将HTML中所有img标签的height和width属性删除

流式图片不足

图片会伸展到列的100%宽度,这就可能发生拉伸超出它的自然宽度,发生形变和失真。

第15章,定位网页上的元素

定位属性的功能

CSS的position属性可以控制Web浏览器如何以及在和何处显示特定的元素
CSS提供了4种类型的定位:
绝对定位:通过以pixel、em或percentage为单位设定元素的左右上下方的位置对它进行定位。
注:不要在一个样式中同时设定float属性和任何一种定位,除了静态定位和相对定位,absolute和fixed也不能和float属性同时应用于同一个元素
相对定位:相对于它在HTML流中的当前位置进行定位,与绝对定位不同,其他元素并不会占据相对定位元素原来在HTML中所处的位置,相对定位最大的好处不是移动元素,而是给它内部绝对定位元素设定一个新的参照点
固定定位:固定定位元素会被锁定在屏幕某个位置上。
静态定位:只是表示网页内容将遵循正常从上到下的HTML流
position属性可以改变任何一个元素的定位,使用以下4个关键字:static、absolute、relative、fixed
注:静态定位元素将不支持以下要讨论的任何一种定位值

设置定位值

Web浏览器窗口显示区也被称为检视区(viewport),有上、下、左、右4条边,对应CSS属性top、bottom、left、right
position属性后面还有更多种属性(top、bottom、left、right)
利用绝对定位在网页上定位元素时,它的具体位置均取决于相关元素在其它标签中所嵌套的位置:
1、如果一个标签的位置是绝对定位的,且它又不在其他任何设定了absolute、relative、fixed定位的标签里面,那它就是相对于浏览器窗口进行定位
2、如果一个标签处在另一个设定了absolute、relative、fixed定位的标签里,那它就是相对于另一个元素的边框进行定位
注:在CSS中,术语relative不完全等同于它的本义,可以解读为“相对于我”的意思。即当对一个标签设置relative定位时,意思是“我内部所有定位元素应该相对于我的位置进行定位”

堆叠元素

一般来讲,定位元素重叠时的堆叠顺序是按照它们在网页HTML代码中的顺序来决定,但可以通过CSS属性z-index来控制定位元素的堆叠顺序:
z-index:3;     这个值为数字,数字越大,越接近堆叠顶部,即出现在HTML页面的前面,还可以使用负值,将一个元素定位在其父元素或者其任意一个祖先元素之下。
注:IE7及更早版本不支持,z-index最大值是2147483647

隐藏部分网页

绝对定位元素时常用CSS属性visibility(可见性),隐藏部分网页或显示隐藏部分visibility:hidden(隐藏),visibility:visible(可见)
visibility:hidden与display:none类似,不过visibility会在HTML网页留下空白,display不会
opacity属性也可以隐藏元素:opacity:0,完全不可见,opacity:1,完全可见

强大的定位策略

综合使用position的定位

第四部分----CSS高级技术

第16章,设计打印页面的CSS技术

Media样式表的作用

CSS支持10种不同的媒体类型:all、braille、embossed、handheld、print、projection、screen、speech、tty、tv
应特别注意的3种媒体类型:
all:适用于每一种设备,当把样式嵌入或通过外部样式表进行链接时,用的就是这种方式
screen:只适用于显示器
print:只适用于打印网页

给外部样式表指定媒体类型

<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> media</span><span style="color: #0000ff;">="print"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="print.css"</span><span style="color: #0000ff;">></span></span>
技术上来说:@import url(print.css) print;也是可以的,只是IE不支持

在样式表中指定媒体类型

在样式表中使用以下语句:
<span style="color: #800000;">@media print</span>{
     <span style="color: #008000;">/*</span><span style="color: #008000;">put your styles for printer in here</span><span style="color: #008000;">*/</span>
}

重写文本样式

使用pixel或em单位对于浏览器而言可能很好,但对打印机并不起作用。浏览器会根据自己的解释将其转换成打印的单位:点(pt),不同浏览器解释不一样,所以最好能够设置成针对打印机的样式使用pt作为单位

定义打印背景

1、取消背景元素
使用background:white;可直接将背景设置成白色,并取消图片
2、保留背景元素
3、给打印添加分页符
使用page-break-before和page-break-after属性
page-break-before:always让Web浏览器在一个指定样式之前插入分页符,是某个元素显示在打印页的顶部
page-break-after:always是某一个元素显示在打印页面最后

第17章,改正CSS设计习惯

1、添加注释
2、组织样式和样式表
3、样式命名要清晰
4、根据用途而不是外观命名样式
5、不根据位置命名
6、不使用含义模糊的名称
7、使用多个类可以节省时间
8、将样式分组:把网页上相关部位所采用的样式集中在一起,把用途相关的样式集中在一起
9、用注释分隔样式组
10、使用多个样式表:可以使用@import合并多个样式表,再引入’
11、消除浏览器的样式冲突:即各个浏览器的默认样式不一致,要对样式重置
12、使用派生选择器:尽量减少ID选择器的使用,以及减少类的使用
高级:面向对象的CSS,可登录网站:http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/,还可以在以下网站查看OOCSS项目:https://github.com/stubbornella/oocss,另一种方法称作Scalable and Modular Architecture for CSS(简称SMACSS),这是一种创建可重用CSS组件的简单样式向导。可通过以下网站了解:http://smacss.com
13、给IE尝试不同的CSS
IE条件注释基本结构:
<span style="color: #008000;"><!--</span><span style="color: #008000;">[if IE]>
    /*针对IE的样式*/
<![endif]</span><span style="color: #008000;">--></span>
非IE浏览器会当成HTML注释并忽略
关于IE条件注释更多信息,请登录了解:http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Von Text zu Websites: Die Kraft von HTMLVon Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AM

HTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.

HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchHTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Die Rolle von HTML: Strukturierung von WebinhaltenDie Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

HTML und Code: Ein genauerer Blick auf die TerminologieHTML und Code: Ein genauerer Blick auf die TerminologieApr 10, 2025 am 09:28 AM

HtmlisaspecifictypeofcodeFocusedonstructuringuringwebcontent, während "Code" breitincludesluages ​​-ähnlichjavaScriptandpythonforfunctionality.1) htmldefineswebpageStructureStags.2) "Code" cometesaWiNrangeOfLanguagesForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForfirsInsForfunctionNacts

HTML, CSS und JavaScript: Wesentliche Tools für WebentwicklerHTML, CSS und JavaScript: Wesentliche Tools für WebentwicklerApr 09, 2025 am 12:12 AM

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.

Die Rollen von HTML, CSS und JavaScript: KernverantwortungDie Rollen von HTML, CSS und JavaScript: KernverantwortungApr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Ist HTML für Anfänger leicht zu lernen?Ist HTML für Anfänger leicht zu lernen?Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

Was ist ein Beispiel für ein Start -Tag in HTML?Was ist ein Beispiel für ein Start -Tag in HTML?Apr 06, 2025 am 12:04 AM

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool