出处:蓝色理想 责任编辑:moby
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:
1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
2、内容部分又可分为侧边栏、主体内容;
3、底部,包括一些版权信息。
有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
DIV结构如下:
│body {} /*这是一个HTML元素,具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
无标题文档 title >
head >
body >
html >
这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
下面,我们在
标签对中写入DIV的基本结构,代码如下:
今後、コードを読みやすくするために、css.css ファイルを開いて CSS 情報を記述します。
/* 基本情報*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*ページレイヤーコンテナ*/
#container {width:100%}
/* ページヘッダー*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*ページボディ*/
#PageBody {width: 800px;margin:0 auto;height: 400px;background:#CCFF00}
/*ページの下部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
上記のファイルを保存し、ブラウザで開くと、これがページの基本構造を確認できます。
上記の CSS に関する説明 (詳細については、オンラインでダウンロードできる CSS2.0 の中国語マニュアルを参照してください):
1. コメントの習慣を身につけてください。これは非常に重要です。
2.ページ上のすべてのコンテンツはこのタグ ペア内に記述する必要があります。これ以上は説明しません。
ここでは略語が使用されています。コードは次のようになります。 font-size:12px; フォント サイズが 12 ピクセルで、フォントが Tahoma 形式であることを示します。完全なバージョンは次のようになります。
margin-top :0px;margin-right:0px;margin-bottom:0px;margin-left:0px
margin:0px 0px 0px 0px
上記のスタイルは、ボディ部分の上下左右の余白が0ピクセルであることを示します
以下のようなものもあります。書き込みメソッド:
上下のマージンが 0px であることを示し、左右は自動的に調整されます
将来使用するパディング属性はマージンと多くの類似点があります。 ,
text-align:center
テキストの配置は左、右、中央に設定できます。ここでは中央揃えに設定します。
background:#FFF
background は、指定したレイヤーを背景色と背景画像で埋めるために使用できます。将来的には次の形式を使用します。
background:#ccc url('bg.gif') 左上 no-repeat; を意味します。 #CCC (グレースケール カラー) はレイヤー全体を塗りつぶし、背景画像として bg.gif を使用します。
は画像が現在のレイヤーの左上端に配置されることを意味し、no-repeat は画像のみを意味します。レイヤー全体を塗りつぶさずにサイズが表示されます。
top/right/bottom/left/center
は、背景画像を配置するために使用されます。つまり、それぞれ、top/right/bottom/left/center を使用することもできます。
background:url('bg.gif') 20px 100px;
は X シートを意味します。マークは 20 ピクセル、Y 座標は 100 ピクセルの正確な位置決めです。
repeat/no-repeat/repeat-x/repeat-y
はそれぞれ、レイヤー全体を塗りつぶす/塗りつぶさない/X に沿って塗りつぶすことを意味します。 Y 軸に沿った軸/塗りつぶし。
height / width / color
はそれぞれ高さ (px)、幅 (px)、フォントの色 (HTML カラー システム テーブル) を表します。
4. ページを中央に配置するにはどうすればよいですか?
これは、 #container で次の属性を使用したためです:
margin:0 auto;
ページを左側に表示したい場合は、デフォルトで左側に表示されるため、自動値をキャンセルしてください。
margin:auto を使用すると、レイヤーを自動的に中央に簡単に配置できます。
5. ここでは一般的に使用される CSS プロパティのみを紹介します。その他については、CSS2.0 の中国語マニュアルを参照してください。
ページの大まかな DIV 構造を記述したら、各部分の詳細な作成を開始できます。
前の章では、いくつかのスタイルを作成しました。これらのスタイルは、css.css 内のすべてのスタイルをクリアし、次のスタイル コードを再作成しました:
/* 基本情報*/
ボディ { フォント: 12px マージン: 0px; テキスト整列: 背景: #FFF; }a: リンク、a: 訪問済み { フォントサイズ: 12px; } :hover {}
/* ページレイヤーコンテナ*/
#container { width : 800px ; margin : 10px auto }
スタイルの説明:
a:link,a:visited {font -size:12px; text-decoration:none;}
a:hover {}
これらの 2 つの項目は、ページ内のハイパーリンクのスタイルを制御します。詳細については説明しません。
#container {幅:800px;マージン:10px 自動}
ページ全体の表示領域を指定します。
width:800px は幅を 800 ピクセルに指定し、実際のニーズに応じてここで設定します。
margin:10px auto、ページの上下の余白は 10 ピクセルで、ページは中央揃えになります。
前の章で説明したように、レイヤーのマージン属性の左右のマージンを自動に設定すると、レイヤーを中央に配置できます。
次に、TOP 部分の作成を開始します。TOP 部分には、ロゴ、メニュー、バナーが含まれています。以下は、FW で完成したスライスです。 TOP 部分は 2 つの部分に分かれており、最初の部分にはロゴと水平線が含まれます。ロゴ画像にはあまり多くの色がないため、この部分を GIF 形式で保存しました。パレットの選択は正確で、アルファ透明度が選択され、カラー バージョンは白 (ここの色は背景色と同じである必要があります) でした。ロゴ .gif としてエクスポートされ、画像の幅は 800 ピクセルです。
この時点で、何人かの友人が、 * なぜ GIF 形式を使用するのですか? JPEGを使ったほうがいいんじゃないでしょうか?
GIF 形式の画像ファイルは小さいため、ページの読み込みが速くなります。もちろん、GIF 形式を使用する場合は、画像に多くの色が使用されていないことを確認する必要があります。肉眼ではどの程度変化するかは写真では確認できないため、これは可能です。* 次のバナー部分でも GIF 形式を使用できますか?
答えはノーです。バナー部分は詳細な画像なので、GIF形式を使用すると色が失われすぎるため、JPEG形式を使用してファイルをbanner.jpgとしてエクスポートする必要があります。
スライスを切り取った後、TOP 部分を分析し、ヘッダーに DIV 構造を書き込む必要があります。 コードは次のとおりです。メニューのフォームは後で簡単にカスタマイズできます。
そして、なぜ次のコードを追加する必要があるのでしょうか?
このコードを挿入すると、プレビューでの縦線の分離など、メニュー オプション間にいくつかの分離スタイルを簡単に挿入できます。
次に、css.css に次のスタイルを記述します:
/* Page header*/
#header { background : url(logo.gif) no-repeat }
スタイルの説明:
#header {background:url(logo.gif) no-repeat}
背景画像のロゴをページヘッダーに埋めずに追加します。
ここでは、ヘッダー層の高さを指定しませんでしたが、なぜそれを指定しないのでしょうか?
ヘッダーレイヤーにはメニュー項目とバナー項目があるため、レイヤーの高さは一時的に不明ですが、レイヤーのプロパティによりコンテンツに基づいてレイヤーが自動的に調整されるため、高さを指定する必要はありません。
list
このセクションを開始する前に、前のセクションを参照して、index.htm および css.css ファイルに DIV と CSS が書き込まれていることを確認してください。
このセクションでは、list
li > a href ="#" > "menuDiv" > li >
/ a >/ li > li > > / a li > ;
/a >/li > >について
この部分の 2 つの HTML 要素
HTML で id="divID" として定義されている場合、HTML で class="divID" として定義されている場合、CSS での対応する設定構文は #divID{} になります。 、CSS の対応する設定構文は .divID です。
如果id="divID"这个层中包括了一个,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。
另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。
按照上面的介绍,我们先在css.css中写入以下代码:
#menu ul { list-style : none ; margin : 0px ; }
#menu ul li { float : left ; }
解释一下:
#menu ul {list-style:none;margin:0px;}
list-style:none,这一句是取消列表前点,因为我们不需要这些点。
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。
到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:
这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}
margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:
现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下:
#menu { padding : 20px 20px 0 0 }
/* 利用padding:20px 20px 0 0来固定菜单位置 */
#menu ul { float : right ; list-style : none ; margin : 0px ; }
/* 添加了float:right使得菜单位于页面右侧 */
#menu ul li { float : left ; margin : 0 10px }
这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?
别忘了,我们早就已经留好了一个空的
按照上面说的方法,我们再添加以下代码:
.menuDiv {width:1px;height:28px;background:#999}
保存预览一下,竖线是否已经出来了?关于这段代码就不多讲了,应该是很容易理解的。
不过,菜单选项的文字却在顶部,我们再修改成以下代码:
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
关于display:block;line-height:28px大家可以去参阅一下手册,我就不多讲了。
效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码:
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
这一节到这里就完毕了,顺便把素材提供给大家:
构思图:点击下载
HTML和CSS源文件:点击下载
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。
首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在
大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。
<div id="banner"></div>
以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:
#banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/}
通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。
另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。
<div id="pagebody"><!--页面主体--> <div id="sidebar"><!--侧边栏--> </div> <div id="mainbody"><!--主体内容--> </div></div>
以上是页面主体部分,我们在css.css中添加以下样式:
#pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/}#sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/}#mainbody { width:570px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden}
为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:
border:1px solid #E00;height:200px
保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。
而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。
CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ホットトピック









