Question

我不是网页设计师。我为我创建了一个网站。它几乎没有问题，但整体工作正常。我的最小HTML是：

<!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>

但这也是关于我的“联系我”。

Answer 1

听起来你想拥有“嵌套”列表。

<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解决方案。

考虑我在“关于我”-li中“嵌套”“联系我”的例子，然后查看新的嵌套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>

然后我们在

的底部添加一些新的CSS

//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;
    }

}

编辑2

我忘了你在移动时也必须隐藏正确的“联系我”，

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

在CSS

1 个答案: