文章目录
前言
web课程总共学了8周，有6周的时间我都在摸鱼。而在最后的两周里，我翻看了csdn上许多博主的文章和网页设计，当时真的是愁眉苦脸，如同热锅上的蚂蚁一般，BBQ了。
推荐学习web的网站：w3school 。（https://www.w3school.com.cn/）
还有b站上学习的视频：pink老师前端入门教程。
如果你也是摸鱼混水来的，比较推荐pink老师。我老师会有验机答疑环节，所以要求你知道基础知识。我当时看这个看了一周，1.5倍速快速刷知识点，在电脑上跟着练习，笔记本上记知识点。
今天写下这篇文章是想帮助到其他同学。也是想让自己有个教训，一而再，再而三，拖到最后，只会害了自己啊。
最最重要的一点：我借鉴了这个博主（id：秋千水竹马道）的内容（当然没有人家做的好看啦，我就是个渣渣），如果有什么不对的地方，请私聊我嗷。
一、我的界面
给大家分享图片看一下我的界面吧
首页
- 个人资料
- 感悟
- 精美片段欣赏
(1) 唐诗
① 《全唐诗》是汇集唐代诗歌的总集 全书共九百卷。
② 李白《黄鹤楼送孟浩然之广陵》
（2）.宋词
① 李清照《声声慢 寻寻觅觅》
② 欧阳修《醉翁亭记》
（3）.元曲
① 张养浩《山坡羊 潼关怀古》
② 张可久《卖花声 怀古》
- 书籍
-
友情链接
-
时间显示
- 留言板
二、代码
html
1.首页
代码如下（示例）：
欢迎来到我的个人网站
欢迎来到我的个人网站
我时常回到童年，用一片童心思考问题，很多烦恼的问题就变得易解。
2.资料
代码如下（示例）：
我的个人资料
教育背景/Eudcation
北方工业大学大学信息学院
计算机科学与技术/本科
入学时间：2021.9.1
个人介绍/Introduction
- 姓名：董晶凡
- 年龄：19岁
- 星座：射手座
- 爱好：看电影、阅读、打乒乓球、画画、玩游戏
- 性格：因心情而定，偏外向，倾向于交流
- 喜欢植物，喜欢动物
- 喜欢实践，喜欢计算机编程
- 喜欢诗经和汉乐府，因为美好。喜欢魏晋时，不精细，但有力
- 喜欢唐诗，唐诗豁达。略喜欢宋词，宋词哀婉。不喜欢元曲，元曲幽怨。
- 喜欢安静，但也不介意喧嚣
- 喜欢漂亮的女孩子，因为漂亮
- 喜欢帅气的男孩子，因为帅气
22/5/20
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 += "" + i + "";
} else {
clock.innerHTML += "" + i + "";
}
}
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 += " " +
"" +
"" +
"";
}
var scale = document.getElementsByClassName("clock-scale");
for (var i = 0; i < scale.length; i++) {
scale[i].style.transform = "rotate(" + (i * 6 - 90) + "deg)";
}
}
})();
总结
可以评论找我要源代码哟。还有这个网页设计的成绩是96。
