html4+css2实现:

    项目结构如下图所示:

    

    主要用到的技术:div+css网页布局,简单的js技术,实现网页底部友情链接的鼠标移动上去的展开和隐藏效果,因为js部分代码量很小,考虑到http请求数优化就没有独立出一个js文件来写

    部分代码:

    

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title>UC浏览器官网</title>
    <link rel="stylesheet" type="text/css" href="uc.css"/>
    <script>

        window.onload=function() {
            var oBtn1 = document.getElementById('linkmore1');
            var oBtn2 = document.getElementById('linkmore2');
            var oUl = document.getElementsByClassName('linkmore');

            oBtn1.onmouseover = function ()
            {
                oUl[0].style.display = 'block';
            };
            oBtn2.onmouseover = function ()
            {
                oUl[1].style.display = 'block';
            };
            oBtn1.onmouseout = function ()
            {
                oUl[0].style.display = 'none';
            };
            oBtn2.onmouseout = function ()
            {

                oUl[1].style.display = 'none';
            };
        }

    </script>
</head>


<body>
    <div class="header">
        <img src="img/logo.gif"/>
        <ul class="clear">
            <li class="active"><a href="" target="_blank">首页</a></li>
            <li><a href="" target="_blank">下载</a></li>
            <li><a href="#" target="_blank">公司</a></li>
            <li><a href="#" target="_blank">合作</a></li>
            <li><a href="#" target="_blank">社区</a></li>
            <li><a href="#" target="_blank">帮助</a></li>
        </ul>
    </div>
    <div class="headerimg"><h1><a href="#" target="_blank">
        <img src="img/bg1.png" alt=""></a></h1>
    </div>

        最终效果图: