<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柴润城自我介绍</title>
<style>
body {
margin: 0;
padding: 0;
background: url(lantian.jpg) no-repeat;
background-size: cover;
}
.box4 {
color: rgb(6, 173, 151);
width: 450px;
background: rgba(0, 0, 0, 0.4);
padding: 130px;
text-align: center;
margin: auto;
margin-top: 5%;
font-family: 'Century Gothic', sans-serif;
}
.box4 .box-img {
width: 200px;
height: 200px;
border-radius: 50%;
}
.box4 h1 {
font-size: 50px;
letter-spacing: 4px;
font-weight: 400;
}
.box4 h2 {
font-size: 30px;
letter-spacing: 3px;
font-weight: 300;
}
.one {
text-decoration: none;
font-size: 20px;
font-weight: 600;
color: grey;
}
.one:hover {
color: rgb(6, 173, 151);
}
</style>
</head>
<body>
<div class="box4">
<img src="geren.jpg" alt="" class="box-img">
<h1 class="name">柴润城</h1>
<h2>College student of Baoding University</h2>
<h3>Welcome to my personal introduction</h3>
<h3>如果你想走进我的世界，请点击GO</h3>
<a href="#div1" class="one">GO</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>个人介绍</title>
<link rel="stylesheet" href="css.css">
<style>
body {
margin: 0;
padding: 0;
background: url(shenghuo/s6.jpg) no-repeat;
background-size: cover;
}
.box2 {
color: rgb(6, 173, 151);
width: 800px;
background: rgba(225,255,255, 0.4);
padding: 40px;
text-align: center;
margin: auto;
margin-top: 5%;
font-family: 'Century Gothic', sans-serif;
font-size: 25px;
}
</style>
<style type="text/css">
li,ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.box .list {
width: 600%;
height: 100%;
position: absolute;
}
img {
width: 100%;
height: 100%;
}
.left,
.right {
width: 20px;
height: 20px;
position: absolute;
opacity: 0.5;
}
.left {
top: 105px;
}
.right {
right: 0px;
top: 105px;
}
.right:hover {
opacity: 1;
}
.left:hover {
opacity: 1;
}
.dotts {
position: absolute;
bottom: 20px;
left: 220px;
}
li {
width: 614px;
height: 100%;
float: left;
}
.dotts li {
width: 8px;
height: 8px;
background-color: skyblue;
border-radius: 50%;
float: left;
margin-left: 20px;
box-sizing: border-box;
opacity: 0.5;
}
.dot.active {
border: 1px solid gray;
opacity: 1;
}
.dot:hover {
border: 1px solid gray;
opacity: 1;
}
.wen {
font-size: 30px;
color: #fff;
}
</style>
//鼠标显示图片
<style>
.box_1 a {
text-decoration: none;
font-size: 14px;
color: burlywood;
}
.box_1 a:hover {
text-decoration: none;
}
.box_1 img {
display: none;
width: 800px;
height: 800px;
position: relative;
/*如果大盒子不想被撑开高或者图片位置不是想要的位置，就给定位子绝父相，*/
left: 0;
top: 30px;
}
.box_1 a:hover>img {
/*鼠标放在a上图片显示*/
display: block;
}
</style>
<style>
.box_2 a {
text-decoration: none;
font-size: 14px;
color: burlywood;
}
.box_2 a:hover {
text-decoration: none;
}
.box_2 img {
display: none;
width: 800px;
height: 400px;
position: relative;
/*如果大盒子不想被撑开高或者图片位置不是想要的位置，就给定位子绝父相，*/
left: 0;
top: 30px;
}
.box_2 a:hover>img {
/*鼠标放在a上图片显示*/
display: block;
}
</style>
</head>
<body>
<div class="box1">
<div class="header">
<!-- <div class="transbox">-->
<!-- <h1>个人简介</h1>-->
<div class="box2">
<h2>Welcome to my personal introduction</h2>
</div>
<!-- </div>-->
<div class="nav">
</div>
</div>
<div class="con">
<div class="conbox">
<div class="xinxi">
<div id="div1"> </div>
<ul1>
<p><h2>个人信息 </h2></p>
<p>姓名：柴润城</p>
<p>学号:2011054102</p>
<p>家乡：张家口市蔚县</p>
<p>学校：保定学院</p>
<p>学院：人工智能学院</p>
</ul1>
<img src="shenghuo/s5.jpeg" alt="" class="you">
</div>
<div class="box_1">
<a href="#">
<span>想知道更多，把手放到这里吧！</span>
<img src="xiangxi.png" alt="">
</a>
</div>
<div class="ptxt">
<p> 获奖情况:<br>
2021年9月 河北省创新创业大赛暨第四届辛集市“创新创业大赛三等奖<b
动态网页-个人介绍-精美设计
需积分: 8 118 浏览量
2022-11-07
13:15:39
上传
评论
收藏 24.6MB ZIP 举报
动态网站.zip （23个子文件） 
2011054102柴润城 sheng 
h4.png 192KB h2.png 268KB h3.png 380KB h1.png 213KB
xian.mp4 9.12MB shenghuo 
s7.jpg 2.07MB s6.jpg 3.93MB
s3.jpeg 223KB s1.jpeg 241KB s4.jpeg 127KB s5.jpeg 324KB s2.jpeg 273KB s8.jpeg 298KB jiang j4.jpg 2.3MB j5.jpg 520KB j6.jpg 3.25MB j1.jpg 199KB j3.jpg 296KB j2.jpg 381KB xiangxi.png 614KB
详细介绍.html 15KB css.css 2KB geren.jpg 25KB资源评论
