每周总结1

html网页设计

1,html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘浩铮的个人博客网页</title>
</head>
<style type="text/css">
    body{
        background:url("../img/boke.jpg");
        background-size: cover;

    }
    #main{
        text-align:center;
        margin-top: 30%;
    }
    #h1{
        text-align:center;
        margin-top: 10%;
    }
</style>
<body>

    <div id="h1">
    <h1>刘浩铮的个人博客</h1>
    </div>
    <div id="main">
    <a href="实验一_2.html" target="_blank">关于我</a>  
        <a href="实验一_3.html" target="_blank">修改密码</a>  
        <a href="实验一_4.html" target="_blank">添加新随笔</a>
</div>
    <audio src="../img/b.mp3" controls autoplay></audio>
</body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息填写</title>
</head>
<style type="text/css">
    *  {margin:0;padding:0;}/*去掉页面样式*/
    body{color:white;}
    .content{
        text-align:center;/*文本居中*/
        background-color:yellow;
        left:0;
        width:100%;
        height:100%;
        margin-top:0px;
        overflow:hidden;/*隐藏滚动条*/
    }
    form{
        padding:20px 0;
    }
    form input{
        border-style: inset;
        display:block;
        margin:0px auto 10px auto;/*上 右  下 左*/
        padding:10px;
        width:220px;
        border-radius:30px;/*H5设置圆角边框*/
        font-size:18px;
        font-weight:300;
        text-align:center;
    }
    form button{
        align:center;
        background-color:gainsboro;
        border-radius:10px;
        border-style: outset;
        height:30px;
        width:50px;
        padding:5px 10px;
    }
</style>
<body>
<div class="content">
    <form action="实验一_1.html" method="post">
        <input type="text" name="1" placeholder="请输入姓名"/>
        <input type="text" name="2" placeholder="请输入年龄">
        <input type="text" name="3" placeholder="请输入地址">
        <input type="text" name="4" placeholder="请输入身份">
        <input type="text" name="5" placeholder="请输入邮箱">
        <button  id="asd" >提&nbsp;&nbsp;交</button>
    </form>

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

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
</head>
<style type="text/css">
    *  {margin:0;padding:0;}/*去掉页面样式*/
    body{color:white;}
    .content{
        text-align:center;/*文本居中*/
        background-color:yellow;
        left:0;
        width:100%;
        height:100%;
        margin-top:0px;
        overflow:hidden;/*隐藏滚动条*/
    }
    form{
        padding:20px 0;
    }
    form input{
        border-style: inset;
        display:block;
        margin:0px auto 10px auto;/*上 右  下 左*/
        padding:10px;
        width:220px;
        border-radius:30px;/*H5设置圆角边框*/
        font-size:18px;
        font-weight:300;
        text-align:center;
    }
    form button{
        align:center;
        background-color:gainsboro;
        border-radius:10px;
        border-style: outset;
        height:30px;
        width:50px;
        padding:5px 10px;
    }
</style>
<body>
<div class="content">
    <form action="实验一_1.html" method="post">
        <input type="text" name="1" placeholder="请输入旧密码"/>
        <input type="text" name="2" placeholder="请输入新密码">
        <input type="text" name="3" placeholder="确认新密码">
        <button>提&nbsp;&nbsp;交</button>
    </form>

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

4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加新随笔</title>
</head>
<style type="text/css">
    *  {margin:0;padding:0;}/*去掉页面样式*/
    .content{
        text-align:center;/*文本居中*/
        background-color:yellow;
        left:0;
        width:100%;
        height:100%;
        margin-top:0px;
        overflow:hidden;/*隐藏滚动条*/
    }
    form{
        padding:20px 0;
    }
    form input{
        border-style: inset;
        display:block;
        margin:0px auto 10px auto;/*上 右  下 左*/
        padding:10px;
        width:220px;
        border-radius:30px;/*H5设置圆角边框*/
        font-size:18px;
        font-weight:300;
        text-align:center;
    }
    form button{
        align:center;
        background-color:gainsboro;
        border-radius:10px;
        border-style: outset;
        height:30px;
        width:50px;
        padding:5px 10px;
    }
</style>
<body>
<div class="content">
    <form action="实验一_1.html" method="post">
        <input type="text" name="1" placeholder="随笔标题"/>
        <textarea cols="100" rows="30" name="desc"></textarea>
        <br>
        <button>提&nbsp;&nbsp;交</button>
    </form>

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

 

 

 

 

 

 

 

posted @ 2022-06-14 20:17  年年ℓ  阅读(11)  评论(0)    收藏  举报