HTML5和CSS如何創建單獨的ul和移動 <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個鏈接應該可以幫助您快速入門。 Google現在正在檢查移動兼容性，因此使用BS還將提高您的搜索排名。

• 這是一個單頁空白引導模板，可從CDN中提取BS文件，因此無需下載任何內容即可開始使用。 只需將其復制到空白的html文檔中，就可以使用下面兩個鏈接中的任何示例了。

• 這一篇解釋了腳手架以及如何在頁面上放置項目。 Bootstrap是一個響應式框架，這意味着它會自動為較小的設備調整頁面大小。

• 而這一個解釋了所有內置的造型工具它配備。 Jumbotron可能對此有用。