作爲CSS中另一個孩子的ul

我不是網頁設計師。我爲我創建了一個網站。它有幾個問題，但總體工作正常。我最小的HTML是：作爲CSS中另一個孩子的ul

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Rudra Banerjee</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
<style type="text/css" media="all"> 
footnote {font-size :70%; font-style : italic} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
    </div> 
    <div id="navigation"> 
    <ul> 
     <li> 
     <a href="#" style='background-color: #6da8f8'>About Me</a> 
     </li> 
     <li> 
     <a href="work.html">Work</a> 
     </li> 
     <li> 
     <a href="passion.html">Passion</a> 
     </li> 
    </ul> 
    </div> 
    <div id="rightnavigation"> 
    <ul> 
     <li> 
     <a href="contact.html">Contact Me</a> 
     </li> 
    </ul> 
    </div> 
    <div id="content"> 
    <div class="shadow"> 
     <img src="images/my_pic.png" alt="MyPic" style="box-shadow:0 10px 10px #000;"> 
    </div> 
    <h2> 
     About Me 
    </h2> 
    Here goes my about me. 
    </div> 
</div> 
</body> 
</html>

和我對應的CSS是：

body { 
    font : 100% "Times New Roman", Times, serif; 
    color : #0a8bf8; 
    background : #184470; 
    margin : 0; 
     } 
#header { 
    height : 60px; 
    margin : 0 auto; 
    border-left : 214px solid #184470; 
     } 
#navigation { 
    position : absolute; 
    top : 60px; 
    left : 1%; 
    width : 15%; 
    color : #e4ecef; 
    font-size : 110%; 
     } 
#navigation ul { 
    margin : 0 0 2em 0; 
    padding : 0; 
    list-style : none; 
    color : #e4ecef; 
     } 
#navigation ul a { 
    color : white; 
    text-decoration : none; 
    display : block; 
    background : #4674b2; 
    padding : 0 0.5em; 
    margin : 0 2em 1px 1em; 
    color : #e4ecef; 
    box-shadow :0 10px 10px #000; 
     } 
#rightnavigation { 
    position : absolute; 
    top : 0px; 
    left : 83%; 
    width : 17%; 
    color : #000; 
    font-size : 100%; 
     } 
#rightnavigation ul { 
    margin : 100% 0 1em 0; 
    padding : 0; 
    list-style : none; 
    color : #000; 
     } 
#rightnavigation ul a { 
    color : white; 
    text-decoration : none; 
    display : block; 
    background : #4674b2; 
    padding : 0 0.5em; 
    margin : 0 1em 1px 1em; 
    color : #e4ecef; 
    box-shadow : 0 10px 10px #000; 
     } 
#content { 
     background : #e4ecef; 
     padding : 0.0em 2.5em; 
     border-radius: 15px 15px 15px 15px; 
     border-radius: 15px 15px 15px 15px; 
     width : 62%; 
     float : right; 
     margin-right : 17%; 
     margin-left : 30%; 
     border : 0px; 
     background : #e0e9f8; 
     } 
#content img { 
     height : 200px; 
     padding : 0; 
     border : 0 solid #333; 
     float : right; 
     margin : .5em 0em 2em 2em; 
     }

這工作得很好，在移動瀏覽時除外，沒有辦法單獨navigation（即我，工作和激情）從rightnavigation（即聯繫我，這只是在我的頁面）。說了，我在移動獲取導航是：

* About Me 
* Work 
* Passion 

* Contact Me

但是，對我來說這將是更好的，如果我有這樣的：在移動視圖

* About Me 
     * Contact Me 
* Work 
* Passion

。但我不想在桌面視圖中改變它的位置。

正如我所說的，我不是很熟悉HTML的條款，但我想，在這裏我需要一個child ....定義rightnavigation爲navigation孩子，

我可以定義類似的東西在我的CSS？請不要將我引用到java等，這些對我來說太重了。

回覆@NachoDawg所以，現在我的導航應該是這樣的：

<div id="container"> 
    <div id="header"> 
    </div> 
    <div id="navigation"> 
    <ul> 
     <li> 
     <a href="#" style='background-color: #6da8f8'>About Me</a> 
     <ul class="showOnMobile"> 
     <li> 
     <a href="contact.html">Contact Me</a> 
     </li> 
     </ul> 
     </li> 
     <li> 
     <a href="work.html">Work</a> 
     </li> 
     <li> 
     <a href="passion.html">Passion</a> 
     </li> 
    </ul> 
    </div> 
    <div id="rightnavigation"> 
    <ul> 
     <li> 
     <a href="contact.html">Contact Me</a> 
     </li> 
    </ul> 
    </div>

不過這是給「與我聯繫」下關於我的。

來源

2015-08-28 BaRud

我做了第二次編輯。你能否確認你已經添加了我在我的回覆中編寫的CSS？請確保在我的第二次編輯中獲得CSS。 – NachoDawg

聽起來像你想擁有「嵌套」列表。

<ul> 
    <li> 
    <a href="#" style='background-color: #6da8f8'>About Me</a> 

    <ul> 
     <li> 
      <a href="contact.html">Contact Me</a> 
     </li> 
    </ul> 


    </li> 
    <li> 
    <a href="work.html">Work</a> 
    </li> 
    <li> 
    <a href="passion.html">Passion</a> 
    </li> 
</ul>

跟我現在是li的子元素包含「關於我」

編輯：重讀的問題，對不起。

如果您在移動視圖中只想「聯繫我」在「關於我」下方縮進顯示，那麼事情會變得稍微複雜一些，但仍然存在純粹的CSS解決方案。

想想我的「嵌套」「聯繫我」的例子 - 他在「關於我」 - 裏面，只是看看新的嵌套ul。讓我們在ul中添加一個類，以便我們可以在CSS中選擇元素並對其執行操作。

同時，不要刪除舊的右側「聯繫我」

<li> 
    <a href="#" style='background-color: #6da8f8'>About Me</a> 

    <ul class="showOnMobile"> 
     <li> 
      <a href="contact.html">Contact Me</a> 
     </li> 
    </ul> 

    </li>

然後我們在你

//we make sure everything with the class "showOnMobile" is hidden on a normal sized screen 
.showOnMobile { 
    display:none; 
} 


// This is a media query. it applies the css rules inside the brackets when the condition in the "()" are met. In this instance, the screen must be less than 379 pixles for the rules inside to apply. 
@media (max-width: 379px) { 
    .showOnMobile{ 
     display:block; 
    } 

}

EDIT 2

的底部添加一些新的CSS

我忘了你還必須在手機中隱藏正確的'聯繫我'，

@media (max-width: 379px) { 
    .showOnMobile{ 
     display:block; 
    } 
    .rightnavigation{ 
     display:none; 
    } 
}

來源

2015-08-28 11:22:33 NachoDawg

作爲CSS中另一個孩子的ul

回答

相關問題