期末大作业Html+CSS个人网站制作
苦瓜大王的小甜甜
已于 2023-06-07 22:32:01 修改
阅读量6.6k
收藏
197
点赞数
34
已于 2023-06-07 22:32:01 修改
阅读量6.6k
收藏
197
点赞数
34
于 2023-06-07 22:24:04 首次发布
- 要求制作完整的小型个人网站，内容结构的合理布局，不错位；所涉及内容围绕主题展开，主题鲜明，页面内无设置错误，运行流畅，网页内容积极健康。
- 首页以index.html命名（不能改成其他名字），首页需显示制作者的详细基本信息（班级、姓名、QQ或邮箱等联系方式）。首页必须有至少一张图片为作者本人图片（最好正面，不要背面）。主页导航条上文本信息必须有超链接，并且至少设置两个超链接能正确跳转到两个子页（二级页面）其中一个页面必须制作包含表单的页面。其余子页内容不做特殊要求，最好是有列表、表格等。
- 导航栏要求必须有为首页 、相册、日志、留言板这四项信息。
- 网页上的文字、图片、表单、div、表格、列表、超链接等元素不变形，不错位。
- 网站采用div+css样式布局或采用模板方式制作均可，首页和子页风格要统一、美观大方，图片使用得当，色彩协调，布局合理。
要准备好背景图片（在photoshop里面弄也行，在网上找素材）
封面
封面CSS
* {
margin: 0;
padding: 0
}
.home {
height: 100%;
overflow: hidden;
width: 100%;
position: relative;
}
body{
background: #999;
text-align: center;
color: #333;
background-color: #60a179;
background-image: url(../img/back2.jpg);/*提前编辑好一张图片*/
}
.bgc{
height: 573px;
width: 1010px;
}
span {
display: block;
text-align: center;
}
.footer{
clear: both;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
width: 1010px;
height: 18px;
line-height: 18px;
background-color: #363533;
color: #faf8eb;
text-align: center;
font-size: 12px;
}
.title {
position: absolute;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 80px;
margin: auto;
bottom: 0;
color: #fff;
font-size: 38px;
font-weight: 500;
}
.titles {
position: absolute;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 130px;
margin: auto;
bottom: 0;
color: #fff;
font-size: 26px;
font-weight: 500;
}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 85px;
top: 46px;
margin: auto;
}
.ribbon span {
background: #fff;
display: inline-block;
line-height: 1.5em;
padding: 0 1em;
margin-top: 0.5em;
position: relative;
letter-spacing: .2rem;
}
.ribbon a:hover span {
background: #c6bce1;
margin-top: 0;
font-size: 1rem;
}封面HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>封面</title>
<link rel="stylesheet" type="text/css" href="css/title.css"/>
</head>
<body>
<div class="home">
<img class="bgc" src="img/back4.jpg" width="100%" alt="">
<h3 class="title">Welcome to My Personal Website.</h3>
<h3 class="titles">欢迎来到我的个人网站</h3>
<!--返回首页-->
<div class='ribbon'>
<a href="index.html"><span>首页</span></a>
</div>
<div class="footer">
<p>Copyright © 2022. All Rights Reserved.xxx 版权所有 2022年12月26日</p>
</div>
</div>
</body>
</html> 首页
首页CSS
/*整体框架*/
*{
margin:0;
padding:0;
box-sizing: border-box;
outline: none;
border:none;
text-decoration: none;
text-transform: capitalize;
line-height: 1.5;
font-size: 16px;
}
body{
background:#999;
text-align:center;
color: #333;
background-image: url(../img/back1.jpg);
height: 573px;
}
a{
text-decoration: none;
color: #333;
}
li{
list-style: none;
}
ul li{
list-style: none;
}
h1{
float: left;
}
p{
font-size: 15px;
color: #000000;
text-align: left;
}
p:not(.in){
font-size: 24px;
color: #000000;
text-align: center;
}
/*main 基本信息*/
#mainbg{
margin-right: auto;
margin-left: auto;
width:1010px;
padding: 0px;
background: #60A179;
float:none;
background-color: #F2F3F7;
height: 415px;
}
.top{
height: 140px;
line-height: 140px;
border-image: url(../img/top3.jpg) ;
}
.top img{
height: 140px;
width: 1010px;
}
/*right 个人资料与简介*/
section{
padding:0;
min-height: 100vh;
}
.right .row-1{
display: flex;
flex-wrap: wrap;
gap:0.5rem;
padding-bottom: 2rem;
}
.right .row-1 .image{
flex:0.25 0.5 7rem;
}
.right .row-1 .image img{
box-shadow: 3px 3px 3px rgba(0,0,0,5);
margin-top: 10px;
height: 85%;
width:60%;
object-fit: cover;
border-radius: 5px;
}
.right .row-1 .box p{
color:#333366;
font-size: 15px;
padding:.5rem 0;
text-align: left;
}
.right .row-1 .box{
flex:0.5 1 20px;
}
.right .row-1 .box span{
font-size: 18px;
color:#006666;
}
/*left 导航栏*/
.left{
float: left;
height: 415px;
line-height: 415px;
margin-right: 8px;
border-right: 2px dashed black;
margin: 2px 2px 2px 2px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:center;
}
.left li{
line-height: 35px;
text-align: center;
margin: 10px 0;
font-size: 15px;
color:#fff;
margin:1rem 0;
}
}
.left li:hover{
background-color: #9b8d9e;
}
.left li a:hover{
color: #c9b6bc;
letter-spacing: .5rem;
}
.left a{
display: block;
width: 200px;
height: 65px;
font-size: 18px;
color: #330033;
}
/*版权信息*/
.footer p{
clear: both;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
width: 1010px;
height: 22px;
line-height: 18px;
background-color: #363533;
color: #faf8eb;
text-align: center;
font-size: 8px;
}首页HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!--顶部图片-->
<div class="top">
<img src="img/top3.jpg" />
</div>
<!--基本信息与导航栏-->
<div id="mainbg">
<!--左侧导航栏 列表-->
<div class="left">
<ul>
<li><a href="title.html">封面<span>></span></a></li>
<li><a href="album.html">相册<span>></span></a></li>
<li><a href="###">日志<span>></span></a></li>
<li><a href="leave word.html">留言板<span>></span></a></li>
</ul>
</div>
<!--右侧个人简介 表格-->
<section class="right" id="right">
<div class="row-1">
<div class="image">
<img src="img/###.jpg" alt="">
</div>
<div class="box">
<p> <span> 班级: </span> 计算机一班 </p>
<p> <span> 姓名 : </span> xxx </p>
<p> <span> 性别 : </span> 女 </p>
<p> <span> 学院 : </span> 互联网学院 </p>
</div>
<div class="box">
<p> <span> 专业 : </span> 计算机</p>
<p> <span> 电话 : </span> ******** </p>
<p> <span> QQ : </span> ******** </p>
<p> <span> 学校 : </span> xxxxxxxx </p>
</div>
</div>
<hr />
<p>个人简介</p>
<p class="in"> 学习生活上，时间安排妥当。在学习上，上课认真听讲，下课巩固落实已为常态。日常生活中，可以和班级同学和睦相处，同宿舍的其乐融融。虽然各自的生活习性不同，但我们互相理解与迁就，因此我们交流与生活都很舒适。</p>
<p class="in"> 大学xxxxxxxxxxxxxxxxx。</p>
<p class="in"> 大学之中，有很多时间去丰富自己，也尽力抓住一切机会去充实和提高自己。</p>
</section>
</div>
<div class="footer">
<p>Copyright © 2022. All Rights Reserved.xxx 版权所有 2022年12月26日</p>
</div>
</body>
</html>相册
（文字旁边都有图片，图片自己添加）
相册CSS
.home {
height: 100%;
overflow: hidden;
}
body{
background: #999;
text-align: center;
color: #333;
background-color: #a9b091;
}
.top{
height: 120px;
line-height: 120px;
border-image: url(../img/album.jpg);
}
.top img{
height: 120px;
width: 1010px;
}
/*图片与文字描述*/
.inter {
display: flex;
flex-direction: column;
}
.inter_item {
display: flex;
justify-content: center;
margin-top: 80px;
}
.inter_item_img {
cursor: pointer;
transition: all border-left-color;.6s
width: 450px;
height: 350px;
}
.inter_item_img:hover{
transform: scale(1.3);
}
.inter_item_title {
width: 300px;
font-size: 20px;
line-height: 36px;
align-self: center;
padding-left: 100px;
text-align: left;
}
.inter_item_titles {
width: 300px;
font-size: 20px;
line-height: 36px;
align-self:center;
padding-right: 100px;
text-align: left;
}
span {
display: block;
text-align: center;
}
/*返回首页按钮*/
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 25px;
top: 130px;
margin: auto;
}
.ribbon span {
background: #fff;
display: inline-block;
line-height: 2em;
padding: 0 1.25em;
margin-top: 0.5em;
position: relative;
letter-spacing: .2rem;
}
.ribbon a:hover span {
background: #c6bce1;
margin-top: 0;
font-size: 1rem;
}
/*版权所有*/
.footer{
clear: both;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
width: 1010px;
height: 18px;
line-height: 18px;
background-color: #363533;
color: #faf8eb;
text-align: center;
font-size: 12px;
}相册HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相册</title>
<link rel="stylesheet" type="text/css" href="css/album.css" />
</head>
<body>
<!--顶部图片-->
<div class="top">
<img src="img/album.jpg" />
</div>
<!--返回首页-->
<div class='ribbon'>
<a href="index.html"><span><< 返回首页</span></a>
</div>
<div class="home">
<div class="inter">
<div class="inter_item">
<img class="inter_item_img" src="img/comic.jpg" alt="" />
<span class="inter_item_title"> 经过自己的谨慎思考与老师的提醒，网络运维、网络组建与MySQL作业有条不紊的被完成。松了一口气。看着自己几周来的成果总是很开心，也没想到自己会完成的这么顺利，当然也会有不顺利的时候，但是也通过各种渠道解决了。我的作品不是最好的，但是对于我来说很不错了。</span>
</div>
<div class="inter_item">
<span class="inter_item_titles"> 很喜欢毛茸茸的小动物。小仓鼠叫“瓜子”，。</span>
<img class="inter_item_img" src="img/###.jpg" alt="">
</div>
<div class="inter_item">
<img class="inter_item_img" src="img/###.jpg" alt="">
<span class="inter_item_title"> 说起为什么要学书法，为什么要练字，不同的人会有不同的见解，有些人会说：书法是中华传统文化精髓，我辈要继承下去、练字有益身心健康、练字可以增加文化修养等等，这些诚然是我们练字的动力，但我觉得兴趣是最好的老师，热爱才是永恒的力。</span>
</div>
<div class="inter_item">
<span class="inter_item_titles"> 动漫里面的环境太舒适了，没有空气污染、声音污染、水资源污染等等（说笑的），给我一种舒适的感觉。动漫拥有的华丽背景，给了我视觉盛宴。迷人且递进的剧情，悬疑的、惊悚的甚至治愈的都有很惊艳的效果。有强大的主角一路的开挂，精彩的故事以及真挚的友谊，不会变质的恋情和出人意料的性格反差。很多是真人电视剧里没办法呈现的。</span>
<img class="inter_item_img" src="img/###.jpg" alt="">
</div>
</div>
<div class="footer">
<p>Copyright © 2022. All Rights Reserved.xxx 版权所有 2022年12月26日</p>
</div>
</div>
</body>
</html>
留言板
留言板CSS
.home {
height: 100%;
overflow: hidden;
}
body{
background: #999;
text-align: center;
color: #333;
background-color: #a9b091;
}
.top{
height: 120px;
line-height: 120px;
border-image: url(../top3.jpg) ;
}
.top img{
height: 120px;
width: 1010px;
}
#mainbg{
margin-right: auto;
margin-left: auto;
width:1010px;
padding: 0px;
background: #60A179;
float:none;
background-color: #999999;
height: 405px;
}
/*返回首页按钮*/
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 25px;
top: 130px;
margin: auto;
}
.ribbon a:hover{
color: #f0f0f0;
letter-spacing: .2rem;
}
.ribbon a:hover span {
background: #c6bce1;
margin-top: 0;
font-size: 1rem;
}
/*留言区样式*/
label{
text-align: left;
font-size: 18px;
}
.first{
background-color: #f0f0f0;
padding-bottom: 15px;
height: 405px;
width: 1010px;
}
.second{
background-color: #fefffa;
width: 90%;
margin: 25px auto;
border-radius: 15px;
padding-top: 30px;
padding-left: 35px;
height: 385px;
}
.third{
text-align: center;
width: 90%;
}
.one{
width: 182px;
text-align:center;
padding-right: 10px;
font-size: 15px;
}
.two{
width: 300px;
text-align: center;
padding-right: 20px;
}
.name{
width: 170px;
height: 18px;
line-height: 18px;
background-color: #e2e2e4;
border-radius: 5px;
color: #2f2e3e;
}
.tdall{
float:left;
width: 170px;
height: 20px;
line-height: 20px;
background-color: #f0f0f0;
border-radius: 5px;
border: #cccccc 1px solid;
font-size: 14px;
}
textarea{
width: 90%;
height: 256px;
font-size: 20px;
}
input{
background-color:#018e98;
border-radius: 5px;
font-size: 15px;
color: #faf8eb;
}
input:hover{
background: #e2e2e4;
margin-top: 10;
font-size: 1rem;
color:#2f2e3e ;
}
/*版权所有*/
.footer{
clear: both;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
width: 1010px;
height: 18px;
line-height: 18px;
background-color: #363533;
color: #faf8eb;
text-align: center;
font-size: 12px;
}留言板HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet" type="text/css" href="css/leave word.css" />
</head>
<body>
<!--顶部图片-->
<div class="top">
<img src="img/speaker.jpg" />
</div>
<!--返回首页-->
<div id="mainbg">
<div class='ribbon'>
<a href="index.html"><span><< 返回首页</span></a>
</div>
<!--留言板表格表单-->
<div class="first">
<div class="second">
<form>
<table>
<thead>
<tr>
<th width="10%"></th>
<th width="25%"></th>
<th width="10%"></th>
</tr>
</thead>
<tr>
<td class="one">
<label for="id">方式 ：</label>
</td>
<td>
<select id="id" class="tdall">
<option value="##"> </option>
<option value="ming">姓名</option>
<option value="ni">匿名</option>
<option value="qni">昵称</option>
</select>
</td>
<td class="two">
<label for="name">姓名 :</label>
</td>
<td>
<input type="text" id="name" class="name" />
</td>
<td class="one">
<label for="relation"> 关系 ：</label>
</td>
<td>
<select id="relation" class="tdall">
<option value="##"> </option>
<option value="jia">家人</option>
<option value="peng">朋友</option>
<option value="tong">同学</option>
<option value="shi">师生</option>
<option value="colle">同事</option>
<option value="other">...</option>
</select>
</td>
</tr>
</table>
<!--留言区-->
<table>
<tr>
<td class="one" colspan="2">
<label for="word">留言区（随意字数就可，都欢迎留言！）</label>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="word" cols="600" rows="200"></textarea>
</td>
</tr>
</table>
<div class="third">
<input type="submit" value="告诉她吧" />
<input type="reset" value="晚会儿说" />
</div>
</div>
</div>
</form>
</div>
<div class="footer">
<p>Copyright © 2022. All Rights Reserved.xxx 版权所有 2022年12月26日</p>
</div>
</body>
</html>
1843
暂无认证
到【灌水乐园】发言
苦瓜大王的小甜甜: 直接就照抄就行啦，只要你的那些文件啥的名字和我一样就可以运行的
2401_85619822: 看不懂怎么弄啊，好烦
苦瓜大王的小甜甜: 比心比心✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu
2301_82081534: 爱你 苦瓜姐姐
苦瓜大王的小甜甜: 名字对应对了吗