How do I push the image to the side and to the top? Also how do I control each UL
LI
on their own and not as a general?
如何将图像推到侧面和顶部?另外我如何自己控制每个UL LI而不是一般?
目前的结果
HTML
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
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;
}
1 个解决方案
#1
1
First off, you have some syntax errors in your HTML.
首先,您的HTML中存在一些语法错误。
1) Several of you anchor tags are not closed. You forgot the /
in the closing tags.
1)你们中的几个锚标签没有关闭。你忘记了结束标签中的/。
2) Your image tag is inside a <ul>
, but not inside a <li>
. Anything you put in a list tag needs to be a <li>
.
2)您的图片标记位于
-
内,但不在
- 内。您放入列表标记的任何内容都必须是
- 内。您放入列表标记的任何内容都必须是
- 。
- 。
Corrected HTML:
更正的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>
There are a lot of options here.. you could use absolute positioning for a quick fix..
这里有很多选择..你可以使用绝对定位来快速修复..
img{
position: absolute;
top: 10px;
left: 10px;
}
You could use media queries to make it different sizes deending on the size of the screen..
您可以使用媒体查询使其大小与屏幕大小不同。
/* 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) { ... }
Or any number of other tricks, but ideally, you should use some kind of scaffolding. Something like Bootstrap makes this kind of thing much easier to manage.
或者任何其他技巧,但理想情况下,你应该使用某种脚手架。像Bootstrap这样的东西使这种事情更容易管理。
If you're interested in Bootstrap, these 3 links should help get you going very quickly. Google is now checking for mobile compatibility, so using BS will also improve your search ranking.
如果您对Bootstrap感兴趣,这3个链接应该可以帮助您快速上手。谷歌现在正在检查移动兼容性,因此使用BS也会提高您的搜索排名。
-
This one is a single page blank bootstrap template that pulls the BS files from a CDN so you can get started without downloading anything. Just copy this into a blank html document and you're ready to use any of the examples in the next two links.
这是一个单页空白引导模板,它从CDN中提取BS文件,因此您可以在不下载任何内容的情况下开始使用。只需将其复制到一个空白的html文档中,您就可以使用下两个链接中的任何示例了。
-
This one explains the scaffolding and how to position items on the page. Bootstrap is a responsive framework, meaning it automatically resizes the page for smaller devices.
这个解释了脚手架以及如何在页面上定位项目。 Bootstrap是一个响应式框架,这意味着它会自动调整页面大小以适应较小的设备。
-
And this one explains all the built-in styling tools it comes with. Jumbotron might be useful for this.
这个解释了它附带的所有内置样式工具。 Jumbotron可能对此有用。
#1
1
First off, you have some syntax errors in your HTML.
首先,您的HTML中存在一些语法错误。
1) Several of you anchor tags are not closed. You forgot the /
in the closing tags.
1)你们中的几个锚标签没有关闭。你忘记了结束标签中的/。
2) Your image tag is inside a <ul>
, but not inside a <li>
. Anything you put in a list tag needs to be a <li>
.
2)您的图片标记位于
-
内,但不在
- 内。您放入列表标记的任何内容都必须是
- 内。您放入列表标记的任何内容都必须是
- 。
- 。
Corrected HTML:
更正的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>
There are a lot of options here.. you could use absolute positioning for a quick fix..
这里有很多选择..你可以使用绝对定位来快速修复..
img{
position: absolute;
top: 10px;
left: 10px;
}
You could use media queries to make it different sizes deending on the size of the screen..
您可以使用媒体查询使其大小与屏幕大小不同。
/* 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) { ... }
Or any number of other tricks, but ideally, you should use some kind of scaffolding. Something like Bootstrap makes this kind of thing much easier to manage.
或者任何其他技巧,但理想情况下,你应该使用某种脚手架。像Bootstrap这样的东西使这种事情更容易管理。
If you're interested in Bootstrap, these 3 links should help get you going very quickly. Google is now checking for mobile compatibility, so using BS will also improve your search ranking.
如果您对Bootstrap感兴趣,这3个链接应该可以帮助您快速上手。谷歌现在正在检查移动兼容性,因此使用BS也会提高您的搜索排名。
-
This one is a single page blank bootstrap template that pulls the BS files from a CDN so you can get started without downloading anything. Just copy this into a blank html document and you're ready to use any of the examples in the next two links.
这是一个单页空白引导模板,它从CDN中提取BS文件,因此您可以在不下载任何内容的情况下开始使用。只需将其复制到一个空白的html文档中,您就可以使用下两个链接中的任何示例了。
-
This one explains the scaffolding and how to position items on the page. Bootstrap is a responsive framework, meaning it automatically resizes the page for smaller devices.
这个解释了脚手架以及如何在页面上定位项目。 Bootstrap是一个响应式框架,这意味着它会自动调整页面大小以适应较小的设备。
-
And this one explains all the built-in styling tools it comes with. Jumbotron might be useful for this.
这个解释了它附带的所有内置样式工具。 Jumbotron可能对此有用。