效果图:
(实际内容是重复的,因为懒得去挨个搞图标,挨个写介绍,没有技术点)
缺陷很多, 比如底部栏没有做,
放缩效果不太好,文字有些会错位,原版的放缩时对应两套界面,
菜鸟教程首页很适合练习布局,很简洁有结构,当然要做好还是很难的,
看起来像不难,用起来体验好却很难做到,有大量的细节问题,还需要JS的加工
附上源码,css和HTML是分开的,图片资源没上传 ,不方便,有需要的可以找我要
大家共同学习,共同进步,欢迎指正!
<!DOCTYPE html>
<html>
<head>
<title>菜鸟教程 - 学的不仅是技术,更是梦想!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link class="li"nk href="div1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container_top">
<div id="title">
<a href="#" context="RUNOOB.COM">
<img src="title.jpg">
</a>
</div>
<div id="search">
<form action="http://www.runoob.com/?s=" target="_blank">
<input id="s" name="s" type="text" placeholder="  搜索……">
</form>
</div>
</div>
<div id="div_menv">
<ul id="ul_menv">
<li class="li_menv">首页</li>
<li class="li_menv">菜鸟笔记</li>
<li class="li_menv">菜鸟工具</li>
<li class="li_menv">参考手册</li>
<li class="li_menv">用户笔记</li>
<li class="li_menv">测试/考试</li>
<li class="li_menv">设计神器</li>
<li class="li_menv">本地书签</li>
<li class="li_menv">登录</li>
</ul>
</div>
<div id="container_main">
<div id="leftMenv">
<div id="div_quanbu">
<img src="quanbu.jpg" context="全部教程" id="img_quanbu"/>
全部教程
</div>
<div class="div_whiteMenv">
<img src="menv.jpg" context="菜单选择图" id="img_menv"/>
HTML / CSS
</div>
<div class="div_grayMenv">
<img src="menv.jpg" context="菜单选择图" id="img_menv"/>
JavaScript
</div>
<div class="div_whiteMenv">
<img src="menv.jpg" context="菜单选择图" id="img_menv"/>
服务端
</div>
<div class="div_grayMenv">
<img src="menv.jpg" context="菜单选择图" id="img_menv"/>
数据端
</div>
<div class="div_whiteMenv">
<img src="menv.jpg" context="菜单选择图" id="img_menv"/>
移动端
</div>
<