网页排版求帮助_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却增加了一个，所以掉下去了
太感谢了各位。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？
Mar 14, 2024 pm 05:22 PM
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？我們很多用戶為了方便直接打開訪問頁面，想要將經常使用的網頁以快捷方式的形式顯示在桌面，但是不知道應該如何操作，針對這個問題，本期小編就來和廣大用戶們分享解決方法，一起來看看今日軟體教學分享的內容。 Edge瀏覽器將網頁傳送到桌面捷徑方法： 1、開啟軟體，點選頁面中的「...」按鈕。 2、在下拉式選單選項中選擇「應用」中的「將此網站作為應用程式安裝」。 3、最後在彈出的視窗中將其
使用JavaScript開發網頁投票系統
Aug 09, 2023 pm 01:30 PM
使用JavaScript開發網頁投票系統摘要：隨著互聯網的飛速發展，網上投票成為了一種方便快捷的方式，用於收集公眾的意見和做出決策。本文將介紹使用JavaScript開發一個簡單的網頁投票系統，實作了使用者可以選擇選項並提交投票的功能。介紹:網頁投票系統是一個在網頁上顯示多個選項並允許使用者選擇的程式。它可以用於許多場景，例如選舉投票、產品調查、意見收集等。本文
網頁圖片載入不出來怎麼辦？ 6種解決辦法
Mar 15, 2024 am 10:30 AM
有網友發現打開瀏覽器網頁，網頁上的圖片遲遲加載不出來，是怎麼回事？檢查過網路是正常的，那是哪裡出現了問題呢？下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來： 1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢，電腦中開啟的軟體比較多， 而我們造訪的圖片比較大，這就可能因為載入逾時，導致圖片顯示不出來， 可以將比較佔網速的軟體將關掉，可以去任務管理器查看一下。 2、造訪人數過多 網頁顯示不出圖片還有可能是因為我們造訪的網頁，在同時段造訪的
網頁自動刷新設定方法
Oct 26, 2023 am 10:52 AM
設定網頁的自動刷新可以使用HTML的「meta」標籤、JavaScript的「setTimeout」函數、「setInterval」函數或HTTP的」Refresh「頭。詳細介紹：1、使用HTML的「meta」標籤，在HTML文件的「<head>」標籤中，可以使用「meta」標籤來設定網頁的自動刷新；2、JavaScript的「setTimeout」函數等等。
網頁無法存取怎麼辦
Sep 06, 2023 am 09:36 AM
網頁無法存取的解決方案有檢查網路連線、清除瀏覽器快取、檢查網頁位址、嘗試使用其他瀏覽器、檢查伺服器狀態、檢查網域解析、檢查防火牆和安全設定和聯絡網站管理員等。詳細介紹：1、檢查網絡連接，確保網絡連接正常，可以嘗試打開其他網頁或使用其他設備進行訪問，確定是否是網絡連接問題，如果其他網頁可以正常訪問，那麼可能是該網頁的問題；2、清除瀏覽器緩存，瀏覽器快取可能導致網頁無法載入等等。
網路連線正常但瀏覽器無法存取網頁可能原因
Feb 19, 2024 pm 03:45 PM
瀏覽器打不開網頁但是網路正常，可能的原因是多種多樣的。當問題出現時，我們需要逐步排查，才能確定具體的原因並解決問題。首先，確定網頁打不開的現像是侷限於某個特定的瀏覽器或所有瀏覽器都無法開啟網頁。如果只有一個瀏覽器無法開啟網頁，可以嘗試使用其他瀏覽器，如Google瀏覽器、火狐瀏覽器等進行測試。如果其他瀏覽器能夠正常開啟網頁，那麼問題很可能出在該特定瀏覽器上，可能
php怎麼在網頁打開
Mar 22, 2024 pm 03:20 PM
在網頁中執行 PHP 程式碼需要確保 Web 伺服器支援並已正確配置 PHP。可以透過三種方式開啟 PHP： * **伺服器環境：**將 PHP 檔案放置在伺服器根目錄並透過瀏覽器存取。 * **整合開發環境：**將 PHP 檔案放置在指定 Web 根目錄並透過瀏覽器存取。 * **遠端伺服器：**透過伺服器提供的 URL 位址存取託管在遠端伺服器上的 PHP 檔案。
excel排版有哪些操作技巧
Mar 20, 2024 pm 05:01 PM
為了整個文件的視覺效果，無論是word還是excel文件都是需要進行排版處理的，但是，很多新手小伙伴並不知道excel排版如何進行，下邊，我們就分享一些排版操作技巧，希望能夠給你一些操作技巧上的啟發！ 1.首先，我們新建並開啟一個excel表格，輸入一些簡單的內容，以便於示範操作。 2、我們在文件上方選單列中找到列印預覽功能選單。 3.點擊列印預覽功能，我們發現表格沒有進行排版的時候是左右不對稱的。我們需要在文件上方的選單列中找到頁面設定功能。 4.點選頁面設置，在開啟的功能選單中找到頁邊距功能。 5.點擊
