贵美网首页：深入理解Web开发中的div+css布局

howard2005

已于 2023-12-07 13:16:48 修改

阅读量1.8k

点赞数 4

分类专栏：前端学习园地文章标签： div css

于 2018-02-24 07:00:02 首次发布

本文链接：https://blog.csdn.net/howard2005/article/details/79358095

版权

前端学习园地专栏收录该内容

48 篇文章 3 订阅

订阅专栏

大家好，很高兴能够在这里与各位分享我的一些心得体会。今天我将要谈论的主题是关于Web开发中的div+css布局，而我是通过制作贵美网首页来深入了解这一技术的。

首先，让我们来看一下我所制作的贵美网首页。通过这个项目，我更加深刻地理解了div+css布局的运用。在页面的布局中，我运用了iframe框架来实现header.html和footer.html的复用。这一技术不仅提高了代码的可维护性，也使页面的结构更加清晰。

除此之外，我还通过JavaScript实现了动态显示时间的功能。在页面的右上角，你可以看到一个实时更新的时间显示。这一功能的实现不仅为用户提供了便利，也展示了我对JavaScript的灵活运用。

在页面的导航栏中，我使用了div-ul-li的结构来显示分类列表。这种布局方式不仅让页面更加美观，而且提升了用户体验。通过这个项目，我对Web开发中的前端技术有了更加全面的认识。

对于大家可能会问，为什么要深入了解div+css布局呢？其实，我认为在Web开发中，每一个细节都至关重要。掌握这些基础知识，不仅能够让我们更高效地进行开发，还能够提升用户体验，使页面更具吸引力。

作为一个程序员，我过去可能更专注于后端的开发，而对于前端的布局可能了解得不够深入。通过这次的学习和实践，我深感前端的重要性，也意识到要成为一名全栈工程师，前端技术同样需要我们不断学习和提升。

最后，我想分享一点个人的心得。技术的学习是一个不断迭代的过程，我们不能轻视Web开发中每个要求掌握的知识点。通过对div+css布局的深入了解，我相信我已经迈出了成为更全面的开发者的一步。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>贵美商城</title>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="showTime()">
<div class="header">
    <div style="width: 55%; height: 100px; float: left;"></div>
    <div class="menu">
        <ul>
            <li class="pic1"></li>
            <li><a href="#">购物车</a></li>
            <li class="pic2"></li>
            <li><a href="#">帮助中心</a></li>
            <li class="pic3"></li>
            <li><a href="#">加入收藏</a></li>
            <li class="pic4"></li>
            <li><a href="#">设为首页</a>;</li>
            <li class="btn"><a href="#">登录</a></li>
            <li class="btn"><a href="#">注册</a></li>
        </ul>
        <div class="hello">
            你好，欢迎访问贵美商城！
            <span id="currentTime" style="color: black"></span>
        </div>
    </div>
    <div class="nav">
        <ul id="aa">
            <li><a href="#">首页</a></li>
            <li><a href="#">家用电器</a></li>
            <li><a href="#">手机数码</a></li>
            <li><a href="#">日用百货</a></li>
            <li><a href="#">书籍</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">免费书店</a></li>
            <li><a href="#">全球资讯</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    function showTime() {
        var today, year, month, day, hour, minute, second, weekday, strWeekday;
        today = new Date();
        weekday = today.getDay();
        var currentTime = document.getElementById("currentTime");
        switch (weekday) {
            case 0: {
                strWeekday = "星期日";
            }
                break;
            case 1: {
                strWeekday = "星期一";
            }
                break;
            case 2: {
                strWeekday = "星期二";
            }
                break;
            case 3: {
                strWeekday = "星期三";
            }
                break;
            case 4: {
                strWeekday = "星期四";
            }
                break;
            case 5: {
                strWeekday = "星期五";
            }
                break;
            case 6: {
                strWeekday = "星期六";
            }
                break;
        }
        year = today.getFullYear();
        month = today.getMonth() + 1;
        day = today.getDate();
        hour = today.getHours();
        minute = today.getMinutes();
        second = today.getSeconds();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        if (hour < 10) hour = "0" + hour;
        if (minute < 10) minute = "0" + minute;
        if (second < 10) second = "0" + second;
        var time = strWeekday + " " + year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
        currentTime.innerHTML = time;
        setTimeout("showTime()", "1000");
    }
</script>
</body>
</html>