上周我一直在学习 html 和 css,并且在开始真正的项目之前尝试了各种事情。
我一直在搞砸,这就是我到目前为止所拥有的:http: //jsfiddle.net/94ZDm/1/ http://jsfiddle.net/94ZDm/1/embedded/result/
<!doctype html>
<html>
<head>
<title>My Website</title>
<meta charset="utf-8" />
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="nav">
<ul id="navi">
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Archives</a></li>
<li><a href="">Links</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<div class="main-wrap">
<div class="main1">
<h1 id="top"> Hello World!!! </h1>
<p> First paragraph </p>
<h2> Things I Must Do Today</h2>
<ul>
<li> <a href="http://google.be" target="_blank" id="externallink"> Go to the mall </a> </li>
<li> Shop </li>
<li> Get gas</li>
<li> Drive home </li>
</ul>
<p><img src="img/koala.jpeg" alt="a koala sitting in a tree" align="left"/>
Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>
<p><a href="#top">Top</a></p>
</div>
<div class="main2">
<p> extra navigation... </p>
</div>
</div>
<footer>
© Copyright Blabla Land 2014
</footer>
</div>
</body>
</html>
.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial, Verdana, sans-serif;
background: green;
}
.container {
width:960px;
margin:0 auto;
}
.main-wrap {
overflow: hidden;
}
.nav {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.main1 {
float: left;
width: 652px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.main2 {
float: right;
width: 288px;
min-height: 1000px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
footer {
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
text-align: center;
}
#navi li {
display: inline-block;
list-style-type: none;
margin-right: 25px;
}
#navi {
text-align: center;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color:black;
}
a:hover {
color: #229944;
text-decoration: underline;
}
a:active {
color:red;
}
#externallink {
text-decoration: underline;
}
img {
padding: 10px;
}
如何在不使用人造列的情况下使我的内容列同样长(正确的列应该与主列一样长)?假列会阻止我使用当前布局?我也不想使用指定的高度,它必须自动适应内容。
提前致谢!