个人网页（HTML+css）

L.lzl

已于 2023-03-27 14:24:11 修改

阅读量3.8k

点赞数 10

分类专栏：前端文章标签： css html 前端 Powered by 金山文档

于 2023-03-27 14:16:49 首次发布

本文链接：https://blog.csdn.net/weixin_46153254/article/details/129794216

版权

前端专栏收录该内容

5 篇文章 42 订阅

订阅专栏

这个是一个简单的个人网页，图片什么的都是网上找的，都可以自己替换的哦。下面是网页的效果图。

主页

这个是个人简介页面

这个是个人相册页面，照片都是可以旋转会动的哦

这个是音乐界面，都是可以听的哦

这个是留言界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>个人网站</title>
        <style>
            * { 
                /* CSS样式重置 */
                margin:0; 
                padding:0;
            }

            body {
                background:url("other/image/14.jpg") 0 0 repeat;
                padding:35px 0 0;
                margin:auto;
                text-align:center;
            }

            .ribbon {
                display:inline-block;
            }

            .ribbon:after, .ribbon:before {
                margin-top:0.5em;
                content: "";
                float:left;
                border:1.5em solid #E6E6FA;
            }

            .ribbon:after {
                border-right-color:transparent;
            }

            .ribbon:before {
                border-left-color:transparent;
            }

            .ribbon a:link, .ribbon a:visited { 
                color:#000;
                text-decoration:none;
                float:left;
                height:3.5em;
                overflow:hidden;
            }

            .ribbon span {
                background:#E6E6FA;
                display:inline-block;
                line-height:3em;
                padding:0 1em;
                margin-top:0.5em;
                position:relative;

                -webkit-transition: background-color 0.2s, margin-top 0.2s; 
                -moz-transition: background-color 0.2s, margin-top 0.2s;  
                -ms-transition: background-color 0.2s, margin-top 0.2s; 
                -o-transition: background-color 0.2s, margin-top 0.2s; 
                transition: background-color 0.2s, margin-top 0.2s;
            }

            .ribbon a:hover span {
                background:#FFD204;
                margin-top:0;
            }

            .ribbon span:before {
                content: "";
                position:absolute;
                top:3em;
                left:0;
                border-right:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;
            }

            .ribbon span:after {
                content: "";
                position:absolute;
                top:3em;
                right:0;
                border-left:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;
            }
            .bdh{
                width:900px;
                height:600px;
                margin:10px auto;
                border:1px solid #fff;
                background: url("other/image/17.jpg");
                background-size:100% 100%;
                border-radius: 50% 50%;
            }
            .bd{
                width:400px;
                height:400px;
                margin:120px auto;
                text-align: left;
                position:relative;    
            }
            p{
                font-family: "隶书";
                font-size:30px;
                top:150px;
            }
            .footer {
                height: 40px;
                line-height: 40px;
                position: relative;
                bottom: 0;
                width: 100%;
                text-align: center;
                color: #000;
                font-family: Arial;
                font-size: 20px;
                letter-spacing: 1px;
            }
        </style>
    </head>
    <body>
        <div class='ribbon'>
            <a href='other/introduce.html'><span>个人简介</span></a>
            <a href='other/photowall.html'><span>个人相册</span></a>
            <a href='other/music.html'><span>酷音乐吧</span></a>
            <a href='other/messageboard.html'><span>有事留言</span></a>
        </div>

        <div class="bdh">
            <div class="bd">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;我们总羡慕别人的幸福，却常常忽略自己生活中的美好。其实，幸福很平凡也很简单，它就藏在看似琐碎的生活中。幸福的人，并非拿到了世界上最好的东西，而是珍惜了生命中的点点滴滴，<span style="color:black">用感恩的心态看待生活，用乐观的态度闯过磨难。</span></p>
            </div>
            </div>

        <div class="footer">
            © XXX 版权所有 
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>
    
    <meta charset="UTF-8">
    
    <title>有事留言</title>
    
    <link rel="stylesheet" href="css/messageboard.css" media="screen" type="text/css" />

</head>


<body>
     
    <input class="button" name="Submit " type="submit" value="返回" onclick="javascript:history.back()" />
     
    <form>
          
        <input name="name" placeholder="请留下您的姓名......" class="name" required />
          
        <input name="emailaddress" placeholder="请留下您的邮件地址......" class="email" type="email" required />
        
        <textarea rows="4" cols="50" name="subject" placeholder="请留言......" class="message" required></textarea>
        
        <input name="submit" class="btn" type="submit" value="发送" />
      
    </form>

</body>

</html>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>酷音乐吧</title>
        <link rel="stylesheet" href="css/music.css">
    </head>
    <body>
        <input class="button" name="Submit " type="submit" value="返回" onclick="javascript:history.back()" />
        <div class="top">酷&nbsp;&nbsp;音&nbsp;&nbsp;乐&nbsp;&nbsp;吧</div>
        
        <div class="wrapper">
            <div id="player">
                <audio controls id="audio" src="./content/songs/na_ge.mp3">!Audio Not Support :(</audio>
            </div>
            <div id="playlist">
                <ol>
                    <li>
                        <a href="javascript:void(0);" data-name="那年初夏">那年初夏 - 任然</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-name="过去">过去-于文文</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-name="老街">老街-李荣浩</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-name="讲真的">讲真的-曾惜</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-name="知足">知足-胡夏</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-name="安和桥">安和桥-宇西</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-name="羞答答的玫瑰静悄悄地开">羞答答的玫瑰静悄悄地开-胡夏</a>
                    </li>
                </ol>
            </div>
            <!--歌词存放盒-->
            <div id="lyricWrapper">
                <div id="lyricContainer"></div>
            </div>
        </div>
        <script src="js/music.js"></script>
    </body>
</html>

以上是一部分代码哦，有兴趣的有问题需要解答小伙伴可以留言评论哈，我都会看的