web实验1 div+css

最新推荐文章于 2021-07-05 15:43:16 发布

你的负卿是我

最新推荐文章于 2021-07-05 15:43:16 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： css html vue.js html5

本文链接：https://blog.csdn.net/weixin_43909373/article/details/108130922

版权

这是一篇关于web实验的博客，重点介绍了使用div和css进行页面布局和多媒体交互，如页面跳转、图片查看和音乐播放。博客内容包括主页的动漫展示，点击特定元素如‘菊花台’可播放MV，在线跳转播放；游客界面、个人资料展示以及照片查看功能，其中照片点击后可以放大。同时，博客还分享了一部分相关的css代码。

摘要由CSDN通过智能技术生成

web实验1 div+css

多个页面互相跳转可看图片播放音乐等等

主页我的动漫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫播放</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        #right #top {
    
            background-image: url("sucai/images/top.jpg");
            width: 634px;
            height: 145px;
        }
        #right #middle {
    
            background-image: url("sucai/images/man.jpg");
            background-color: white;
            background-repeat: no-repeat;
            padding-top: 10px;
            width: 634px;
            height: 80px;
        }
        #right #bottom {
    
            background-image: url("");
            margin: 0 auto;
            background-color: white;
            padding-left: 20px;
            padding-top: 20px;
            width: 509px;
            height: 382px;
        }
        form div {
    
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
   <div id="content">
       <div id="left">
            <img src="sucai/images/left.jpg" usemap="#List" alt="">
       </div>
       <div id="right">
           <div id="top"></div>
           <div id="middle"></div>
           <div id="bottom">
                <div class='table'>
                    <div class='tr'>
                        <div class='td'><a href="jht.html"><img src="sucai/images/ju.jpg" alt="photo1" /></a></div>
                        <div class='td'><a href="#"><img src="sucai/images/wu.jpg" alt="photo2" /></a></div>
                        <div class='td'></div>
                    </div><br>
                    <div class='tr'>
                        <div class='td'><a href="#"><img src="sucai/images/wu.jpg" alt="photo3" /></a></div>
                        <div class='td'><a href="#"><img src="sucai/images/wu.jpg" alt="photo4" /></a></div>
                        <div class='td'></div>
                    </div>
                </div>
				<div>
                    <nav>
                        <ul>
                            <li><a href="photo.html" style="color: blue;">1</a></li>
                            <li><a href="http://blog.sakuramk.cn/wp-admin" style="color: black;">2</a></li>
                            <li><a href="http://blog.sakuramk.cn" style="color: black;">3</a></li>
                        </ul>
                    </nav>
                </div>
		   </div>
       </div>
   </div>
   <div id="footer" style="text-align: right;">
      <!-- <a href="http://blog.sakuramk.cn">My Blog</a> -->
   </div>
   <map name="List">
        <!-- 首页-->
     	<area shape="circle" coords="157,148,36" href="index.html">
        <!-- 我的资料 -->
        <area shape="circle" coords="55,210,36" href="index.html">
        <!-- 我的相册 -->
        <area shape="circle" coords="163,269,36" href="photo.html">
        <!-- 我的动漫 -->
        <area shape="circle" coords="56,320,36" href="flash.html">
        <!-- 鹤过留影 -->
        <area shape="circle" coords="140,383,36" href="guest.html">      
   </map>
</body>
</html>

在这里插入图片描述点击
菊花台就会播放mv 在线播放跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=

最低0.47元/天解锁文章

你的负卿是我

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

web实验1 div+css

web实验1 div+css

主页 我的动漫

主页我的动漫