一个简单的个人网页

最新推荐文章于 2024-03-05 17:39:07 发布

「已注销」

最新推荐文章于 2024-03-05 17:39:07 发布

阅读量4.6k

点赞数 11

文章标签： HTML CSS 网页个人主页

本文链接：https://blog.csdn.net/qq_42073370/article/details/88650154

版权

动态滑动，使用时将图片、.css以及.html文件均放置在Web文件夹下。

背景图片和头像的萌妹图可以自己选择。

当然我的背景图是美美的紫金港。

也可以去这个链接下载整个文件夹：https://download.csdn.net/download/qq_42073370/11034000

Web.html

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

<head>
	<meta charset="UTF-8">
	<title>Kyfafyd's Homepage</title>
	<style>
    html,
    body {
        height: 100%;
        margin: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-image: url(../Web/background.jpg);//文件位置，也就是说图片、.css以及.html文件均在Web文件夹下
    }

    h1{
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        color:#fff;
        background-color: rgba(0,0,0,0.5);
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    </style>
	<link rel="stylesheet" href="Web.css">
</head>

<body text="white">
<h1 id="start" align="center">Welcome to my personal homepage!</h1>

<h2>I. Personal Profile</h2>
<img src="../Web/person.jpg" width="150px" height="150px">

<ol>
	<li>Name: Kyfafyd</li>
	<a href="http://www.zju.edu.cn" target="_blank"><li>School: Zhejiang University</li></a>
	<a href="http://www.isee.zju.edu.cn" target="_blank"><li>College: School of Information and Electronic Engineering</li></a>
	<li>Phone: 233666555</li>
	<a href="mailto:Kyfafyd@zju.edu.cn"><li>Email:Kyfafyd@zju.edu.cn</li></a>
	<li>Address: Lantian</li>
</ol><hr>

<h2>II. Class Schedule</h2>
<table border="1" cellspacing="0">
	<tr>
		<td width="76"> </td>
		<td width="86" height="50"> </td>
		<td width="100">Monday</td>
		<td width="100">Tuesday</td>
		<td width="100">Wednesday</td>
		<td width="100">Thursday</td>
		<td width="100">Friday</td>
		<td width="100">Saturday</td>
		<td width="108">Sunday</td>
	</tr>
	<tr>
		<td rowspan="5">Mroning</td>
		<td>1</td>
		<td rowspan="2"></td>
		<td rowspan="2">Digital system design</td>
		<td rowspan="2">Signals and Systems</td>
		<td rowspan="2">Python Programming</td>
		<td rowspan="2">Calculation Method</td>
		<td rowspan="2"></td>
		<td rowspan="2"></td>
	</tr>
	<tr>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td rowspan="3">Semiconductor physics and devices</td>
		<td rowspan="3">Ping-pong </td>
		<td rowspan="3">Computer Cryptography</td>
		<td rowspan="3">Digital system design</td>
		<td rowspan="3">Linear Algebra</td>
		<td rowspan="3"></td>
		<td rowspan="3"></td>
	</tr>
	<tr>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
	</tr>
	<tr>
		<td colspan="10" align="center"><b>Lunch Break</b></td>
	</tr>
	<tr>
		<td rowspan="5">Afternoon</td>
		<td>6</td>
		<td rowspan="3">Signals and Systems</td>
		<td rowspan="3">Python Programming</td>
		<td rowspan="3">Thermal basis</td>
		<td rowspan="3">Electronic circuit design experiment</td>
		<td rowspan="3"></td>
		<td rowspan="3"> </td>
		<td rowspan="3"> </td>
	</tr>
	<tr>
		<td>7</td>
	</tr>
	<tr>
		<td>8</td>
	</tr>
	<tr>
		<td>9</td>
		<td rowspan="2">Introduction to Bioinformatics</td>
		<td rowspan="2"></td>
		<td rowspan="2">Linear Algebra</td>
		<td rowspan="2">Digital system design experiment</td>
		<td rowspan="2"></td>
		<td rowspan="2"></td>
		<td rowspan="2"></td>
	</tr>
	<tr>
		<td>10</td>
	</tr>
	<tr>
		<td colspan="10" align="center"><b>Night Break</b></td>
	</tr>
	<tr>
		<td rowspan="3">Night</td>
		<td>11</td>
		<td rowspan="3">Introduction to Bioinformatics</td>
		<td rowspan="3">Calculation Method</td>
		<td rowspan="3">Introduction to the basic principles of Marxism</td>
		<td rowspan="3"></td>
		<td rowspan="3"></td>
		<td rowspan="3"></td>
		<td rowspan="3"></td>
	</tr>
	<tr>
		<td>12</td>
	</tr>
	<tr>
		<td>13</td>
	</tr>
</table><hr>

<p>&copy;copyright Kyfafyd@ZJU,ISEE</p>
</body>

</html>

Web.css

body{
    background-size:1450px 900px;
}

a{
	text-decoration:none;
	color:white;
}

td
{
    text-align:center;
}

background.jpg

person.jpg

「已注销」

关注

11
点赞
踩
47

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫