我是 css 新手，并試圖制作一個非常簡單的頁面作為設計。
這是我想要制作的頁面 
正如你在這張圖片中看到的，左邊的所有塊：更多、商品、額外內容、媒體都非常整潔。底排非常直。
但這是我的。
正如你所看到的，左邊的塊：更多、商品、附加、媒體不是設計。
這是我在styles.css 中的代碼：
#nav .subnav {
position: absolute;
}
這是我在 index.html 上的代碼
<li>
<a href="">More</a>
<ul class="subnav">
<li><a href="">Merchandise</a></li>
<li><a href="">Extras</a></li>
<li><a href="">Media</a></li>
</ul>
</li>
你能給我一些關于這個問題的想法嗎？非常感謝您的寶貴時間。
uj5u.com熱心網友回復：
獲取此代碼并對其進行編輯以適合您的目的：
var d = {
e: function(id){
return(document.getElementById(id));
}
};
var System = {
tabs: {
init: function(){
try{
var tabs = d.e("tabs").querySelectorAll("tab");
for(var i = 0; i < tabs.length; i ){
var e = tabs[i];
e.onclick = function(){
System.tabs.activate(this);
};
}
System.tabs.activate(tabs[0]);
}catch(err){
alert(err.stack);
}
},
activate: function(name){
try{
var tabs = d.e("tabs").querySelectorAll("tab");
for(var i = 0; i < tabs.length; i ){
tabs[i].setAttribute("active","false");
}
name.setAttribute("active","true");
var contents = d.e("content").querySelectorAll("pane");
for(var i = 0; i < contents.length; i ){
contents[i].style.display = "none";
}
contents[Array.from(tabs).indexOf(name)].style.display = "block";
}catch(err){
alert(err.stack);
}
}
},
goto: function(url){
window.location.replace(url);
}
};
window.onload = function(){
System.tabs.init();
}tab{
display: inline-block;
background: #777777;
border: 1px solid #000000;
padding: 4px;
}
tab:hover{
background: #aaaaaa
}
#tabs{
text-align: center;
}
tab[active="true"]{
background: #77aa77;
}<div id="tabs">
<tab>Tab name</tab><tab>Another tab name</tab><tab>And another tab name</tab>
</div>
<div id="content">
<pane>
<!-- Content here -->
</pane>
<pane>
<!-- Another bit of content here -->
</pane>
<pane>
<!-- And another bit of content here -->
</pane>
</div>我添加了System.goto(url)這樣你就可以有一個快捷方式來更改 URL。
uj5u.com熱心網友回復：
如果你只是想讓你的.subnav定位在它的主導航項的正下方，<li>并讓它們顯示在左側對齊，請為子導航使用絕對CSS 定位：
CSS
ul {
padding-left: 0;
}
li {
position: relative;
}
.subnav {
position: absolute;
top: 0;
}
.subnav li {
display: inline-block;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344709.html