ホームページ ウェブフロントエンド htmlチュートリアル div+cssの流動的なフローティングレイアウトlayout_html/css_WEB-ITnose

div+cssの流動的なフローティングレイアウトlayout_html/css_WEB-ITnose

Jun 24, 2016 pm 12:29 PM

FloatLayout3Cols.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>流体浮动布局2</title><link rel="stylesheet" type="text/css" href="Layer2.css" /></head><body>    <div id="header">        <h1>这里是标题</h1>    </div>    <div id="nav">        <ul>            <li>新闻</li>            <li>杂志</li>            <li>游戏</li>            <li>音乐</li>            <li>电影</li>            <li>娱乐</li>        </ul>    </div>    <div id="main">        <p>对于ASP.NET而言,开发人员不可避免的会将ASP.NET与ASP进行比较,因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同,可以说微软重新将ASP进行编写和组织形成ASP.NET技术。 </p>        <p>在传统的ASP开发中,开发人员可以在页面中进行ASP代码的编写,当服务器请求相应的页面时,服务器会解析ASP代码进行页面呈现。ASP具有轻巧等特点,但是随着互联网的发展,ASP也越来越多的呈现出其不足之处,这些不足之处包括ASP代码无法和HTML代码很好的分离,这就造成了页面代码混乱、维护性低等情况。当ASP中出现错误或者需要进行功能的添加,就需要多大部分的页面进行更改,这样就降低了ASP程序的复用性和维护性。</p>        <p>对于ASP.NET而言,开发人员不可避免的会将ASP.NET与ASP进行比较,因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同,可以说微软重新将ASP进行编写和组织形成ASP.NET技术。 </p>        <p>在传统的ASP开发中,开发人员可以在页面中进行ASP代码的编写,当服务器请求相应的页面时,服务器会解析ASP代码进行页面呈现。ASP具有轻巧等特点,但是随着互联网的发展,ASP也越来越多的呈现出其不足之处,这些不足之处包括ASP代码无法和HTML代码很好的分离,这就造成了页面代码混乱、维护性低等情况。当ASP中出现错误或者需要进行功能的添加,就需要多大部分的页面进行更改,这样就降低了ASP程序的复用性和维护性。 </p>        <p>相对于ASP而言,ASP.NET具有更加完善的开发工具。在传统的ASP开发中,可以使用Dreamware、FrontPage等工具进行页面开发。当时使用Dreamware、FrontPage等工具进行ASP应用程序开发时,其效率并不能提升,并且这些工具对ASP应用程序的开发和运行也不会带来性能提升。 </p>        <p>相比之下,对于ASP.NET应用程序而言,微软开发了Visual Studio开发环境提供给开发人员进行高效的开发,开发人员还能够使用现有的ASP.NET控件进行高效的应用程序开发,这些控件包括日历控件、分页控件、数据源控件和数据绑定控件。开发人员能够在Visual Studio开发环境中拖动相应的控件到页面中实现复杂的应用程序编写。 </p>    </div>    <div id="navr">        <ul>            <li>新闻</li>            <li>杂志</li>            <li>游戏</li>            <li>音乐</li>            <li>电影</li>            <li>娱乐</li>        </ul>    </div>    <div id="footer">        <p>版权所有,翻版必究</p>    </div></body></html>
ログイン後にコピー

style.css

/* CSS Document */*{    margin:0;    padding:0;}body{    margin:10px;}#header{    border:1px solid black;    height:80px;    line-height:80px;    margin-bottom:10px;    background:gray;}#header h1{    font-size:20px;    text-align:center;    height:100%;}#nav{    border:1px solid black;    height:400px;    width:20%;    float:left;    margin-bottom:10px;    background:blue;}#nav ul{    text-align:center;    list-style-type:none;}#main{    border:1px solid black;    height:400px;    width:58%;    float:left;    margin-bottom:10px;    margin-left:0.8%;}#main p{    font-size:14px;    word-spacing:2px;    line-height:150%;    text-indent:30px;}#navr{    border:1px solid black;    height:400px;    width:20%;    float:right;    margin-bottom:10px;    background:blue;}#navr ul{    text-align:center;    list-style-type:none;}#footer{    border:1px solid black;    height:80px;    clear:both;    background:silver;    line-height:80px;}#footer p{    text-align:center;    height:100%;}
ログイン後にコピー

このレイアウトの欠点は、ブラウザ ウィンドウのサイズを変更すると、コンテンツが表示されなくなることです。流れdiv は醜く見えます。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

WebアノテーションにY軸位置の適応レイアウトを実装する方法は? WebアノテーションにY軸位置の適応レイアウトを実装する方法は? Apr 04, 2025 pm 11:30 PM

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? Apr 05, 2025 am 06:15 AM

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

See all articles