Css+Div布局学习(一)?Div布局基础_html/css_WEB-ITnose
上一个系列(Css基础学习?索引)我们介绍了Css的基础属性和使用,我们从现在开始讲解Css+Div布局的一些内容。大家准备好,我们要开始布局之旅了。如果你对Css还不是很熟悉的话,可以去看看我前面的几篇文章。
如果我们要进行Css的布局,那float(浮动)就是最为关键的一个属性了。浮动可以使你的块元素不遵守元素流的布局特性,如果不采用浮动,元素将一个接一个地往下排列。float属性有三个值:left、right和none,后面我们就会使用这些值的。我们将使用事例来说明布局的特性。
我们做一个html文件,为后面的讲解准备一下:
这样的html使用浏览器打开一定是就几个字符把,我们先加一些简单的Css来标记,这样可以更加清楚地看到页面的布局。
body { padding:10px; margin:10px; } div { border:1px solid #000; background-color:#CCC; height:20px; padding:10px; text-align:Center; } #Masthead { margin-bottom:10px; background-color:#CCCCCC; } #Sidebar_a { margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { margin-bottom:10px; background-color:#33ff33; } #Content { margin-bottom:10px; background-color:#ff3366; } #Footer { background-color:#ffff00; }
我们给每一个Div加上了一个边框,并给每一个Div使用上背景颜色,方便标志。
Masthead
Sidebar_a
Sidebar_b
Content
Footer
上面5个Div,分别代表了网页模板里面最常见的表头、表尾、两个边栏和中间的内容。现在还没有添加更多的Css,所以还只是5个从上到下的Div而已。我们先分析一下,首先表头Masthead和表尾Footer两部分已经基本符合要求了,不会需要做更多的改变,那就是中间的两个边栏Sidebar和内容Content需要从左往右排列,我们先看看完成的Css和布局的样子:
Masthead
Sidebar_a
Sidebar_b
Content
Footer
#Masthead { background-color:#CCCCCC; margin-bottom:10px; } #Sidebar_a { float:left; width:25%; margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { float:right; width:25%; margin-bottom:10px; background-color:#33ff33; } #Content { margin-bottom:10px; height:150px; background-color:#ff3366; } #Footer { clear:both; background-color:#ffff00; }
首先说明一下,所有的html没有作任何修改,只是添加了一些Css。
比较前面和后面的Css,Masthead和Content里面的内容没有什么改变,Content里面的height:150px;只是为了说明内容较多情况下会是怎么样的情况。关键就是Sidebar_a内的float:left;和Sidebar_b内的float:right;。正是这两个属性使我们的布局顺利完成了。大家还可以自己尝试一下,把Sidebar_a和Sidebar_b内的属性换一下,两个边栏的位置就对换了,这个正体现了Div+Css布局的灵活性。
Masthead
Sidebar_a
Sidebar_b
Content
Footer
我们别忘记了在表尾Footer内有clear:both;属性,这个属性又是做什么的呢?浮动使用了以后会对后面的元素造成影响,所以要清理掉。
注意:上面的Html里面的五个Div不能顺便的变换位置,不然就不能正常地显示。特别是Content要在两个边栏的后面。
上面只是简单地说明了Div的布局,大家要熟练使用还是自己多多练习了。

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



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.

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.

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

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

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...

Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...

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