目录

前言

一、Css源代码

【首页】

【相册】

【视频】

【文字】

【关于】

二、html文件+导航+foot区的css源代码

【首页】

【相册】

【视频】

【文字】

【关于】

【导航栏+foot底部的css源代码】

三、页面展示

 总结


前言

这是我大一下学期的期末作业。发上来给大家参考参考,布局写得比较乱,望大家多给建议。这个网页作业做了首页、相册、视频、文字、关于五个子页面,每个子页面都单独写了一个css。另外附上b站网页展示链接:https://www.bilibili.com/video/BV1nV411p7gx/

大一下学期网页期末作业展示(纯css+html)


提示:以下是本篇文章正文内容,下面案例可供参考

一、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;
}

二、html文件+导航+foot区的css源代码

【首页】

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>首页</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="css/Home.css">
        <link rel="stylesheet" href="css/foot.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
       <div class="wrapper">
        <div class="button">
            <ul>
                <li><a href="#banner">1</a></li>
                <li><a href="#start">2</a></li>
                <li><a href="#album">3</a></li>
                <li><a href="#video">4</a></li>
                <li><a href="#text">5</a></li>
                <li><a href="#about">6</a></li>
                
            </ul>
        </div>
        <audio src="audio/cannon.mp3" autoplay="autoplay"></audio>
        <div class="nav">
            <!-- <img src="img/img (13).JPG" width=20px/> -->
            <ul>
                <li><a href="#"><img src="img/work.png"width="40px" style="padding-top:20px;"></a>|</li>
                <li><a href="Home.html">首页</a></li>
                <li><a href="Album.html">相册</a></li>
                <li><a href="Video.html">视频</a></li>
                <li><a href="Text.html">文字</a></li>
                <li><a href="About.html">关于</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="banner" id="banner"> 
                <p>我 们 的 纪 念</p>
                <p>我们一个像夏天一个像秋天,却总能把冬天变成了春天</p>
                <img src="img/pic03.jpg"/>
            </div>
            <div class="start" id="start">
               <div class="left">
                    <h1>初 心</h1>
                    <ul>
                        <li>- 完成一次作业</li>
                        <li>- 记录生活</li>
                        <li>- 学习更多网页知识</li>
                    </ul>
               </div>
               <div class="right">
                    <img src="img/work.png" width="400px"/>
               </div>
            </div>
            <div class="album" id="album">
                <div class="box">
                    <h1>相 册</h1>
                    <p>记录美好生活</p>
                </div>
                <ul>
                    <li><img src="img/life (2).JPG"></li>
                    <li><img src="img/life (3).JPG"></li>
                    <li><img src="img/life (4).JPG"></li>
                    <li><img src="img/life (6).JPG"></li>
                    <li><img src="img/img (9).JPG"></li>
                    <li><img src="img/img (10).JPG"></li>
                    <li><img src="img/img (12).JPG"></li>
                    <li><img src="img/img (13).JPG"></li>
                </ul>
            </div>
            <div class="video" id="video">
                <div class="box">
                    <h1>视 频</h1>
                    <p>留得住的才叫回忆</p>
                </div>
                <div class="lasa">
                    <video src="video/video.MP4"  controls="controls">您的浏览器不支持视频</video>
                </div>
            </div>
            <div class="text" id="text">
                <div class="box">
                    <h1>文 字</h1>
                    <p>流淌在字里行间的岁月</p>
                </div>
                <ul class="recommend">
                    <li>
                        <h1 class="title">《秋日》</h1>
                        <p class="content">
                            主啊,是时候了。夏天盛极一时。

                            把你的阴影置于日晷上,
                            
                            让风吹过牧场。
                            
                            让枝头最后的果实饱满。
                            
                            再给两天南方的好天气,
                            
                            催它们成熟,把最后的甘甜压进浓酒。
                            
                            谁此时没有房子,就不必建造,
                            
                            谁此时孤独,就永远孤独,
                            
                            就醒来,读书,写长长的信,
                            
                            在林荫路上不停地,
                            
                            徘徊,落叶纷飞。</p>
                        <p class="cite">———里尔克</p>
                    </li>
                    <li>
                        <h1 class="title">摘抄</h1>
                        <p class="content">那一年我二十一岁,在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云,后来我才知道,生活是个缓慢受锤的过程,人一天天老下去,奢望也一天天消逝,最后变得像挨了锤的牛一样。
 可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去,什么也锤不了我。</p>
                        <p class="cite">———王小波</p>
                    </li>
                    <li>
                        <h1 class="title">《我与地坛》</h1>
                        <p class="content">如果以一天中的时间来对应四季,当然春天是早晨,夏天是中午,秋天是黄昏,冬天是夜晚。如果以乐器来对应四季,我想春天应该是小号,夏天是定音鼓,秋天是大提琴,冬天是圆号和长笛。要是以这园子里的声响来对应四季呢?那么,春天是祭坛上空漂浮着的鸽子的哨音,夏天是冗长的蝉歌和杨树叶子哗啦啦地对蝉歌的取笑,秋天是古殿檐头的风铃响,冬天是啄木鸟随意而空旷的啄木声。</p>
                        <p class="cite">———史铁生</p>
                    </li>
                </ul>
            </div>
            </div>
            <div class="about" id="about"></div>
        </div>
        <div class="foot">
            <p><img src="img/work.png" width="20px"> </p>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Qzone</a></li>
                <li><a href="#">Weibo</a></li>
                <li><a href="#">NetEase</a></li>
                <li><a href="#">Bilili</a></li>
            </ul>
            <p>@2020.All Right Resoverd GoldenRose.com</p>
        </div>
       </div>
    </body>
</html>

【相册】

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>相册</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="css/Album.css">
        <link rel="stylesheet" href="css/foot.css">
        <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
       <div class="wrapper">
        <audio src="audio/cannon.mp3" autoplay="autoplay"></audio>
        <div class="nav">
            <!-- <img src="img/img (13).JPG" width=20px/> -->
            <ul>
                <li><a href="#"><img src="img/work.png"width="40px" style="padding-top:20px;"></a>|</li>
                <li><a href="Home.html">首页</a></li>
                <li><a href="Album.html">相册</a></li>
                <li><a href="Video.html">视频</a></li>
                <li><a href="Text.html">文字</a></li>
                <li><a href="About.html">关于</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="topbar">
                <ul>
                    <li>相册</li>
                    <li>照片</li>
                    <li>视频</li>
                </ul>
            </div>
            <div class="button">
                <ul>
                    <li>上传照片</li>
                    <li>上传视频</li>
                    <li>创建相册</li>
                    <li>展示设置</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="foot">
            <p><img src="img/work.png" width="20px"> </p>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Qzone</a></li>
                <li><a href="#">Weibo</a></li>
                <li><a href="#">NetEase</a></li>
                <li><a href="#">Bilili</a></li>
            </ul>
            <p>@2020.All Right Resoverd GoldenRose.com</p>
        </div>
       </div>
    </body>
</html>

【视频】

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>视频</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="css/Video.css">
        <link rel="stylesheet" href="css/foot.css">
        <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
       <div class="wrapper">
        <audio src="audio/cannon.mp3" autoplay="autoplay"></audio>
        <div class="nav">
            <!-- <img src="img/img (13).JPG" width=20px/> -->
            <ul>
                <li><a href="#"><img src="img/work.png"width="40px" style="padding-top:20px;"></a>|</li>
                <li><a href="Home.html">首页</a></li>
                <li><a href="Album.html">相册</a></li>
                <li><a href="Video.html">视频</a></li>
                <li><a href="Text.html">文字</a></li>
                <li><a href="About.html">关于</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="topbar">
                <ul>
                    <li>相册</li>
                    <li>照片</li>
                    <li>视频</li>
                </ul>
            </div>
            <div class="button">
                <ul>
                    <li>上传视频</li>
                    <li>大视频上传</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                    <li>
                        <img src="img/img (19).JPG">
                        <p>湘潭大学CCPC</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="foot">
            <p><img src="img/work.png" width="20px"> </p>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Qzone</a></li>
                <li><a href="#">Weibo</a></li>
                <li><a href="#">NetEase</a></li>
                <li><a href="#">Bilili</a></li>
            </ul>
            <p>@2020.All Right Resoverd GoldenRose.com</p>
        </div>
       </div>
    </body>
</html>

【文字】

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>文字</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="css/Text.css">
        <link rel="stylesheet" href="css/foot.css">
        <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
       <div class="wrapper">
        <audio src="audio/cannon.mp3" autoplay="autoplay"></audio>
        <div class="nav">
            <!-- <img src="img/img (13).JPG" width=20px/> -->
            <ul>
                <li><a href="#"><img src="img/work.png"width="40px" style="padding-top:20px;"></a>|</li>
                <li><a href="Home.html">首页</a></li>
                <li><a href="Album.html">相册</a></li>
                <li><a href="Video.html">视频</a></li>
                <li><a href="Text.html">文字</a></li>
                <li><a href="About.html">关于</a></li>
            </ul>
        </div>
        <div class="box">
            <div class="list">
                <h1>目录</h1>
                <h2>Content</h2>
                <hr>
                <div class="item">
                    <ul>
                        <li><a href="#wydt">《我与地坛》</a></li>
                        <li><a href="#hjsd">《黄金时代》</a></li>
                        <li><a href="#gqnsrdx">《给青年诗人的信》</a></li>
                        <li><a href="#">《张晓风散文集》</a></li>
                        <li><a href="#">《周国平哲理散文集》</a></li>
                        <li><a href="#">《朱自清散文集》</a></li>
                        <li><a href="#">《小王子》</a></li>
                        <li><a href="#">《活着》</a></li>
                    </ul>
                </div>

            </div>
            <div class="content">
                <ul>
                    <li id="wydt">
                    <h1 class="title">《我与地坛》</h1>
                    <hr>
                    <div class="neirong">
                        <img src="img/book.jpg">
                        <p class="content"> 假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。 </p>
                    </div>
                    <div class="other"></div>
                </li>
                <li id="hjsd">
                    <h1 class="title">《黄金时代》</h1>
                    <hr>
                    <div class="neirong">
                        <img src="img/book(2).jpg">
                        <p class="content"> 波哥的小说《黄金时代》最后两段是这么写的:

                            “陈清扬说她真实的罪孽,是指在清平山上。那时她被架在我的肩上,穿着紧裹住双腿的筒裙,头发低垂下去,直到我的腰际。天上白云匆匆,深山里只有我们两个人。我刚在她屁股上打了两下,打得非常之重,火烧火撩的感觉正在飘散。打过之后我就不管别的事,继续往山上攀登。
                            
                            陈清扬说,那一刻她感到浑身无力,就瘫软下来,挂在我肩上。那一刻她觉得如春藤绕树,小鸟依人,她再也不想理会别的事,而且在那一瞬间把一切全部遗忘。在那一瞬间她爱上了我,而且这件事永远不能改变。” </p>
                    </div>
                    <div class="other"></div>
                </li>
                <li id="gqnsrdx">
                    <h1 class="title">《给青年诗人的信》</h1>
                    <hr>
                    <div class="neirong">
                        <img src="img/book(3).jpg">
                        <p class="content"> 在你夜深最寂静的时刻问问自己:我必须写吗?你要在自身内挖掘一个深的答复。若是这个答复表示同意,而你也能够以一种坚强、单纯的“我必须”来对答那个严肃的问题,那么,你就根据这个需要去建造你的生活吧;你的生活知道它最寻常最细琐的时刻,都必须是这个创造冲动的标志和证明。然后你接近自然。你要像一个原人似的练习去说你所见、所体验、所爱以及所遗失的事物。不要写爱情诗;先要回避那些太流行、太普通的格式:他们是最难的;因为那里聚有大量好的或是一部分精美的流传下来的作品,从中再表现出自己的特点则需要一种巨大而熟练的力量。所以你要躲开那些普遍的题材,而归依于你自己日常生活呈现给你的事物;你描写你的悲哀与愿望,流逝的思想与对于某一种美的信念——用深幽、寂静、谦虚的真诚描写这一切,用你周围的事物、梦中的图影、回忆中的对象表现自己。如果你觉得你的日常生活很贫乏,你不要抱怨它;还是怨你自己吧,怨你还不够做一个诗人来呼唤生活的宝藏;因为对于创造者没有贫乏,也没有贫瘠不关痛痒的地方。即使你自己是在一座监狱里,狱墙是人世间的喧嚣和你的感官隔离——你不还永远据有你的童年吗,这贵重的富丽的宝藏,回忆的宝库?你望那方面多多用心吧!试行拾捡起过去久以消沉了的动人的往事;你的个性将渐渐固定,你的寂寞将渐渐扩大,成为一所朦胧的住室,别人的喧扰只远远地从旁走过。——如果从这收视反听,从这向自己世界的深处产生出“诗”来,你一定不会再想问别人,这是不是好诗。
                            ……
                            因为创造者必须自己是一个完整的世界,在自身和自身所连接的自然界里得到一切。</p>
                    </div>
                    <div class="other"></div>
                </li>
                <li id="woyuditan">
                    <h1 class="title">《我与地坛》</h1>
                    <hr>
                    <div class="neirong">
                        <img src="img/book.jpg">
                        <p class="content"> 假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。 </p>
                    </div>
                    <div class="other"></div>
                </li>
                <li id="woyuditan">
                    <h1 class="title">《我与地坛》</h1>
                    <hr>
                    <div class="neirong">
                        <img src="img/book.jpg">
                        <p class="content"> 假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。 </p>
                    </div>
                    <div class="other"></div>
                </li>
                <li id="woyuditan">
                    <h1 class="title">《我与地坛》</h1>
                    <hr>
                    <div class="neirong">
                        <img src="img/book.jpg">
                        <p class="content"> 假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。 </p>
                    </div>
                    <div class="other"></div>
                </li>
                <li id="woyuditan">
                    <h1 class="title">《我与地坛》</h1>
                    <hr>
                    <div class="neirong">
                        <img src="img/book.jpg">
                        <p class="content"> 假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。 </p>
                    </div>
                    <div class="other"></div>
                </li>
                </ul>
            </div>
        </div>
        <div class="foot">
            <p><img src="img/work.png" width="20px"> </p>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Qzone</a></li>
                <li><a href="#">Weibo</a></li>
                <li><a href="#">NetEase</a></li>
                <li><a href="#">Bilili</a></li>
            </ul>
            <p>@2020.All Right Resoverd GoldenRose.com</p>
        </div>
       </div>
    </body>
</html>

【关于】

这个页面做得比较简单,因为没有多少时间了。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>关于</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="css/About.css">
        <link rel="stylesheet" href="css/foot.css">
        <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
       <div class="section">
        <audio src="audio/cannon.mp3" autoplay="autoplay"></audio>
        <div class="nav">
            <!-- <img src="img/img (13).JPG" width=20px/> -->
            <ul>
                <li><a href="#"><img src="img/work.png"width="40px" style="padding-top:20px;"></a>|</li>
                <li><a href="Home.html">首页</a></li>
                <li><a href="Album.html">相册</a></li>
                <li><a href="Video.html">视频</a></li>
                <li><a href="Text.html">文字</a></li>
                <li><a href="About.html">关于</a></li>
            </ul>
        </div>
        <div class="wrapper">
           <div class="box">
                <h1>关于</h1>
           </div>
            <ul class="head">
                <li>
                    <img src="img/with1.jpg" />
                    <h5>罗小四</h5>
                    <p>人的一泓清泉里不能没有月光。</p>
                 </li>
                 <li>
                    <img src="img/with2.jpg" />
                    <h5>朱秀玲</h5>
                    <p>天真永不消逝,浪漫至死不渝。</p>
                 </li>
            </ul>
        </div>
        <div class="foot">
            <p><img src="img/work.png" width="20px"> </p>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Qzone</a></li>
                <li><a href="#">Weibo</a></li>
                <li><a href="#">NetEase</a></li>
                <li><a href="#">Bilili</a></li>
            </ul>
            <p>@2020.All Right Resoverd GoldenRose.com</p>
        </div>
       </div>
    </body>
</html>

【导航栏+foot底部的css源代码】

/* 导航模块 */
/*让导航栏变成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布局,最后一个关于的界面在某些电脑上展示比较怪..不知道怎么修正,望给以指点!谢谢~

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐