web前端大作业html+css+js 20页网页设计+二级菜单

最新推荐文章于 2024-06-19 13:39:26 发布

凡人晶

最新推荐文章于 2024-06-19 13:39:26 发布

阅读量1.5k

点赞数 9

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/weixin_62177449/article/details/125452542

版权

文章目录

前言
一、我的界面
二、代码
总结

前言

web课程总共学了8周，有6周的时间我都在摸鱼。而在最后的两周里，我翻看了csdn上许多博主的文章和网页设计，当时真的是愁眉苦脸，如同热锅上的蚂蚁一般，BBQ了。

推荐学习web的网站：w3school 。（https://www.w3school.com.cn/）
还有b站上学习的视频：pink老师前端入门教程。
如果你也是摸鱼混水来的，比较推荐pink老师。我老师会有验机答疑环节，所以要求你知道基础知识。我当时看这个看了一周，1.5倍速快速刷知识点，在电脑上跟着练习，笔记本上记知识点。

今天写下这篇文章是想帮助到其他同学。也是想让自己有个教训，一而再，再而三，拖到最后，只会害了自己啊。

最最重要的一点：我借鉴了这个博主（id：秋千水竹马道）的内容（当然没有人家做的好看啦，我就是个渣渣），如果有什么不对的地方，请私聊我嗷。

一、我的界面

给大家分享图片看一下我的界面吧

首页
在这里插入图片描述

个人资料

在这里插入图片描述

感悟

在这里插入图片描述

精美片段欣赏

(1) 唐诗
①　《全唐诗》是汇集唐代诗歌的总集全书共九百卷。
在这里插入图片描述

②　李白《黄鹤楼送孟浩然之广陵》

在这里插入图片描述

（2）.宋词
①　李清照《声声慢寻寻觅觅》

在这里插入图片描述

②　欧阳修《醉翁亭记》

在这里插入图片描述

（3）.元曲
①　张养浩《山坡羊潼关怀古》

在这里插入图片描述

②　张可久《卖花声怀古》

在这里插入图片描述

书籍

在这里插入图片描述

友情链接
时间显示

在这里插入图片描述

留言板

在这里插入图片描述

二、代码

html

1.首页

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到我的个人网站</title>
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/首页.css">
</head>

<body>

    <div class="top">
        <center>
            <ul>
                <li><a href="首页.html">首页</a></li>
                <li><a href="资料.html">资料</a></li>
                <li><a href="感悟.html">感悟</a></li>
                <li>
                    <a href="诗词.html">诗词</a>
                    <ul>
                        <a href="tangshi.html">唐诗1</a>
                        <a href="tangshi1.html">唐诗2</a>
                        <a href="songci.html">宋词1</a>
                        <a href="songci1.html">宋词2</a>
                        <a href="yuanqu.html">元曲1</a>
                        <a href="yuanqu1.html">元曲2</a>
                    </ul>
                </li>
                <li>
                    <a href="book.html">书籍</a>
                    <ul>
                        <li><a href="book1.html">《杀死一只知更鸟》</a></li>
                        <li><a href="book2.html">《三体之章北海》</a></li>
                        <li><a href="book3.html">《月亮和六便士》</a></li>
                        <li><a href="book4.html">《呼啸山庄》</a></li>
                        <li><a href="book5.html">《稻草人》</a></li>
                        <li><a href="book6.html">《简爱》</a></li>
                        <li><a href="book7.html">《骆驼祥子》</a></li>
                    </ul>
                </li>
                <li><a href="时间显示.html">时间显示</a></li>
                <li><a href="liuyan.html">留言版</a></li>
            </ul>
        </center>
    </div>

    <div class="home">
        <div class="content">
            <img class="bgc" src="../img/tongnian.JPG" width="100%" alt="">
            <h3 class="title">欢迎来到我的个人网站</h3>
            <h3 class="titles">我时常回到童年，用一片童心思考问题，很多烦恼的问题就变得易解。</h3>
        </div>
    </div>
    </div>
</body>

</html>

2.资料

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人资料</title>
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/资料.css">
</head>


<body>

    <div class="top">
        <center>
            <ul>
                <li><a href="首页.html">首页</a></li>
                <li><a href="资料.html">资料</a></li>
                <li><a href="感悟.html">感悟</a></li>
                <li>
                    <a href="诗词.html">诗词</a>
                    <ul>
                        <a href="tangshi.html">唐诗1</a>
                        <a href="tangshi1.html">唐诗2</a>
                        <a href="songci.html">宋词1</a>
                        <a href="songci1.html">宋词2</a>
                        <a href="yuanqu.html">元曲1</a>
                        <a href="yuanqu1.html">元曲2</a>
                    </ul>
                </li>
                <li>
                    <a href="book.html">书籍</a>
                    <ul>
                        <li><a href="book1.html">《杀死一只知更鸟》</a></li>
                        <li><a href="book2.html">《三体之章北海》</a></li>
                        <li><a href="book3.html">《月亮和六便士》</a></li>
                        <li><a href="book4.html">《呼啸山庄》</a></li>
                        <li><a href="book5.html">《稻草人》</a></li>
                        <li><a href="book6.html">《简爱》</a></li>
                        <li><a href="book7.html">《骆驼祥子》</a></li>
                    </ul>
                </li>
                <li><a href="时间显示.html">时间显示</a></li>
                <li><a href="liuyan.html">留言版</a></li>
            </ul>
        </center>
    </div>

    <div class="jianli">
        <!-- 左边 -->
        <div class="left">
            <div class="head"></div>
            <div class="container">
                <image class="ima" src="../img/me.JPG">
                    <span>董晶凡</span>
                </image>
            </div>
            <div class="bottom"></div>
        </div>
        <!-- 右边 -->
        <div class="right">
            <div class="first">
                <span>教育背景/Eudcation</span>
            </div>
            <div class="second">
                <div class="edu">
                    <span>北方工业大学大学信息学院</span>
                    <span>计算机科学与技术/本科</span>
                </div>
                <span>入学时间：2021.9.1</span>
            </div>
            <div class="first">
                <span></span>
                <span>个人介绍/Introduction</span>
            </div>
            <ul class="third">
                <li class="other">姓名：董晶凡</li>
                <li class="other">年龄：19岁</li>
                <li class="other">星座：射手座</li>
                <li class="other">爱好：看电影、阅读、打乒乓球、画画、玩游戏</li>
                <li class="other">性格：因心情而定，偏外向，倾向于交流</li>
                <li class="other">喜欢植物，喜欢动物</li>
                <li class="other">喜欢实践，喜欢计算机编程</li>
                <li class="other">喜欢诗经和汉乐府，因为美好。喜欢魏晋时，不精细，但有力</li>
                <li class="other">喜欢唐诗，唐诗豁达。略喜欢宋词，宋词哀婉。不喜欢元曲，元曲幽怨。</li>
                <li class="other">喜欢安静，但也不介意喧嚣</li>
                <li class="other">喜欢漂亮的女孩子，因为漂亮</li>
                <li class="other">喜欢帅气的男孩子，因为帅气</li>
            </ul>
            <div class="four">
                22/5/20
            </div>
        </div>
</body>

</html>

css

首页

* {
    margin: 0;
    padding: 0;
}

.home {
    height: 100%;
    overflow: hidden;
}

.title {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 80px;
    margin: auto;
    bottom: 0;
    color: #111;
    font-size: 40px;
    font-weight: 500;
}

.titles {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 200px;
    right: 200px;
    top: 150px;
    line-height: 40px;
    margin: auto;
    bottom: 0;
    color: #111;
    font-size: 30px;
    font-weight: 500;
}

js

时间显示

(function() {
    window.onload = initNumXY(200, 160, 40, 40);
    var hour_line = document.getElementById("hour-line");
    var minute_line = document.getElementById("minute-line");
    var second_line = document.getElementById("second-line");
    var date_info = document.getElementById("date-info");
    var week_day = [
        '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
    ];
    var hour_time = document.getElementById("hour-time");
    var minute_time = document.getElementById("minute-time");
    var second_time = document.getElementById("second-time");

    function setTime() {
        var this_day = new Date();
        var hour = (this_day.getHours() >= 12) ?
            (this_day.getHours() - 12) : this_day.getHours();
        var minute = this_day.getMinutes();
        var second = this_day.getSeconds();
        var hour_rotate = (hour * 30 - 90) + (Math.floor(minute / 12) * 6);
        var year = this_day.getFullYear();
        var month = ((this_day.getMonth() + 1) < 10) ?
            "0" + (this_day.getMonth() + 1) : (this_day.getMonth() + 1);
        var date = (this_day.getDate() < 10) ?
            "0" + this_day.getDate() : this_day.getDate();
        var day = this_day.getDay();
        hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
        minute_line.style.transform = 'rotate(' + (minute * 6 - 90) + 'deg)';
        second_line.style.transform = 'rotate(' + (second * 6 - 90) + 'deg)';
        date_info.innerHTML =
            year + "-" + month + "-" + date + " " + week_day[day];
        hour_time.innerHTML = (this_day.getHours() < 10) ?
            "0" + this_day.getHours() : this_day.getHours();
        minute_time.innerHTML = (this_day.getMinutes() < 10) ?
            "0" + this_day.getMinutes() : this_day.getMinutes();
        second_time.innerHTML = (this_day.getSeconds() < 10) ?
            "0" + this_day.getSeconds() : this_day.getSeconds();
    }
    setInterval(setTime, 1000);

    function initNumXY(R, r, w, h) {
        var numXY = [{
            "left": R + 0.5 * r - 0.5 * w,
            "top": R - 0.5 * r * 1.73205 - 0.5 * h
        }, {
            "left": R + 0.5 * r * 1.73205 - 0.5 * w,
            "top": R - 0.5 * r - 0.5 * h
        }, {
            "left": R + r - 0.5 * w,
            "top": R - 0.5 * h
        }, {
            "left": R + 0.5 * r * 1.73205 - 0.5 * w,
            "top": R + 0.5 * r - 0.5 * h
        }, {
            "left": R + 0.5 * r - 0.5 * w,
            "top": R + 0.5 * r * 1.732 - 0.5 * h
        }, {
            "left": R - 0.5 * w,
            "top": R + r - 0.5 * h
        }, {
            "left": R - 0.5 * r - 0.5 * w,
            "top": R + 0.5 * r * 1.732 - 0.5 * h
        }, {
            "left": R - 0.5 * r * 1.73205 - 0.5 * w,
            "top": R + 0.5 * r - 0.5 * h
        }, {
            "left": R - r - 0.5 * w,
            "top": R - 0.5 * h
        }, {
            "left": R - 0.5 * r * 1.73205 - 0.5 * w,
            "top": R - 0.5 * r - 0.5 * h
        }, {
            "left": R - 0.5 * r - 0.5 * w,
            "top": R - 0.5 * r * 1.73205 - 0.5 * h
        }, {
            "left": R - 0.5 * w,
            "top": R - r - 0.5 * h
        }];
        var clock = document.getElementById("clock");
        for (var i = 1; i <= 12; i++) {
            if (i % 3 == 0) {
                clock.innerHTML += "<div class='clock-num em_num'>" + i + "</div>";
            } else {
                clock.innerHTML += "<div class='clock-num'>" + i + "</div>";
            }
        }
        var clock_num = document.getElementsByClassName("clock-num");
        for (var i = 0; i < clock_num.length; i++) {
            clock_num[i].style.left = numXY[i].left + 'px';
            clock_num[i].style.top = numXY[i].top + 'px';
        }
        for (var i = 0; i < 60; i++) {
            clock.innerHTML += "<div class='clock-scale'> " +
                "<div class='scale-hidden'></div>" +
                "<div class='scale-show'></div>" +
                "</div>";
        }
        var scale = document.getElementsByClassName("clock-scale");
        for (var i = 0; i < scale.length; i++) {
            scale[i].style.transform = "rotate(" + (i * 6 - 90) + "deg)";
        }
    }
})();

总结

可以评论找我要源代码哟。还有这个网页设计的成绩是96。

凡人晶

关注

9
点赞
踩
40

收藏

觉得还不错? 一键收藏
27
评论
web前端大作业html+css+js 20页网页设计+二级菜单

web课程总共学了8周，有6周的时间我都在摸鱼。而在最后的两周里，我翻看了csdn上许多博主的文章和网页设计，当时真的是愁眉苦脸，如同热锅上的蚂蚁一般，BBQ了。推荐学习web的网站：w3school 。（https://www.w3school.com.cn/）还有b站上学习的视频：pink老师前端入门教程。如果你也是摸鱼混水来的，比较推荐pink老师。我老师会有验机答疑环节，所以要求你知道基础知识。我当时看这个看了一周，1.5倍速快速刷知识点，在电脑上跟着练习，笔记本上记知识点。今天写下这篇文章是想
复制链接

扫一扫