HTML+CSS系列实战之超链接、音视频

实现一个自我介绍页面,要求用到页面的跳转、音频、视频等综合属性。

主页面的代码为:(intrudiction.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自我介绍</title>
    <style>
        a {
     
            display:inline-block;
            
            margin: 0 60px;
        }
        li {
     
            list-style: none;
            float: left;
        }
    </style>
</head>
<body background="images/ab.jpg">
    <h3 align="center"><font color="blue" size="20">自我介绍</font></h3>
   <hr color="red" width='1000'/>
    
    <ul>
        <li><a href="one.html">首页</a></li>
        <li><a href="two.html">我的相册</a></li>
        <li><a href="two.html">我的相册</a></li>
        <li><a href="three.html">大二,大三学习规划</a></li>
        <li><a href="four.html">我的家乡</a></li>
        <li><a href="five.html">我的故事</a></li>
    </ul>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
   
    <h4 align="center">&copy;2003-2009&nbsp;xx.com.ALL&nbsp;rights.&nbsp;xxx有限公司【xICP备05023328号】</h4>
</body>
</html>

实现效果为:
HTML+CSS系列实战之超链接、音视频_第1张图片
        当点击首页对应模块的功能时,会跳转到相应页面。这里用到了超链接、无序列表、字符实体等相关知识,主要是在列表里面使用超链接,再给列表清除样式达到并列排版的效果。
第二个页面的代码为:(one.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body background="images/ab.jpg">
    <h3 align='center'><font color='red'>首页</font></h3>
    <p>自我介绍,省略一万字。。。</p>
    <br><br><br><br>
    <a href="introduction.html">回到主页</a>
</body>
</html>

实现效果为:
HTML+CSS系列实战之超链接、音视频_第2张图片
        这里主要用到了超链接的知识,给的href属性添加主页面的路径(introduction.html),当点击回到首页时,页面会跳转到主页面。

第三个页面的代码为:(two.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
     
            margin: 0 auto;
        }
    </style>
</head>
<body background="images/ab.jpg">
    <table border='2' text-align='center'>
        <caption><h3><font color='red'>相册集</font></h3></caption>
        <tr>
            <td ><img src="images/a.jpg" alt=""></td>
            <td colspan="2"><img src="images/b.jpg" alt=""></td>
        </tr>
        <tr>
            <td>
                <img src="images/c.jpg" alt="">
            </td>
            <td><img src="images/d.jpg" alt=""></td>
        </tr>
    </table>
    <br>
    <a href="introduction.html">回到主页</a>
</body>
</html>

实现效果为:
HTML+CSS系列实战之超链接、音视频_第3张图片
        这里主要用到了超链接、表格和图片的相关知识,先写一个表格,在将要运用的图片插入表格中,可以随意布局。当点击回到主页时,实现页面的跳转,同上。

第四个页面的代码为:(three.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body background="images/ab.jpg">
    <h3 align='center'><font color='red'>学习规划</font></h3>
    <ul>
        <li>大二学习规划</li>
        <ol>
            <li>好好学习</li>
            <li>好好学习</li>
            <li>好好学习</li>
        </ol>
        <br><br>
        <li>大三学习规划</li>
        <ol>
            <li>好好学习</li>
            <li>好好学习</li>
            <li>好好学习</li>
        </ol>
    </ul>
    <br><br>
    <a href="introduction.html">回到主页</a>
</body>
</html>

实现效果为:
HTML+CSS系列实战之超链接、音视频_第4张图片
        这里用到了超链接、列表的相关知识,通过列表的嵌套实现如图所示的布局。并可以实现页面的跳转。

第五个页面的代码为:(four.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body background="images/ab.jpg">
    <h3 align='center'><font color='red'>我的家乡</font></h3>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家乡山清水秀,人灵地杰,无论是土生土长的家乡人,还是生活在当地的外乡人,或者是旅居在海外的华人,谁不对自己的家乡有份难舍的情怀,每个人都爱自己的家乡,喜爱理由何止一百条。家乡是生命的摇篮,记载着自己的人生轨迹,想起自己的家乡,就会想起家乡的亲人,想起带给自己快乐。</p>
    <video src="../10.16/video/mailang.webm  " muted controls autoplay width='100%' height='300px'></video>
    <br>
    <audio src="music/刀郎 - 西海情歌.mp3" controls='controls' autoplay='autoplay' muted></audio>
    <br><br>
    <a href="introduction.html">回到主页</a>
</body>
</html>

实现效果为:
HTML+CSS系列实战之超链接、音视频_第5张图片
        这里用到了超链接、图片和音频标签等知识。将视频嵌入到页面中。通过controls属性给其添加控制属性,要注意的是,如果要实现自动播放功能,则需要给视频添加muted属性。再加入音频文件,这里也要给其添加controls属性,否则播放控件不显示。

第六个页面的代码为:(five.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body background="images/ab.jpg">
    <h3 align='center'><font color="red">我的故事</font></h3>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;省略一万字。。。。。。</p>
    <a href="introduction.html">回到首页</a>
</body>
</html>

实现效果为:
HTML+CSS系列实战之超链接、音视频_第6张图片
        该页面主要实现超链接跳转的功能,方法同上。
        以上就是每个分页面的实现效果以及具体实现方案。但是在实现的过程中最好结合CSS样式来布局页面,使页面更加美观。

你可能感兴趣的:(前端样例实战,html,音视频,前端)