[英]Html5 and Css how to create separate ul li and move <aside> to the left
如何将图像推向侧面和顶部? 另外,我该如何独自而不是一般地控制每个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;
}
首先,您的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还将提高您的搜索排名。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.