目录
前言
一、Css源代码
【首页】
【相册】
【视频】
【文字】
【关于】
【首页】
【相册】
【视频】
【文字】
【关于】
三、页面展示
总结
前言
这是我大一下学期的期末作业。发上来给大家参考参考，布局写得比较乱，望大家多给建议。这个网页作业做了首页、相册、视频、文字、关于五个子页面，每个子页面都单独写了一个css。 另外附上b站网页展示链接：https://www.bilibili.com/video/BV1nV411p7gx/
提示：以下是本篇文章正文内容，下面案例可供参考
一、Css源代码
【首页】 .content
{
width:100%;
}
/* 引导按钮 */
/* 固定在最下方的a标签 */
.button
{
position: fixed;
z-index: 9999;;
bottom: 5%;
right:5%;
}
.button ul{
display: flex;
}
.button li
{
border-radius: 50%;
background:black;
opacity: .3;
margin: 0 5px;
height:20px;
width:20px;
color:black;
font-size:14px;
text-align: center;
}
/* banner图 */
.content .banner
{
width: 100%;
position:relative;
overflow: hidden;
}
.content .banner img{
max-width:100%;
}
.content .banner p{
text-align: center;
}
.content .banner p:nth-child(1)
{
position:absolute;
top:50%;
width:100%;
color:#FF9900;
font-size: 80px;
/* border: 1px solid red; */
}
.content .banner p:nth-child(2)
{
position:absolute;
top:48%;
width:100%;
color:#444;;
/* border: 1px solid red; */
}
/* 初心 */
.content .start
{
display: flex;
flex-direction: rows;
background-color:#F8F8F8;
padding-top: 50px;
padding-bottom: 80px;
}
.start h1{
text-align: center;
}
.content .start:hover img{
transition: all 3s ease;
transform: rotate(360deg);
}
/* 将初心界面分成两栏：左边占3份，右边占2份 */
.content .start .left
{
flex: 3;
margin:auto 0px;
color:#FF9900;
/* border: 1px solid red; */
position: relative;
}
.content .start .right
{
flex:2;
}
.content .start .left ul li{
font-size: 18px;
left:40%;
position:relative;
margin-top: 10px;
/* border: 1px solid red; */
}
.content .start .left h1
{
margin:20px;
text-align: center;
}
/* 相册模块 */
.album ul{
display:flex;
justify-content: center;
flex-wrap: wrap;
}
.album ul li
{
margin:10px;
width: 500px;
height:333px;
overflow: hidden;
}
.album ul li img
{
width:500px;
height:333px;
object-fit: cover;/*如果不加这个的话那就会拉伸图片 这个属性就是保持图片的原始比例*/
}
.album ul li img:hover{
transition: all 2s ease;
transform: scale(1.2);
}
/* flex布局大法好，视频调了margin：0 auto;和position都不能居中，最后只好用flex布局，果然一下就好了。 */
.video
{
margin-top:80px;
width: 100%;
background: black;
padding-bottom: 80px;
position: relative;
}
.video .lasa
{
width: 100%;
display: flex;
justify-content: center;
}
.video h1{
color:white;
}
.video .box p:nth-child(3){
color:white;
font-size: 12px;
margin:20px auto;
}
/*这里将视频和相册下的box设置边距，以避免重复代码*/
.box{
padding-top: 80px;
padding-bottom: 50px;
}
.box p,.box h1{text-align: center;}
/* 文字模块 */
.text .recommend
{
display:flex;
justify-content: center;
align-content: start;
padding-bottom: 80px;
}
.text .title{
margin:20px;
padding-top: 20px;
text-align:center;
font-size:18px;
}
.text .content{
line-height:40px;
display:inline-block;
text-indent: 2em;
font-size:16px;
font-weight: 400;
color:#444;}
.text .cite{
text-align: right;
color:#444;
font-size: 14px;
margin-top:20px;
padding: 0 20px;}
.text ul li{
background: #F8F8F8;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
margin: 0 20px;
padding-bottom: 20px;
border-radius: 20px;
}
.text ul{
margin:0 10%;
}
/* 给文字模块加上阴影 */
.text ul li:hover{
box-shadow: 0px 0px 40px rgba(0,0,0,.1);
transform: translate(0,-10px);
transition: all 1s ease;
}
【相册】
.content{
display: flex;
flex-direction: column;
background: #F2F2F2;
}
.content .topbar ul{
display: flex;
border-bottom: 3px solid #444;
padding: 20px 0;
}
.content .topbar li{
padding: 0 40px;
font-size: 18px;
color:#444;
/* border-bottom:2px solid grey; */
}
.content .topbar li:hover{
background: #f9f9f9;
}
.content .item ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* padding-top:20px; */
padding-bottom: 80px;
}
.content .item ul li{
background: white;
height:190px;
width:160px;
display: flex;
margin:20px 30px;
flex-direction:column;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0,0,0,.2);
}
.content .item ul li:hover{
transition:all 2s ease;
transform: translate(0,-30px);
}
.content .item ul li p{
font-size:14px;
color:#444;
margin-top:10px;
margin-left: -30%;
}
.content .item ul li img{
height:140px;
width: 140px;
object-fit: cover;
}
.content .button ul{
display:flex;
flex-direction: row;
align-items: center;
margin:30px 30px;
/* justify-content: center; */
}
.content .button ul li{
width:130px;
height:35px;
line-height: 35px;
text-align: center;
margin:0 10px;
border:1px solid #9c6006;
background:#FF9900;
color:white;
border-radius: 5px;
}
.content .button ul li:nth-child(3){
background:white;
color:black;
border:1px solid grey;
width:100px;
}
.content .button ul li:nth-child(4){
background:white;
color:black;
border:1px solid grey;
width:100px;
}【视频】
这个是基于相册页的修改。
.content{
display: flex;
flex-direction: column;
background: #F2F2F2;
}
.content .topbar ul{
display: flex;
border-bottom: 3px solid #444;
padding: 20px 0;
}
.content .topbar li{
padding: 0 40px;
font-size: 18px;
color:#444;
/* border-bottom:2px solid grey; */
}
.content .topbar li:hover{
background: #f9f9f9;
}
.content .item ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* padding-top:20px; */
padding-bottom: 80px;
}
.content .item ul li{
background: white;
height:140x;
width:190px;
display: flex;
margin:20px 30px;
flex-direction:column;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0,0,0,.2);
}
.content .item ul li:hover{
transition:all 2s ease;
transform: translate(0,-30px);
}
.content .item ul li p{
font-size:14px;
color:#444;
margin-top:10px;
padding-bottom: 10px;
margin-left: -30%;
}
.content .item ul li img{
height:140x;
width:190px;
object-fit: cover;
}
.content .button ul{
display:flex;
flex-direction: row;
align-items: center;
margin:30px 30px;
/* justify-content: center; */
}
.content .button ul li{
width:130px;
height:35px;
line-height: 35px;
text-align: center;
margin:0 10px;
border:1px solid #9c6006;
background:#FF9900;
color:white;
border-radius: 5px;
}
.content .button ul li:nth-child(2){
background:none;
color:#FF9900;
border:1px solid grey;
border:none;
width:100px;
}
【文字】
.wrapper{background: white;}
.box{
display:flex;
margin:0 5%;
flex-direction: rows;
}
.box div{
margin:0 20px;
}
.box .list{
flex:2;
background:black;
padding: 4% 4%;
box-shadow: 0px 0px 40px rgba(0,0,0,.1);
}
.box .list h1{
font-size:30px;
color:#FF9900;
}
.box .list h2{
font-size:14px;
color:#444;
}
.box .list hr{
margin:20px 0;
}
.box .list .item ul li{
font-size:15px;
background: #444;
line-height:48px;
margin: 0 -10%;
padding:0 10px;
font-weight: 700;
opacity: 0.5;
border-bottom: 1px solid #808080;
}
.box .list .item ul li:hover{
transition: all 2s ease;
opacity: 1;
}
.box .list .item ul li:nth-child(){
transition: all 2s ease;
opacity: 1;
}
.box .content{
flex:5;
margin-bottom: 40px;
}
.box .content ul li{
background: #f9f9f9;
padding:40px;
box-shadow: 0px 0px 40px rgba(0,0,0,.1);
}
/* .box .content ul li:hover img{
transform: scale(1.03);
transition: all 1s ease;
}
.box .content ul li:hover h1{
color:#FF9900;
} */
.box .content ul li:hover{
transition: all 2s ease;
border-radius: 50px;
transform: scale(1.03);
}
.box .content ul li img{
width:150px;
height: 225px;
overflow: hidden;
object-fit: cover;
}
.box .content ul li .neirong{
display:flex;
margin:5% 0;
}
.box .content h1{
font-size:20px;
font-weight:bold;
}
.box .content p{
font-size: 14px;
color:#444;
margin:0 10px;
font-weight: 500;
text-indent: 2em;
}
.box .content ul li .other{
background:#808080;
height:2px;
width:100px;
position:relative;
left:45%;
}【关于】
.wrapper .head{
display: flex;
justify-content: center;
}
.wrapper .head li{
background: #f9f9f9;
margin:0 20px;
height:450px;
width:450px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 40px rgba(0,0,0,.1);
}
.wrapper .head li:hover{
transition:all 1s ease;
height: 500px;
transform: translate(0,-5px);
}
.wrapper .head li img{
height: 200px;
width:200px;
border-radius: 50%;
}
.wrapper .head li h5{
color:#444;
margin: 20px;
font-size:20px;
}
.wrapper .head li p{
margin: 10px;
font-size: 18px;
font-weight: 500;
}
.wrapper h1,.wrapper p{
text-align: center;
}
.wrapper .box{
margin: 50px 0;
}【首页】
首页
我 们 的 纪 念
我们一个像夏天一个像秋天，却总能把冬天变成了春天
初 心
- 完成一次作业
- 记录生活
- 学习更多网页知识
《秋日》
主啊，是时候了。夏天盛极一时。
把你的阴影置于日晷上，
让风吹过牧场。
让枝头最后的果实饱满。
再给两天南方的好天气，
催它们成熟，把最后的甘甜压进浓酒。
谁此时没有房子，就不必建造，
谁此时孤独，就永远孤独，
就醒来，读书，写长长的信，
在林荫路上不停地，
徘徊，落叶纷飞。
———里尔克
摘抄
那一年我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云，后来我才知道，生活是个缓慢受锤的过程，人一天天老下去，奢望也一天天消逝，最后变得像挨了锤的牛一样。
可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。
———王小波
《我与地坛》
如果以一天中的时间来对应四季，当然春天是早晨，夏天是中午，秋天是黄昏，冬天是夜晚。如果以乐器来对应四季，我想春天应该是小号，夏天是定音鼓，秋天是大提琴，冬天是圆号和长笛。要是以这园子里的声响来对应四季呢？那么，春天是祭坛上空漂浮着的鸽子的哨音，夏天是冗长的蝉歌和杨树叶子哗啦啦地对蝉歌的取笑，秋天是古殿檐头的风铃响，冬天是啄木鸟随意而空旷的啄木声。
———史铁生
【相册】
相册
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
【视频】
视频
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
湘潭大学CCPC
【文字】
文字
《我与地坛》
假如世界上没有了苦难，世界还能够存在么?要是没有愚钝，机智还有什么光荣呢?要是没了丑陋，漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下，善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾，健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾，但可以相信，那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭，那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋，连愚昧和卑鄙和一切我们所不喜欢的事物和行为，也都可以统统消灭掉，所有的人都一样健康、漂亮、聪慧、高尚，结果会怎样呢?怕是人间的剧目就全要收场了，一个失去差别的世界将是一条死水，是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它，存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里：由谁去充任那些苦难的角色？又有谁去体现这世间的幸福，骄傲和快乐?只好听凭偶然，是没有道理好讲的。 就命运而言，休论公道。 那么，一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路，难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。
《黄金时代》
波哥的小说《黄金时代》最后两段是这么写的：
“陈清扬说她真实的罪孽，是指在清平山上。那时她被架在我的肩上，穿着紧裹住双腿的筒裙，头发低垂下去，直到我的腰际。天上白云匆匆，深山里只有我们两个人。我刚在她屁股上打了两下，打得非常之重，火烧火撩的感觉正在飘散。打过之后我就不管别的事，继续往山上攀登。
陈清扬说，那一刻她感到浑身无力，就瘫软下来，挂在我肩上。那一刻她觉得如春藤绕树，小鸟依人，她再也不想理会别的事，而且在那一瞬间把一切全部遗忘。在那一瞬间她爱上了我，而且这件事永远不能改变。”
《给青年诗人的信》
在你夜深最寂静的时刻问问自己：我必须写吗？你要在自身内挖掘一个深的答复。若是这个答复表示同意，而你也能够以一种坚强、单纯的“我必须”来对答那个严肃的问题，那么，你就根据这个需要去建造你的生活吧；你的生活知道它最寻常最细琐的时刻，都必须是这个创造冲动的标志和证明。然后你接近自然。你要像一个原人似的练习去说你所见、所体验、所爱以及所遗失的事物。不要写爱情诗；先要回避那些太流行、太普通的格式：他们是最难的；因为那里聚有大量好的或是一部分精美的流传下来的作品，从中再表现出自己的特点则需要一种巨大而熟练的力量。所以你要躲开那些普遍的题材，而归依于你自己日常生活呈现给你的事物；你描写你的悲哀与愿望，流逝的思想与对于某一种美的信念——用深幽、寂静、谦虚的真诚描写这一切，用你周围的事物、梦中的图影、回忆中的对象表现自己。如果你觉得你的日常生活很贫乏，你不要抱怨它；还是怨你自己吧，怨你还不够做一个诗人来呼唤生活的宝藏；因为对于创造者没有贫乏，也没有贫瘠不关痛痒的地方。即使你自己是在一座监狱里，狱墙是人世间的喧嚣和你的感官隔离——你不还永远据有你的童年吗，这贵重的富丽的宝藏，回忆的宝库？你望那方面多多用心吧！试行拾捡起过去久以消沉了的动人的往事；你的个性将渐渐固定，你的寂寞将渐渐扩大，成为一所朦胧的住室，别人的喧扰只远远地从旁走过。——如果从这收视反听，从这向自己世界的深处产生出“诗”来，你一定不会再想问别人，这是不是好诗。
……
因为创造者必须自己是一个完整的世界，在自身和自身所连接的自然界里得到一切。
《我与地坛》
假如世界上没有了苦难，世界还能够存在么?要是没有愚钝，机智还有什么光荣呢?要是没了丑陋，漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下，善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾，健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾，但可以相信，那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭，那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋，连愚昧和卑鄙和一切我们所不喜欢的事物和行为，也都可以统统消灭掉，所有的人都一样健康、漂亮、聪慧、高尚，结果会怎样呢?怕是人间的剧目就全要收场了，一个失去差别的世界将是一条死水，是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它，存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里：由谁去充任那些苦难的角色？又有谁去体现这世间的幸福，骄傲和快乐?只好听凭偶然，是没有道理好讲的。 就命运而言，休论公道。 那么，一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路，难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。
《我与地坛》
假如世界上没有了苦难，世界还能够存在么?要是没有愚钝，机智还有什么光荣呢?要是没了丑陋，漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下，善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾，健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾，但可以相信，那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭，那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋，连愚昧和卑鄙和一切我们所不喜欢的事物和行为，也都可以统统消灭掉，所有的人都一样健康、漂亮、聪慧、高尚，结果会怎样呢?怕是人间的剧目就全要收场了，一个失去差别的世界将是一条死水，是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它，存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里：由谁去充任那些苦难的角色？又有谁去体现这世间的幸福，骄傲和快乐?只好听凭偶然，是没有道理好讲的。 就命运而言，休论公道。 那么，一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路，难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。
《我与地坛》
假如世界上没有了苦难，世界还能够存在么?要是没有愚钝，机智还有什么光荣呢?要是没了丑陋，漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下，善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾，健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾，但可以相信，那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭，那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋，连愚昧和卑鄙和一切我们所不喜欢的事物和行为，也都可以统统消灭掉，所有的人都一样健康、漂亮、聪慧、高尚，结果会怎样呢?怕是人间的剧目就全要收场了，一个失去差别的世界将是一条死水，是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它，存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里：由谁去充任那些苦难的角色？又有谁去体现这世间的幸福，骄傲和快乐?只好听凭偶然，是没有道理好讲的。 就命运而言，休论公道。 那么，一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路，难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。
《我与地坛》
假如世界上没有了苦难，世界还能够存在么?要是没有愚钝，机智还有什么光荣呢?要是没了丑陋，漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下，善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾，健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾，但可以相信，那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭，那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋，连愚昧和卑鄙和一切我们所不喜欢的事物和行为，也都可以统统消灭掉，所有的人都一样健康、漂亮、聪慧、高尚，结果会怎样呢?怕是人间的剧目就全要收场了，一个失去差别的世界将是一条死水，是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它，存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里：由谁去充任那些苦难的角色？又有谁去体现这世间的幸福，骄傲和快乐?只好听凭偶然，是没有道理好讲的。 就命运而言，休论公道。 那么，一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路，难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。
【关于】
这个页面做得比较简单，因为没有多少时间了。
关于
关于
罗小四
人的一泓清泉里不能没有月光。
朱秀玲
天真永不消逝，浪漫至死不渝。
/* 导航模块 */
/*让导航栏变成flex布局*/
.nav ul{
display: flex;
line-height:80px;
}
.nav ul li{
font-weight:500;
font-size:18px;
margin:0 8px;
}
/* .nav ul li a{
border-right:1px solid white;
padding-right:8px;
} */
.nav ul li:nth-child(1){
margin-left: 20px;
margin-right: auto;
}
/* 去除左右两边的边缘线
.nav ul li:nth-child(1) a{border:none;}
.nav ul li:nth-child(6) a{border:none;} */
/*导航栏的文字效果*/
.nav ul li:hover a{
background:white;
color:black;
}
/* 底部模块 */
.foot{
height: 100px;
background: black;
display: flex;
flex-direction: column;
justify-content: center;
}
.foot p{
color:#444;
font-size:12px;
text-align: center;
}
.foot ul{
display: flex;
justify-content: center;
padding-bottom: 10px;
}
.foot ul li{
margin0 10px;
}
.foot ul li a{
padding-right: 8px;
color:gray;
}
.nav{
height:80px;
background-color:black;
}
三、页面展示
总结
收获颇多，主要采用的flex布局，最后一个关于的界面在某些电脑上展示比较怪..不知道怎么修正，望给以指点！谢谢~
.JPG)
.JPG)
.JPG)
.JPG)
.JPG)
.JPG)
.JPG)
.JPG)
.JPG)
.jpg)
.jpg)
