Rumah hujung hadapan web html tutorial HTML布局_html/css_WEB-ITnose

HTML布局_html/css_WEB-ITnose

Jun 24, 2016 am 11:18 AM
susun atur html

一、使用

元素布局

1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <div id="container">        <div id="heading">头部</div>        <div id="content_menu">内容菜单</div>        <div id="content_body">内容主体</div>        <div id="footing">底部</div>    </div></body></html>

Salin selepas log masuk


二、使用

元素布局

1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>table布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <table width="100%" height="950px" style="background-color: darkgray">        <tr>            <td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td>        </tr>        <tr>            <td width="30%" height="80%" style="background-color:blue">左菜单</td>            <td width="70%" height="80%" style="background-color:blueviolet">主体</td>        </tr>        <tr>            <td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td>        </tr>    </table></body></html>

Salin selepas log masuk



Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan susun atur topeng skrin penuh menggunakan HTML dan CSS Bagaimana untuk melaksanakan susun atur topeng skrin penuh menggunakan HTML dan CSS Oct 20, 2023 pm 03:46 PM

Bagaimana untuk melaksanakan susun atur topeng skrin penuh menggunakan HTML dan CSS

Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS Oct 16, 2023 am 09:07 AM

Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS

Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur Oct 27, 2023 pm 03:24 PM

Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur

Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS Oct 18, 2023 am 08:42 AM

Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS

Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS Oct 20, 2023 am 09:54 AM

Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS

Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS Oct 25, 2023 am 10:42 AM

Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS

Kemahiran susun atur HTML: Cara menggunakan susun atur kedudukan untuk mengawal kedudukan mutlak halaman Kemahiran susun atur HTML: Cara menggunakan susun atur kedudukan untuk mengawal kedudukan mutlak halaman Oct 19, 2023 am 08:40 AM

Kemahiran susun atur HTML: Cara menggunakan susun atur kedudukan untuk mengawal kedudukan mutlak halaman

Cara membuat reka letak pemain muzik responsif menggunakan HTML dan CSS Cara membuat reka letak pemain muzik responsif menggunakan HTML dan CSS Oct 19, 2023 am 10:02 AM

Cara membuat reka letak pemain muzik responsif menggunakan HTML dan CSS

See all articles