HTML制作菜鸟教程首页

成果图如下所示：
虽然比起原网站要逊色的多，但是猛地一看还是很有迷惑性的。（哈哈）
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>
HTML制作菜鸟教程首页

猜你喜欢
