成果图如下所示:
虽然比起原网站要逊色的多,但是猛地一看还是很有迷惑性的。(哈哈)
1、首先对页面用div进行布局 (先分成几个大块)如图:
2、然后在大块里面放上小块,如图
3、写上文字:
4、加上图片修改颜色,调整下位置,就得到如上的第一张图。
代码如下:
<html>
<head>
<title>菜鸟教程-学的不仅仅是技术,更是梦想!</title>
<style>
.div_caihead{
width:100%;
height:100px;
float:left;
margin-left:0%;
}
.div_caihead1{
width:47%;
height:60px;
float:left;
margin-left:3%;
margin-top:1%;
}
.div_caihead2{
width:253px;
height:30px;
float:left;
margin-left:33%;
margin-top:10;
}
.div_mid{
width:100%;
height:40px;
float:left;
background-color:#96b96d;
margin-left:0%;
}
.div_mid1{
width:6%;
height:40px;
float:left;
background-color:#96b96d;
margin-left:0%;
text-align:center;
line-height:40px;
}
.div_left{
width:200px;
height:800px;
float:left;
margin-left:17%;
margin-top:1%;
}
.div_left1{
width:200px;
height:50px;
float:left;
;
margin-left:0%;
margin-top:2px;
text-align:center;
line-height:50px;
}
.div_right{
width:40%;
height:800px;
float:left;
margin-left:1%;
margin-top:1%;
}
.div_right2{
width:100%;
height:450px;
float:left;
margin-left:2%;
margin-top:0%;
}
.div_right1{
width:96%;
height:40px;
float:left;
margin-left:2%;
margin-top:1%;
}
.div_rights{
width:47%;
height:90px;
float:left;
margin-left:2%;
margin-top:1%;
}
.div_rights1{
width:92%;
height:35px;
float:left;
margin-left:5%;
margin-top:2%;
}
.div_rights2{
width:33px;
height:33px;
float:left;
margin-left:6%;
margin-top:1%;
}
.div_rights3{
width:70%;
height:33px;
float:left;
margin-left:3%;
margin-top:1%;
}
</style>
</head>
<body>
<div class="div_caihead">
<div class="div_caihead1">
<div class="div_caihead2">
<a href="http://www.runoob.com/" ><img src="cainiao.png" width=253 height=30/></a>
</div>
</div>
<div class="div_caihead1">
<form action="https://www.runoob.com/" method="get">
<input style="width:450px;height:40px;"id="s" name="s" type="post" placeholder="搜索……" autocomplete="off"/>
</form>
</div>
</div>
<div class="div_mid" >
<div class="div_mid1" style="margin-left:17%;"><font color="white">首页</font></div>
<div class="div_mid1"><font color="white">菜鸟笔记</font></div>
<div class="div_mid1"><font color="white">菜鸟工具</font></div>
<div class="div_mid1"><font color="white">参考手册</font></div>
<div class="div_mid1"><font color="white">用户笔记</font></div>
<div class="div_mid1"><font color="white">测试/考试</font></div>
<div class="div_mid1"><font color="white">设计神器</font></div>
<div class="div_mid1"><font color="white">本地书籍</font></div>
<div class="div_mid1"><font color="white">登录</font></div>
</div>
<div class="div_left">
<div class="div_left1">HTML/CSS</div>
<div class="div_left1">JaveScript</div>
<div class="div_left1">服务端</div>
<div class="div_left1">数据库</div>
<div class="div_left1">移动端</div>
<div class="div_left1">XML教程</div>
<div class="div_left1">ASP.NET</div>
<div class="div_left1">Web Service</div>
<div class="div_left1">开发工具</div>
<div class="div_left1">网站建设</div>
</div>
<div class="div_right">
<div class="div_right2">
<div class="div_right1"><b>HTML/CSS</b></div>
<div class="div_rights"><a href="http://www.runoob.com/html/html-tutorial.html"><img src="pic.png"/></a></div>
<div class="div_rights"><a href="http://www.runoob.com/html/html-tutorial.html"><img src="pic.png"/></a></div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【学习 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文本标记语言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【学习 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文本标记语言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【学习 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文本标记语言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【学习 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文本标记语言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【学习 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文本标记语言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【学习 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文本标记语言(Typer Text Markup Language)</b></font></div>
</a>
</div>
</div>
<div class="div_right2">
<div class="div_right1"> <b>JavaScript</b></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
</div>
</div>
</body>
</html>