前言
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。