网页设计与开发-实验报告-5

最新推荐文章于 2024-08-08 15:03:10 发布

笨笨的企鹅

最新推荐文章于 2024-08-08 15:03:10 发布

阅读量416

点赞数

分类专栏： Web前端文章标签： css html 前端

本文链接：https://blog.csdn.net/baiziyuandyufei/article/details/127511981

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网页设计与开发-实验报告-5

网页设计与开发-实验报告-5
- 学生实验3

网页设计与开发-实验报告-5

学生实验3

制作一个图片链接，单击每个图片，在新窗口中显示对应的内容。

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>学生实验3</title>
        <style type="text/css">
            /*大背景*/
            .container{
                width: 660px;
                margin:0 auto;
                background-color:darkgrey;
            }
            /*导航条必须设置overflow:hidden，否则无法显示container背景*/
            .bar{
                list-style-type: none;
                margin:0px;
                padding:0px;
                overflow:hidden;
            }
            /*导航条设置float:left，竖向列表变横向*/
            .bar li{
                width: 120px;
                margin:0px;
                padding:0px;
                float:left;
            }
            /* 链接样式*/
            a{
                display:block;
                color: white;
                text-align:center;
                padding:0px;
                text-decoration:none;
            }
            /* 光标停留时背景变为红色*/
            a:hover
            {
                background-color:#cc0000;
            }
            /* 相册每行列表*/
            .album{
                list-style: none;
                overflow: hidden;
                margin:0px 0px 0px 6px;
                padding:0px 5px 5px 5px;
            }
            /* 相册每行列表*/
            .album li{
                float: left;
                width: 150px;
                margin:5px;
            }
            /* 设置图像宽和高，使其大小适合大背景*/
            img{
                width:150px;
                height:230px;
            }
            /* 设置图像链接样式*/
            .album li a{
                margin:0px;
                padding:0px;
            }
            /* 设置光标停留时背景变为大背景色*/
            .album li a:hover
            {
                background-color:darkgrey;
            }
            
        </style>
    </head>
    <body>
        <div class="container" >
            <ul class="bar">
                <li><a href="#">人物</a></li>
                <li><a href="#">风景</a></li>
                <li><a href="#">动漫</a></li>
            </ul>
            <ul class="album">
                <li><a href="zry/1.jpg" target="_blank"><img src="zry/1.jpg" ></a></li>
                <li><a href="zry/2.jpg" target="_blank"><img src="zry/2.jpg" ></a></li>
                <li><a href="zry/3.jpg" target="_blank"><img src="zry/3.jpg" ></a></li>
                <li><a href="zry/4.jpg" target="_blank"><img src="zry/4.jpg" ></a></li>
            </ul>
            <ul class="album">
                <li><a href="zry/5.jpg" target="_blank"><img src="zry/5.jpg" ></a></li>
                <li><a href="zry/6.jpg" target="_blank"><img src="zry/6.jpg" ></a></li>
                <li><a href="zry/7.jpg" target="_blank"><img src="zry/7.jpg" ></a></li>
                <li><a href="zry/8.jpg" target="_blank"><img src="zry/8.jpg" ></a></li>
            </ul>
            <ul class="album">
                <li><a href="zry/9.jpg" target="_blank"><img src="zry/9.jpg" ></a></li>
                <li><a href="zry/10.jpg" target="_blank"><img src="zry/10.jpg" ></a></li>
                <li><a href="zry/11.jpg" target="_blank"><img src="zry/11.jpg" ></a></li>
                <li><a href="zry/12.png" target="_blank"><img src="zry/12.png" ></a></li>
            </ul>
        </div>
    </body>
</html>