Question

使用html+css完成网页效果图中所示的logo、banner、Menu顶部区域。网页内容区域以及底部区域选做。

制作要求：在制作过程中 建站点，规范文件夹命名以及文件命名方式。
有没有能做的。 急等。

Answer 1

Step1. HTML代码
<div id="demo"> <div class="col"> <div class="big todos-thumb"> <p><img src="img/loader.gif" data-src="img/5969313944_e5d6d67b23_s.gif" alt="monaco see"> <span class="todos-thumb-span">monaco see</span> </p> </div> </div><!-- col1 --> <div class="col col1"> <div class="big todos-thumb"> <p><img src="img/loader.gif" data-src="img/5913489167_1e78858455_s.gif" alt="the flower"> <span class="todos-thumb-span">the flower</span> </p> </div> </div><!-- col2 --> <div class="col col2"> <div class="big todos-thumb"> <p><img src="img/loader.gif" data-src="img/5914033844_504a351fd4_m.gif" alt="Chapel Bridge"> <span class="todos-thumb-span">Chapel Bridge</span> </p> </div> </div><!-- col3 --> </div><!-- demo -->

Step2. CSS样式
.col{ position: absolute; border-right:none; z-index:1; left:0; } .col1{ left: 51px; } .col2{ left: 102px; } .col3{ left: 153px; } .line { margin-top:51px; } .active { z-index: 10; opacity: 1; } .big:hover, .small:hover{ background:white; } .big{overflow: hidden; padding:1px;} .big p { width: 50px; height: 50px; line-height:1.3; z-index: 10; transition: all 0.2s ease-out; position: relative; cursor: pointer; } .big .icon-font{ float:left; } .big p img { width:50px; height:50px; float:left; } .lock-thumb .icon-font{ margin-left:25%; } .todos-thumb { background: rgb(255,255,255,0.1); } .todos-thumb:hover { background: #2FB1BE; color: #FFFFFF; box-shadow: 0 0 2px #333; } .col .todos-thumb { z-index:10; } .todos-thumb-span{ display: block; padding-left: 5em; } .todos-thumb p span{ width: 150px; padding-top: 5px; font-size: 1.2em; } .todos-thumb:hover p{ margin-right: 200px; }

Step3. 插入脚本
$(document).ready(function(){ $("#demo .col").mouseenter(function(){ $(this).addClass("active"); $('.active').siblings().css("opacity", "0.4"); //除了加载到.active样式以外都改变其opacity }); $("#demo .col").mouseleave(function(){ $(this).removeClass("active"); $("#demo .col").css("opacity", "1"); }); });

另外为了丰富相片墙的表现力，我添加了img load效果，用的是一款unveil的jQuery插件,使用方法为下:
<script type="text/javascript" src="js/jquery.unveil.min.js"></script> <script> $(function() { $("#demo img").unveil(300); //id为demo下的所有img图片 }); </script>

追问

可以把做好的文件发过来吗？
稍后采纳。