Html5 和 Css 如何创建单独的 ul li 并向<aside>左移动

Question

如何将图像推到侧面和顶部？此外，我如何单独控制每个UL LI，而不是作为一般控制？

当前结果

HTML

<div class="header">
  <h1>Merry Christmas</h1>
  <ul id="lil">
    <li><a href="">About Us</a></li>
    <li><a href="">Christmas</a></li>
    <li><a href="">Snow</a></li>
    <li><a href="">Other Holidays</a></li>
  </ul>
  <img src="http://ntt.cc/wp-content/uploads/2009/11/Bell.png" />
</div>
<aside id="sideBar">
  <ul>
    <li>What is Christmas</li>
    <li>Do I celebrate Christmas</li>
    <li>Is Christmas fun?</li>
    <li>Conclusion</li>
  </ul>
</aside>

CSS

div.header {
  background-color: #E32636;
  color: white;
  text-align: center;
  padding: 2px;
  margin: 0px;
  font-family: 'Nemo Nightmares', Arial;
  font-size: 300%;
}
ul#lil li {
  list-style-type: none;
  display: inline;
  color: white;
  font-family: 'Courier New';
  text-align: center;
  margin: 6px;
}
img {
  float: left;
  width: 270px;
  height: 270px;
  position: relative;
  bottom: 190px;
}
a:link {
  text-decoration: none;
  color: white;
}
a:hover {
  color: white;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
  color: white;
}
ul li {
  color: black;
  list-style-type: none;
  margin: 12px;
  font-size: 100%;
  position: relative;
  right: 350px;
}
#sideBar {
  background-color: #87A96B;
  float: left;
  left: 350px;
}

Answer 1

首先，您的HTML中存在一些语法错误。

1） 你们中的一些定位标记没有关闭。您忘记了结束标记中的/。

2） 您的图像标签在<ul>中，但不在<li>中。您放入列表标记中的任何内容都需要是<li>。

更正的HTML:

<div class="header">
  <h1>Merry Christmas</h1>
  <img src="http://ntt.cc/wp-content/uploads/2009/11/Bell.png" class="bells" />
  <ul id="lil">
    <li><a href="">Aboutus</a></li>
    <li><a href="">Christmas</a></li>
    <li><a href="">Snow</a></li>
    <li><a href="">OtherHolidays</a></li>
  </ul>
</div>
<aside id="sideBar">
  <ul>
    <li>What is christmas</li>
    <li>Do I celebrate Christmas</li>
    <li>Is Christmas fun?</li>
    <li>Conclustion</li>
  </ul>
</aside>

这里有很多选择。。你可以使用绝对定位来快速解决问题。。

img{
    position: absolute;
    top: 10px;
    left: 10px;
}

您可以根据屏幕的大小使用媒体查询使其大小不同。。

/* Large desktop */
@media (min-width: 1200px) {
    img{
        width:30px;
        height: 30px;
    }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    img{
        width:25px;
        height: 25px;
    }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }

或者任何其他技巧，但理想情况下，你应该使用某种脚手架。像Bootstrap这样的东西使这种事情更容易管理。

---

如果你对Bootstrap感兴趣，这3个链接应该会帮助你快速上手。谷歌现在正在检查手机兼容性，所以使用BS也会提高你的搜索排名。

• 这是一个单页的空白引导模板，它从CDN中提取BS文件，因此您可以在不下载任何内容的情况下开始。只需将其复制到一个空白的html文档中，就可以使用接下来两个链接中的任何示例了。

• 这篇文章解释了脚手架以及如何在页面上放置项目。Bootstrap是一个响应式框架，这意味着它会自动调整较小设备的页面大小。

• 这个解释了它附带的所有内置样式工具。Jumbotron可能对此有用。