html个人网页 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客网页</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .zong {
        width: 1515px;
        height: 800px;
        background-image: url("F:\image/yijing.jpg");
        background-position: -900px -100px;
    }

    li{
        float: left;
        list-style: none;
        margin-top: 55px;

    }
    li a{
        text-decoration: none;
    }


    #a{
        margin-left: 15px;
    }
    #b{
        margin-left: 55px;
    }
    #c{
        margin-left: 55px;
    }
    #d{
        margin-left: 55px;
    }
    #e{
        margin-left: 55px;
    }
    .js{
        font-size: 20px;
        font-family: cursive;
        color: orange;
        position: absolute;
        top:100px;
        left: auto;
        
    }
    .sb h1{
        font-size: 30px;
    }
    .sb{
        line-height: 50px;
        position: absolute;
        top:200px;
        left: auto;
    }
    .sb a{
        text-decoration: none;
    }
    .touxiang{
        position: absolute;
        top:50px;
        left: 1350px;
    }
    .touxiang img{
        width: 100px;
        height: 100px;
    }
    .music{
        
        position: absolute;
        top:150px;
        left: 1200px;
    }
    </style>
</head>
<body>
    <div id="all"class="zong">
        <ul>
            <li id="a"><a href="F:\刘丹作业\1/陈嘉程-实验一.html">首页</a></li>
            <li id="b"><a href="F:\刘丹作业\1/suibi.html">心情随笔</a></li>
            <li id="c"><a href="F:\刘丹作业\1/shuji.html">书籍推荐</a></li>
            <li id="d"><a href="F:\刘丹作业\1/bizhi.html">壁纸屋</a></li>
            <li id="e"><a href="F:\刘丹作业\1/myself.html">关于我</a></li>
        </ul>
    </div>
<div id="jieshao" class="js">
    <p>姓名：....</p>
    <p>学校：石家庄铁道大学</p>
    <p>地址：河北省石家庄市长安区</p>
    <p>爱好：游戏，漫画，和人交朋友</p>
</div>
<div class="sb">
    <h1>心情随笔</h1>
    <a href="suibi.html">这一年，谢谢爱我的人！</a><br>
    <a href="suibi2.html">愿岁月可回首，且以深情共余生</a><br>
    <a href="suibi3.html">不怪时间太瘦指间太宽</a><br>
    <a href="suibi4.html">地球是一个宾馆</a><br>
    <p>随心，记录，美好生活</p>
</div>
    <div class="touxiang">
        <img src="F:\image/lbxx.jpg" alt="头像">
    </div>
<div class="music">
    
    <p>这里有放松的音乐哦~~~~</p>
    <audio controls src="F:\newpower\Adobe Premiere Pro Auto-Save/1.mp3">
        <code>audio</code>
    </audio>
    
</div>
</body>
</html>

 

posted @ 2022-06-08 19:47  橙大力  阅读(97)  评论(0)    收藏  举报