网页排版求帮助_html/css_WEB-ITnose
我想做一个简单的小网站。想自己去写这个网站的模板，但是用css对网页元素进行布局的时候，发]现很难去控制。
图片是这个主页的样子。
导航条的位置怎么去控制。
。
这是我做出来的，差距很大。
怎么可以让导航的宽度和父类的一样。第二怎么让每一个平均去分配这个宽度。
这是我的代码。
nbsp;html>
@charset "utf-8";
body {
}
#wrapper {
background-color: #20455A;
width: 100%;
min-width: 740px;
max-width: 1306px;
margin-left: auto;
margin-right: auto;
left: 5%;
right: 5%;
}
header {
background-color: #6CEBE5;
margin-right: auto;
margin-left: auto;
width: 100%;
float: left;
}
#footer ul {
background-color: #6CEBE5;
text-decoration: none;
list-style-type: none;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 1306px;
}
#footer li {
width: 33%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
text-decoration: none;
float: left;
background-color: #6CEBE5;
}
#mainnav li {
width: 20%;
float: left;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
text-decoration: none;
background-color: #43A6CB;
}
A:visited {
color: #FF944C;
}
a:hover, a:active, a:focus {
background-color: #7F3300;
text-decoration: underline;
}
#mainnav a {
display: block;
float: left;
text-align: center;
background-color: #4d4d4d;
color: #F1EBEB;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
margin-right: auto;
margin-left: auto;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: auto;
margin-left: 0px;
}
#mainnav {
width: 1306px;
margin-right: auto;
margin-left: auto;
float: left;
background-position: left 0%;
}
回复讨论(解决方案)
导航用table不就行了
table宽度设100% 自动就平分了
具体点！新手
<!doctype html> <html> <head> <meta charset="utf-8"> <title>communityAdvance</title> <link href="styles/main.css" rel="stylesheet" type="text/css"> <style type="text/css"> body {}#wrapper {background-color: #20455A;width: 100%;min-width: 740px;max-width: 1306px;margin-left: auto;margin-right: auto;left: 5%;right: 5%;}header {background-color: #6CEBE5;margin-right: auto;margin-left: auto;width: 100%;float: left;}#footer ul {background-color: #6CEBE5;text-decoration: none;list-style-type: none;margin-right: auto;margin-left: auto;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;width: 1306px;}#footer li {width: 33%;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;text-align: center;text-decoration: none;float: left;background-color: #6CEBE5;}#mainnav li {width: 20%;float: left;}a {font-weight: bold;text-decoration: none;}a:link {color: #FF6600;}#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {text-decoration: none;background-color: #43A6CB;}A:visited {color: #FF944C;}a:hover, a:active, a:focus {background-color: #7F3300;text-decoration: underline;}#mainnav a {display: block;float: left;text-align: center;background-color: #4d4d4d;color: #F1EBEB;text-transform: uppercase;padding-top: 6px;padding-bottom: 6px;margin-right: auto;margin-left: auto;}#mainnav ul {list-style-type: none;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;margin-right: auto;margin-left: 0px;}#mainnav {width: 1306px;margin-right: auto;margin-left: auto;float: left;background-position: left 0%;} </style> </head> <body> <div id="wrapper"> <div id ="head"> <header id="top"> <img src="/static/imghw/default1.png" data-src="LogoUse.png" class="lazy" style="max-width:90%" style="max-width:90%" alt=""/> <nav id="mainnav"> <!-- <ul> <li><a href="CommunityAdvance.html">home</a></li> <li><a href="Untitled-4.html">about us</a></li> <li><a href="#">programs</a></li> <li><a href="#">volunteer/job</a></li> <li><a href="#">special events</a></li> <li><a href="#">give/donate</a></li> </ul>--> <table style="width:100%;text-align:center;"> <tr> <td style="border-right:1px solid red;">home</td> <!--线出来了 后面效果自己慢慢调吧--> <td>about us</td> <td>>programs</td> <td>volunteer/job</td> <td>special events</td> <td>give/donate</td> </tr> </table> </nav> </header> </div> <div id="main">Content for id "main" Goes Here</div> <div id="footer"> <ul> <li><a href="www.google.com">Office hours</a></li> <li><a href="www.google.com">Location</a></li> <li><a href="www.google.com">Contact us</a></li> </ul> </div> </div> </body> </html> CSS能控制网页上的任何HTML元素，你却说很难控制。。。。。。
那是因为你的表格td宽度还是用的别人的宽度，而你的td却增加了一个，所以掉下去了
太感谢了各位。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Bagaimana untuk menghantar halaman web ke desktop sebagai pintasan dalam pelayar Edge?
Mar 14, 2024 pm 05:22 PM
Bagaimana untuk menghantar halaman web ke desktop sebagai pintasan dalam pelayar Edge? Ramai pengguna kami ingin memaparkan halaman web yang kerap digunakan pada desktop sebagai pintasan untuk kemudahan membuka terus halaman akses, tetapi mereka tidak tahu bagaimana untuk melakukannya Sebagai tindak balas kepada masalah ini, editor isu ini akan berkongsi penyelesaian dengan majoriti pengguna , mari kita lihat kandungan yang dikongsi dalam tutorial perisian hari ini. Kaedah pintasan menghantar halaman web ke desktop dalam pelayar Edge: 1. Buka perisian dan klik butang "..." pada halaman. 2. Pilih "Pasang tapak ini sebagai aplikasi" dalam "Aplikasi" dalam pilihan menu lungsur. 3. Akhir sekali, klik pada tetingkap pop timbul
Membangunkan sistem pengundian web menggunakan JavaScript
Aug 09, 2023 pm 01:30 PM
Menggunakan JavaScript untuk membangunkan sistem pengundian web Abstrak: Dengan perkembangan pesat Internet, pengundian dalam talian telah menjadi cara yang mudah dan pantas untuk mengumpul pendapat umum dan membuat keputusan. Artikel ini akan memperkenalkan penggunaan JavaScript untuk membangunkan sistem pengundian web yang mudah, yang membolehkan pengguna memilih pilihan dan menyerahkan undian. Pengenalan: Sistem pengundian web ialah program yang memaparkan berbilang pilihan pada halaman web dan membolehkan pengguna memilih. Ia boleh digunakan dalam banyak senario, seperti pengundian pilihan raya, tinjauan produk, pengumpulan pendapat, dsb. Artikel ini
Apa yang perlu dilakukan jika halaman web tidak boleh diakses
Sep 06, 2023 am 09:36 AM
Penyelesaian kepada halaman web yang tidak boleh diakses termasuk menyemak sambungan rangkaian, mengosongkan cache penyemak imbas, menyemak alamat halaman web, cuba menggunakan penyemak imbas lain, menyemak status pelayan, menyemak resolusi nama domain, menyemak tembok api dan tetapan keselamatan, dan menghubungi tapak web pentadbir. Pengenalan terperinci: 1. Periksa sambungan rangkaian untuk memastikan bahawa sambungan rangkaian adalah normal Anda boleh cuba membuka halaman web lain atau menggunakan peranti lain untuk mengakses untuk menentukan sama ada ia adalah masalah sambungan rangkaian Jika halaman web lain boleh diakses secara normal , ia mungkin menjadi masalah dengan halaman web 2. Kosongkan cache penyemak imbas Cache penyemak imbas boleh menyebabkan halaman web gagal dimuatkan, dsb.
Bagaimana untuk menyediakan muat semula automatik halaman web
Oct 26, 2023 am 10:52 AM
Untuk menetapkan muat semula automatik halaman web, anda boleh menggunakan teg "meta" HTML, fungsi "setTimeout" JavaScript, fungsi "setInterval" atau pengepala "Refresh" HTTP. Pengenalan terperinci: 1. Gunakan teg "meta" HTML Dalam teg "<head>" dokumen HTML, anda boleh menggunakan teg "meta" untuk menetapkan penyegaran automatik halaman web "fungsi JavaScript, dsb.
Apakah yang perlu saya lakukan jika imej pada halaman web tidak boleh dimuatkan? 6 penyelesaian
Mar 15, 2024 am 10:30 AM
Beberapa netizen mendapati bahawa apabila mereka membuka halaman web pelayar, gambar di halaman web itu tidak dapat dimuatkan untuk masa yang lama. Saya menyemak bahawa rangkaian adalah normal, jadi apakah masalahnya? Editor di bawah akan memperkenalkan kepada anda enam penyelesaian kepada masalah bahawa imej halaman web tidak boleh dimuatkan. Imej halaman web tidak boleh dimuatkan: 1. Masalah kelajuan Internet Halaman web tidak dapat memaparkan imej Ia mungkin kerana kelajuan Internet komputer agak perlahan dan terdapat lebih banyak perisian yang dibuka pada komputer Dan imej yang kami akses adalah agak besar mungkin disebabkan oleh tamat masa pemuatan Akibatnya, gambar tidak dapat dipaparkan Anda boleh mematikan perisian yang mengambil kelajuan rangkaian dan menyemaknya dalam pengurus tugas. 2. Terlalu ramai pelawat Jika halaman web tidak dapat memaparkan gambar, mungkin kerana halaman web yang kami lawati telah dilawati pada masa yang sama.
Kemungkinan sebab sambungan rangkaian adalah normal tetapi penyemak imbas tidak boleh mengakses halaman web
Feb 19, 2024 pm 03:45 PM
Penyemak imbas tidak boleh membuka halaman web tetapi rangkaian adalah normal Terdapat banyak sebab yang mungkin. Apabila masalah ini berlaku, kita perlu menyiasat langkah demi langkah untuk menentukan punca tertentu dan menyelesaikan masalah tersebut. Mula-mula, tentukan sama ada halaman web tidak boleh dibuka terhad kepada penyemak imbas tertentu atau sama ada semua penyemak imbas tidak boleh membuka halaman web. Jika hanya satu penyemak imbas tidak boleh membuka halaman web, anda boleh cuba menggunakan penyemak imbas lain, seperti Google Chrome, Firefox, dll., untuk ujian. Jika penyemak imbas lain dapat membuka halaman dengan betul, kemungkinan besar masalahnya adalah dengan penyemak imbas khusus itu, mungkin
Apakah kemahiran pengendalian untuk penetapan taip cemerlang?
Mar 20, 2024 pm 05:01 PM
Untuk mencapai kesan visual bagi keseluruhan dokumen, kedua-dua fail word dan excel perlu ditaip Walau bagaimanapun, ramai rakan pemula tidak tahu bagaimana untuk melakukan penyusunan huruf kecemerlangan di bawah, kami akan berkongsi beberapa kemahiran operasi penyusunan huruf, dengan harapan dapat memberi anda beberapa Inspirasi tentang kemahiran operasi! 1. Pertama, kami mencipta dan membuka borang excel dan memasukkan beberapa kandungan mudah untuk memudahkan operasi demonstrasi. 2. Kami mencari menu fungsi pratonton cetakan dalam bar menu di atas fail. 3. Klik fungsi pratonton cetakan, dan kami dapati jadual tidak simetri apabila ia bukan set taip. Kita perlu mencari fungsi persediaan halaman dalam bar menu di atas dokumen. 4. Klik Tetapan Halaman dan cari fungsi margin dalam menu fungsi yang terbuka. 5. Klik
Perkara yang perlu dilakukan jika halaman web tidak boleh dibuka
Feb 21, 2024 am 10:24 AM
Bagaimana untuk menyelesaikan masalah laman web tidak dibuka Dengan perkembangan pesat Internet, orang ramai semakin bergantung kepada Internet untuk mendapatkan maklumat, berkomunikasi dan berhibur. Walau bagaimanapun, kadangkala kami menghadapi masalah bahawa halaman web tidak boleh dibuka, yang membawa banyak masalah kepada kami. Artikel ini akan memperkenalkan anda kepada beberapa kaedah biasa untuk membantu menyelesaikan masalah halaman web tidak dibuka. Pertama, kita perlu menentukan mengapa halaman web tidak boleh dibuka. Sebab yang mungkin termasuk masalah rangkaian, masalah pelayan, masalah tetapan penyemak imbas, dsb. Berikut ialah beberapa penyelesaian: Semak sambungan rangkaian: Pertama, kita perlukan
