ホームページ > 記事 > ウェブフロントエンド > div+css Webページレイアウトデザインの新たな始まり(1)
div+css Webページレイアウトデザインの新たな始まり(1)
- 黄舟オリジナル
- 2016-12-29 14:11:021217ブラウズ
DIV+CSS は、Web サイト標準 (または「WEB 標準」) で一般的に使用される用語の 1 つです。この Web ページ レイアウト方法は、従来の HTML Web デザイン言語のテーブルとは異なります。 (テーブル) ポジショニング方法により、Web ページのコンテンツとパフォーマンスの分離を実現できます。 XHTML は、Extensible HyperText Markup Language の略称です。 XHTML は、HTML に基づいて最適化および改良された新しい言語である Extensible Markup Language (XML) に基づいています。その目的は、XML アプリケーションと強力なデータ変換機能に基づく将来のネットワーク アプリケーションのさらなるニーズに適応することです。 XHTML Web サイトのデザイン標準では、テーブル位置決め技術は使用されなくなりましたが、DIV+CSS を使用してさまざまな位置決めを実現します。
以前はテーブルレイアウトでした。 。基本的には使用されなくなりました（テーブルはデータを表示するためにのみ使用されます）
div は中国語でエリアを意味し、css はカスケード スタイル シートを意味します。コアはスタイルではなくレイアウトであることがわかります
DIV+CSS を学ぶ前に、 HTML に精通している必要があります。DIV+CSS は HTML に基づいて学習する必要があります
さて、現在どのようなツールを使用していますか? 通常はメモ帳を使用できます。つまり、メモ帳 + ブラウザは必要ありません。 Dreamweaver サーバーを使用することもできます。CS5 も使用できます。これにはヒントがあります。最良のヘルプ ドキュメントは CSS スタイル シート マニュアルの中国語版で、すべてを一緒に行うことができます
上記のものはオンラインで簡単に見つけることができます。グループ Web プログラミング開発でもダウンロードできます: 197132320。もちろん、Web 愛好家も大歓迎です。プログラミング友達に参加して
から学習を始めてください。まず、HTML の基本構造を理解し、HTML ファイル test.html を作成します。
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
もちろん、html ファイルに直接 hello を入力しても正常に表示できますが、これでは規格を満たしません div を知ろう 実は、これはコンテナまたはボックスとみなすことができます。コンテンツを保持するために特別に使用されます
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>
しかし、この div はまだ透明なので、Web ページでは見ることができません まず、表示するスタイルを与える必要があります。まず、幅と高さ 100 ピクセル、背景を表示させます。 color red
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>
すべてのHTMLタグにはstyle属性があり、divももちろん例外ではありませんborder:solid 1px borderはCSSのborder属性を表しますsolid 1pxはその2つの値です。solidはボーダーであることを意味します。 1px は境界線の幅が 1 ピクセルであることを意味します。
ピクセルとは? ここを参照してください。 http://baike.baidu.com/view/575.htm ;height:100px;各属性の値に注意してください: 属性を区切るには;
background:red を使用します
上記のコードはブラウザに次のように表示されます
サイドバー
CSS ホーム ページ > Web プログラミング > CSS >
div は中国語でエリアを意味し、css はカスケード スタイル シートを意味します。コアはスタイルではなくレイアウトであることがわかります
DIV+CSS を学ぶ前に、 HTML に精通している必要があります。DIV+CSS は HTML に基づいて学習する必要があります
さて、現在どのツールを使用していますか? 通常、メモ帳で十分です。つまり、メモ帳 + ブラウザで十分です。サーバーは必要ありません。 Dreamweaver を使用することもできます。これにはヒントがあります。最高のヘルプ ドキュメントは中国語版の CSS スタイル シート マニュアルで、すべてを一緒に行うことができます
上記のものはオンラインで簡単に見つけることができます。 Web プログラミング開発グループでダウンロードしてください: 197132320。もちろん、Web 愛好家も大歓迎です。プログラミング友達に参加して
から学習を始めてください。まず、HTML の基本構造を理解し、HTML ファイル test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>を作成します。
もちろん、htmlファイルに直接helloを入力しても正常に表示できますが、これでは規格を満たしません
divを知ろう 実は、コンテナまたはボックスとみなすことができます。コンテンツを保持するために特別に使用されます
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>しかし、この div はまだ透明なので、Web ページでは見ることができません
まず、表示するスタイルを与える必要があります。まず、幅と高さ 100 ピクセルの境界線を表示させます。 、背景色は赤です
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>
每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素 看这里http://baike.baidu.com/view/575.htm
width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色
如上代码在浏览器显示如下
还得提一下，浏览器最好用IE8 谷歌浏览器，火狐浏览器，360的也可以
因为他们支持css标准还算兼容，别的浏览器就说不准了，你看的结果可能不一样
css浏览器兼容日后再说
引入css样式除了上面一种，还有两种
一种是外部样式引入，特别推荐这种，一种是内部样式
外部样式引入需要在head标签里加
另外还的在html文件相同目录下创建mystyle.css文件
内部样式是直接在head写入，由于贴子特殊性，本贴全部用内部样式，这样看的舒服点，但在实际中最好用外部样式引入
这是内部样式
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>这比之前要规范多了，body里也看的简单多了，要多多用这种样式与内容分离模式
如果是这种
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>两种样式你觉得它会采用哪个？
style属性这种是内联样式
这就是优先级问题，它会采用离它最近的那个，也就是style属性里的
同样，如果外部样式与内部样式相同，它会优先采用内部样式的
如果不是全部都相同，它会把不同的合并起来，相同的就优先采用内部样式的
优先级
内联》内部》外部
以上就是div+css网页布局设计新开端（1）的内容，更多相关内容请关注PHP中文网（www.php.cn）！