html:
<div class="banner">
<div class="mark">
</div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">资料</a></li>
<li><a href="register.html">账号</a></li>
<li><a href="">赛事</a></li>
<li><a href="">视频</a></li>
<li><a href="">攻略</a></li>
<li><a href="">下载</a></li>
<li><a href="">互动</a></li>
<li><a href="">客服</a></li>
<li><a href="">APP</a></li>
</ul>
</div>
</div>
<div class="log">
<marquee width="800px" height="25px" scrollamount="1" scrolldelay="10" direction="left">TI4 你心中的冠军是谁!
</marquee>
<span class="login">
<form>
<lable>用户名:<input type="text" class="sub"/></lable>
<lable>密码:<input type="password" class="sub"/></lable>
<input type="submit" value="登陆"/>
</form>
</span>
</div>
<div class="content">
<div class="left_con">
<table>
<tr>
<td width="395px">
<div class="left_img">
</div>
</td>
</tr>
<tr>
<td>
<ul>
<li>LGD!</li>
<li>NAVI!</li>
<li>DK!</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
css:
body{
margin:0;
background:#666;
}
.banner{
}
.mark{
height:50px;
width:350px;
background:url(images/dota2.jpg);
float:left;
margin:0px;
padding:0px;
}
.nav{
height:50px;
width:1000px;
background:#000;
float:right;
margin-left:-10px;
}
.nav ul li a{
text-decoration:none;
color:#FFF;
}
.nav ul li a:hover{
text-decoration:underline;
color:#00F;
}
.nav ul{
list-style:none;
}
.nav ul li{
float:left;
width:80px;
border:0px solid #03F;
text-align:center;
}
.log{
height:25px;
}
.login{
float:right;
}
.log sub{
height:25px;
width:100px;
}
marquee{
line-height:25px;
}
.content{
background:#aba;
}
.left_con{
width:391px;
height:1000px;
border-right:1px solid #03F;
}
.left_img{
height:220px;
background:url(images/ti4.jpg);
}
但是出来的布局效果有点错位 百思不得其解 求解惑~~
<div class="banner">
<div class="mark">
</div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">资料</a></li>
<li><a href="register.html">账号</a></li>
<li><a href="">赛事</a></li>
<li><a href="">视频</a></li>
<li><a href="">攻略</a></li>
<li><a href="">下载</a></li>
<li><a href="">互动</a></li>
<li><a href="">客服</a></li>
<li><a href="">APP</a></li>
</ul>
</div>
</div>
<div class="log">
<marquee width="800px" height="25px" scrollamount="1" scrolldelay="10" direction="left">TI4 你心中的冠军是谁!
</marquee>
<span class="login">
<form>
<lable>用户名:<input type="text" class="sub"/></lable>
<lable>密码:<input type="password" class="sub"/></lable>
<input type="submit" value="登陆"/>
</form>
</span>
</div>
<div class="content">
<div class="left_con">
<table>
<tr>
<td width="395px">
<div class="left_img">
</div>
</td>
</tr>
<tr>
<td>
<ul>
<li>LGD!</li>
<li>NAVI!</li>
<li>DK!</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
css:
body{
margin:0;
background:#666;
}
.banner{
}
.mark{
height:50px;
width:350px;
background:url(images/dota2.jpg);
float:left;
margin:0px;
padding:0px;
}
.nav{
height:50px;
width:1000px;
background:#000;
float:right;
margin-left:-10px;
}
.nav ul li a{
text-decoration:none;
color:#FFF;
}
.nav ul li a:hover{
text-decoration:underline;
color:#00F;
}
.nav ul{
list-style:none;
}
.nav ul li{
float:left;
width:80px;
border:0px solid #03F;
text-align:center;
}
.log{
height:25px;
}
.login{
float:right;
}
.log sub{
height:25px;
width:100px;
}
marquee{
line-height:25px;
}
.content{
background:#aba;
}
.left_con{
width:391px;
height:1000px;
border-right:1px solid #03F;
}
.left_img{
height:220px;
background:url(images/ti4.jpg);
}
但是出来的布局效果有点错位 百思不得其解 求解惑~~