4/14

php实验一：

实验一 html网页设计

实验目的：

1、能够对整个页面进行html结构设计。

2、掌握CSS+DIV的应用。

实验内容及要求：

***个人博客网页

参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局、插入图像、flash或者影片播放，插入超级链接（至少三个），例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。

实验源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杨佩-html网页设计</title>
    <style type="text/css">
        body{
            background-image:url(image/01.jpg); 
            background-repeat: no-repeat;
            background-size: cover;
            width:100%;
            height:100%;
            top:0;
            left:0;
            position: fixed;

        }
        #header
        {
            width=100%;
            height=30%;
            font-size: 80px;
        }
        #index{
            width:30%;
            height:70%;
            border:20px yellow #666;
            float:left;
        }
        li{
            line-height: 100px;
            font-size: 30px;
        }
        li.hover{
            font-size: 30px;
        }

    </style>
</head>
<body>
    <div id="header">

        <p>杨佩个人博客网页</p>
    </div>
    <div id="index">
        <ul>
            <li><a href="video.html" >园子首页</li>
            <li><a href="zhuce.html" >个人信息</li>
            <li><a href="boke.html" >发表博客</li>
        </ul>    
    </div>
    <div id="footer">
        <a href="https://mail.qq.com/" >遇到问题请联系：3161782390@qq.com
    </div>
    
</body>
</html>

video.html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video.html</title>
</head>
<body>
    <form action="杨佩-html网页设计.html" method="post">
    <embed src="image/02.mp4" >    
    <p>
        <input type="submit" name="结束放映"/>
    </p>
</body>    
</html>

zhuce.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style type="text/css">
    .textBorder{
        border-width:1px;
        border-radius: 4px;
        background: pink;
    }
    </style>
</head>
<body>
    <form action="杨佩-html网页设计.html" method="post">
        <p>名字：
        <input type="text" name="名字" class="textBorder"/></p>
        <p>密码：
        <input type="password" name="密码" class="textBorder"/></p>
        <p>性别：
        <input type="radio" name="性别" value="男"/>男
        <input type="radio" name="性别" value="女"/>女</p>
        <p>联系方式：
        <input type="text" name="电话" class="textBorder"/></p>
        <p>出生日期：
        <input type="text" name="生日" class="textBorder"/></p>
        <p>
            <input type="submit" name="提交"/>
            <input type="reset" name="重置"/>
        </p>    
    </form>    
</body>
</html>

boke.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客</title>
    <style type="text/css">
    .textBorder{
        border-width:1px;
        border-radius: 4px;
        background: pink;
    }
    .textContent{
        width:300px;
        height:300px;
        background: silver;
    }
    </style>
</head>
<body>
    <form action="杨佩-html网页设计.html" method="post">
    <p>博客名称：
    <input type="text" name="博客名称" class="textBorder"/></p>
    <p>博客主题：
    <input type="radio" name="博客主题" value="随笔"/>随笔
    <input type="radio" name="博客主题" value="日记"/>日记
    <input type="radio" name="博客主题" value="总结"/>总结
    </p>
    <p>博客类型：
    <input type="radio" name="博客类型" value="仅自己可见"/>仅自己可见
    <input type="radio" name="博客类型" value="仅登录用户可见"/>仅登录用户可见
    <input type="radio" name="博客类型" value="所有人可见"/>所有人可见
    </p>
    <p>博客内容：
    <input type="text" name="博客内容" class="textContent"/></p>
    <p>
        <input type="submit" name="保存"/>
        <input type="reset" name="重置"/>
    </p>
        
    </form>
    
</body>
</html>

 

posted @ 2022-04-13 21:32  _Pi  阅读(136)  评论(0)    收藏  举报