今天完成了html个人博客的网页设置，

截图

 

 

 

 

 

 

 

 

 

 

代码如下：

主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <style tape="text/css">

    *{
        margin: 0;
        padding: 0;
    }

    #head{
        
        background: url("C:/Users/bai/Desktop/image/006.gif");
        background-repeat: no-repeat;
        background-size:100% ;
        /*background: none repeat scroll 0 rgb(52, 47, 54);*/
        height:200px;
        overflow: hidden;
        text-align: center;
        opacity: 0.8;/*透明度*/

    }
    #head h1{
        margin-top:50px;
        font-size: 50px;
        font-family:方正姚体;
        font-color:black;
    }
    #head h1:hover{
        color:violet;
    }

    #left{
        background: url("C:/Users/bai/Desktop/image/left(1).png");
        background-repeat: no-repeat;
        background-size: 600px,600px;
        /*background: none repeat scroll 0 0 #F38611;*/
        height: 800px;
        width:600px;
        float: left;
        overflow: hidden;
        opacity: 0.8;
        text-align: center;
        font-size: 30px;
        
    }
    #left ul{
        margin-top:100px; 
    }
    #left li{
        letter-spacing: 5px;
        line-height: 80px;
    }
    a{
        text-decoration: none;
        background: #ccc;
        border-radius: 10px;
    }
    a:hover{
        color:#FF1662;
    }
    #right{
        background: url("C:/Users/bai/Desktop/image/024.png");
        background-repeat: no-repeat;
        background-size: 100%;
        height: 800px;
        width:1303px;
        float: left;
        overflow: hidden;
    }
    #iframe{
        height: 800px;
        width:1303px;

    }
    button{
        background: #ccc;
        border-radius: 10px;
        height: 45px;
        letter-spacing: 5px;
        font-size: 30px; 
        color:black;    
        border:blue;

    }
    .tuichu{
        list-style: none;
    }
    button:hover{
        color:white;
        background:dodgerblue;

    }

    </style>



</head>
<body>

    <div id="head">
        <audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"src="C:\Users\bai\Music\周深 - 大鱼.mp3"></audio>
        <h1>欢 迎 来 到 我 的 博 客</h1>
        
    </div>

    <div id="left">

        <ul>
            <li><a href="file:///C:/Users/bai/Desktop/%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5.html" target="frame" >个人主页</a></li>
            <li><a href="file:///C:/Users/bai/Desktop/%E5%85%B4%E8%B6%A3%E7%88%B1%E5%A5%BD.html" target="frame">兴趣爱好</a></li>
            <li><a href="file:///C:/Users/bai/Desktop/%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.html" target="frame">联系方式</a></li>
            <li><a href="file:///C:/Users/bai/Desktop/%E7%95%99%E8%A8%80.html" target="frame">留言</a></li>
        </ul>
        <div class="tuichu">
            <li ><button type="button" name="close" value="" onclick="window.close();" />退出网页</button></li>
        </div>
        
    </div>

    <div id="right">
        
        <iframe    id="iframe"  name="frame"   scrolling="yes"  frameborder="1" >
            

        </iframe> 
        
    </div>
    
</body>
</html>

个人主页页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘柏的个人主页</title>
    <style type="text/css">
    body{
        background: url("C:/Users/bai/Desktop/image/背景图(2).png");
        background-repeat: no-repeat;
        background-size: 1403px,800px;
    }
    #title{
        text-align: center;
        font-family: 华文彩云;
        font-size: 30px;

    }
    #title h2:hover{
        color:#F15648;
    }
    #neirong{
        
        font-size: 20px;
        font-weight: bold;

    }
    li{
        margin-top: 50px;
        letter-spacing: 5px;/*字体间距*/
        list-style: none;
        line-height: 80px;

    }
    li:hover{
        color:#FF2580;
        font-size: 30px;
    }
    a{
        text-decoration: none;
        color:orange;
        font-style: italic;/*设置倾斜字体*/
    }


    </style>


</head>
<body>
    <div id="title">

    <h2>个 人 主 页</h2>
    </div>

    <div id="neirong">    
        <ul>
            <li>姓名：刘柏</li>
            <li>学校：<a href="https://www.stdu.edu.cn/" target="_blank">石家庄铁道大学</a></li>
            <li>院系：软件工程</li>
            <li>我的博客园网址：<a href="https://www.cnblogs.com/liubaiii/">https://www.cnblogs.com/liubaiii/</a></li>
            <li></li>
        </ul>

    </div>
</body>
</html>

联系方式页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘柏的联系方式</title>
    <style type="text/css">
    body{
        background: url("C:/Users/bai/Desktop/image/008.gif");
        background-repeat: no-repeat;
        background-size: 1350px,600px;
        opacity: 0.9;
    }

    #title{
        text-align: center;
        color: dodgerblue;
        font-family: 华文行楷;
        letter-spacing: 10px;


    }
    #title h2:hover{
        color: #F25497
    }
    h2{
        font-size: 50px;


    }
    #content{
        font-size: 30px;
        color:#F35809;
    }
    #content li{
        margin: 40px;
        line-height: 80px;
        letter-spacing: 5px;
        
    }
    li:hover{
        color:#FF2645;
        font-size: 40px;

    }
    a{
        text-decoration: none;
    }


    </style>


</head>
<body>
    <div id ="title" >
        <h2>联系方式</h2>
    </div>
    <div id="content">
        <ul>
            <li><a href="https://www.qq.com/" target="_blank">QQ</a>：577277331</li>
            <li><a href="https://wx.qq.com/" target="_blank">微信</a>：A577277331</li>
            <li><a href="https://mail.qq.com/" target="_blank">QQ邮箱</a>：577277331@qq.com</li>
            <li>手机号码：15665916652</li>
        </ul>

    </div>



    
</body>
</html>

兴趣爱好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘柏的兴趣爱好</title>
    <style type="text/css">
    body{
        background: url("C:/Users/bai/Desktop/image/025.png") ;
        background-repeat: no-repeat;
        background-size: 1450px,600px;
        opacity: 0.8;

    }
    #title{
        text-align: center;
        font-family: 华文隶书;
        margin-top: 40px;
        font-size: 35px;
        color:rgb(255, 165, 0);

    }
    #title h2:hover {
        color:rgb(238, 130, 238);
    }
    #content{
        font-size: 25px;
        margin: 50px
    }
    #content li{
        list-style: none;
        line-height:45px;
        color:black;

    }
    #content li:hover{
        color:#FF2580;
    }


    </style>

</head>
<body>
    <div id="title">
        <h2>兴趣爱好：游泳</h2>
    </div>
    <div id="content">
        <ul>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在父母的培养下，我从小学起我就学会了游泳，蛙泳，仰泳等等，我们都知道，游泳的好处有很多,如下：</li>
            <li>1.游泳是一种健康的运    ，皮肤和水接触的越多，你的皮肤自然就会越细腻，永远可以使身体的呼吸更多的氧气，而且对肺部有很大的好处，值得我们健身运动。</li>
            <li>2.游泳是一种十分均衡的运动项目，游泳比起器械健身要更加的舒适，而且会使我们的身材更匀称，线条更好看，这点大家可以看看我们国家的游泳运动就明白了。</li>
            <li>3.游泳对身体各个器官有很好的养护作用，特别是对一些身体有伤势的人好处最大，游泳可以使你恢复身体的伤病，其实道理很简单，这是因为水的浮力和压力作用。</li>
            <li>4.游泳的时候大家可以感觉的游一会就很累，这是因为水的压力阻力很大，可以想到的是游泳对于消耗脂肪有很好的作用，也可以强健我们的肌肉，另外游泳的时候比常温更冷，这样可以增加脂肪的消耗。</li>
            

        </ul>
        
    </div>
    
</body>
</html>

留言板网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言</title>
    <style type="text/css">
    body{
        background: url("C:/Users/bai/Desktop/image/image/013.png");
        background-repeat: no-repeat;
        background-size: 1303px,800px;
        letter-spacing: 8px;
        line-height: 30px
    }
    #title{
        text-align: center;
        margin-top:60px;      
    }
    h2{
        font-family: 华文行楷;
        font-size: 35px;

    }
    h2:hover{
        color:#FF3690;
    }
    .name{
        margin-left: 50px;
        margin-top: 60px
    }
    .lianxi{
        margin-left: 50px;
    }
    .zhuti{
        margin-left: 50px;
    }
    .neirong{
        margin-left: 50px;
    }
    .anniu{
        margin-left: 150px;
        margin-top: 18px;
        letter-spacing: 70px;
    }
    .tijiao{
        border-radius:8px;
        
    }
    .chongzhi{
        border-radius:8px;
    }
    .tijiao:hover{
        background-color:dodgerblue;
        color:white;
    }
    .chongzhi:hover{
        background-color:dodgerblue;
        color:white;
    }
    
    input{
        letter-spacing: 3px;
        font-size: 15px;
    }


    </style>

</head>
<body>
    <form action="">
    <div id="title">
        <h2>在线留言</h2>
        
    </div>
    <div id="content">
        
        
        <div class="name"><label for="">姓名</label><br>
            <input type="text" name="uesrname" size="50px" placeholder="请输入姓名"></div>
    
        <div class="lianxi"><label for="">联系方式</label><br>
            <select name="lianxi" id="">
            <option value="0">请选择</option>
            <option value="1">电话</option>
            <option value="2">QQ</option>
            <option value="3">QQ邮箱</option>
            </select>&nbsp;<input type="text" size="39px" placeholder="请输入联系方式"></div>

        <div class="zhuti">    
            <label for="">主题</label><br>
            <input type="text" name="主题" placeholder="留言主题" size="50px">
        </div>
        <div class="neirong">
            <label for="">留言内容</label><br>
            <textarea name="" id="" cols="60" rows="13" placeholder="请输入留言内容"></textarea>
        </div>

        <div class="anniu">
                            <input type="submit" class="tijiao" value="提交"></button>
                            <input type="reset" class="chongzhi" value="重置"></button>
                    </div>

        
    </div>
    </form>
    
</body>
</html>