<html>
<head>
<title>Pixafy</title>
<style>
html {
background: url(wp.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.wp.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wp.jpg', sizingMethod='scale')";
padding-top: 50px;
}
#ldiv {
vertical-align: top;
height: 120px;
width: 40%;
color:#ccc;
float: left;
position: relative;
border: 1px solid yellow;
}
#rdiv {
vertical-align: top;
float: left;
width: 40%;
border: 1px solid blue;
height: 120px;
}
#ctr {
vertical-align: middle;
width: 80%;
height: 150px;
border: 1px solid white;
background:url(mid.png) no-repeat center center;
}
#container1 {
vertical align: top;
width: 80%;
height: 300px;
border: 1px solid green;
background-color: #E3E3E3;
}
#container2 {
vertical align: top;
width: 80%;
height: 250px;
border: 1px solid green;
background-color: #000000;
}
#text1 {
align: left;
width: 80%;
color: #000000;
font-family: Arial, Vedana, Tahoma;
font-size: 24px;
font-weight: bold;
}
#space {
height: 25px;
border: 1px solid purple;
width: 80%;
}
ul {
list-style-type: none;
height: 80px;
width: 500px;
margin: auto;
}
li {
float: left;
}
ul a {
background-color: #29281E;
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
padding-left: 20px;
padding-top: 6px;
padding-bottom: 6px;
display: block;
line-height: 22px;
text-decoration: none;
font-weight: bold;
font-family: Verdana, "Times New Roman", Times, serif;
font-size: 14px;
color: #D6D7D8;
}
.clear-both {
clear: both;
}
#text2 {
width: 70%;
border: 1px solid #00CCFF;
color: #000000;
font-size: 16px;
font-family: Arial, Verdana, Tahoma;
font-weight: bold;
}
#btn {
width 10%;
border: 1px solid #FFCC00;
vertical-align:bottom;
}
.btnlearn {
clear:both;
width:125px;
height:40px;
background:#E55D22;
text-align:center;
line-height:40px;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
cursor: pointer;
}
.btnlearn:hover {
text-decoration: underline;
cursor: pointer;
}
#rcw {
width: 80%;
color: #BAB8B8;
font-size: 18px;
font-size: Arial, Verdana, Tahoma;
}
#left
{
width: 33%;
float: left;
border: 1px solid yellow;
display: inline-block;
height: 250px;
}
#right
{
width: 33%;
float: left;
border: 1px solid white;
display: inline-block;
height: 250px;
}
#mid
{
width:33%;
float: left;
border: 1px solid red;
display: inline-block;
height: 250px;
}
</style>
</head>
<body>
<div width=100% style="margin: 0 auto;">
<div id="ldiv"><img src="pixafy.png" style="position: absolute; left: 0px;" /></div>
<div id="rdiv">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="clear-both"></div>
<div id="ctr"></div>
<div class="clear-both"></div>
<div id="space"></div>
<div class="clear-both"></div>
<div id="container1" style="position: relative;">
<div id="text1" style="position: absolute; left: 25px; top: 15px;">We are a company of experts developer based in New York City.<br>Partner with us to achieve your business goals through technology.</div>
<div class="clear-both"></div>
<div id="text2" style="position: absolute; left: 25px; top: 85px; overflow: auto">Our talented and experienced team has over 10 years of experience developing world-class websites and applications, and we leverage the latest technologies, content management solutions, open source platforms and web standards to solve any challenge.</div>
<div id="btn" style="position: absolute; right: 45px; top: 100px;"><input type=button class=btnlearn value="Learn More" /></div>
<div class="clear-both"></div>
<div id="rcw" style="position: absolute; left: 25px; top: 175px;">Recent Work</div>
<img src="1.png" style="position: absolute; left: 150px; bottom: 0px;" />
<img src="2.png" style="position: absolute; left: 400px; bottom: 0px;" />
<img src="3.png" style="position: absolute; left: 650px; bottom: 0px;" />
</div>
<div class="clear-both"></div>
<div id="container2" style="position: relative;">
<div id=left stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</span>
<div class="clear-both"></div>
<img src="wd.png" style="position: relative; left: 25px; top: 40px;" />
<span style="position: relative; width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</span>
</div>
<div id=right stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</span>
</div>
<div id=mid stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</span>
</div>
</div>
</div>
</body>
</html>
前哨
我想把它包装起来，这样我也可以在接下来的两个 DIV 中拥有类似的内容。不知道为什么第一行有一个标签并给我这个问题。
有人能告诉我为什么它会转到下一个 DIV 吗？
请帮我解决这个问题。
我想让它看起来像这样：
