Web前端开发技术实验3 页面元素_web前端开发技术实验三图片-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_78967568/article/details/139503995

练习1、根据提供的图像和超链接资源完成图像页面导航设计，超链接设置为空，效果如图所示。

<!doctype html>
<html lang="en">
<head>
      <meta char set="utf-8">
      <style type="text/css">
      h5{text-align:center;font-size:30px;}
      hr{color:rgb(119, 255, 0);}
      </style>
</head>

<body>
      <h5>apple网站</h5>
      <hr color="green">
      <p>   
            <a href ="">
                  <img src = "C:\Users\WAN\Desktop\Web前端开发技术\tu1.png" 
                  align= "bottom" width = "200" height = "150" border ="0"alt="IPhone 5">
            </a>
            <a href ="">
                  <img src = "C:\Users\WAN\Desktop\Web前端开发技术\tu2.png" 
                  align= "bottom" width = "200" height = "150" border ="0"alt="ipad">
            </a>
            <a href ="">
                  <img src = "C:\Users\WAN\Desktop\Web前端开发技术\tu3.png" 
                  align= "bottom" width = "200" height = "150" border ="0"alt="MacBook Pro">
            </a>

      </p>

      <hr color="green">
</body>
</html>

练习2、如图所示，按如下要求设计Web页面：1、无序列表布局，每个列表项的内容为图像链接，点击小图可以浏览大图。2、img标记样式为“宽度100px，高度100px，边框0px”。3、ul样式为“去除列表项前的符号，内容居中显示”。li样式为“行内显示，宽度120px，行高30px”。

<!doctype html>
<html lang="en">
<head>
      <meta char set="utf-8">
      <style type="text/css">
      h5{text-align:center;font-size:30px;color: red;}
      ul{list-style-type: none;text-align: center;}
      li{display:inline-block;width: 120px;height: 30px;}
      
      .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
   }
 
      .modal-image {
      display: block;
      max-width: 90%;
      max-height: 90%;
      margin: auto;
      margin-top: 5%;
   }
      </style>
</head>

<body>
      <h5>桂林山水风景图片</h5>
      
      <ul>  
            <li>
                  <img src = "C:\Users\WAN\Desktop\Web前端开发技术\guilin1.jpg" 
                  align= "bottom" width = "100" height = "100" border ="0"alt="IPhone 5"onclick="showModal(this)">
                  <a href="">桂林山水1</a>
            </li>
                  
            <li>
                  <img src = "C:\Users\WAN\Desktop\Web前端开发技术\guilin2.jpg" 
                  align= "bottom" width = "100" height = "100" border ="0"alt="ipad"onclick="showModal(this)">
                  <a href="">桂林山水2</a>
            </li>

            <li>
                  <img src = "C:\Users\WAN\Desktop\Web前端开发技术\guilin3.jpg" 
                  align= "bottom" width = "100" height = "100" border ="0"alt="MacBook Pro"onclick="showModal(this)">
                  <a href="">桂林山水3</a>
            </li>

            <li>
                  <img src = "C:\Users\WAN\Desktop\Web前端开发技术\guilin4.jpg" 
                  align= "bottom" width = "100" height = "100" border ="0"alt="MacBook Pro"onclick="showModal(this)">
                  <a href="">桂林山水4</a>
            </li>

      </ul>
 
      <div id="modal" class="modal" onclick="hideModal()">
            <img id="modal-image" class="modal-image">
      </div>
 
      <script>
            function showModal(image) {
            var modal = document.getElementById("modal");
            var modalImage = document.getElementById("modal-image");
            modal.style.display = "block";
            modalImage.src = image.src;
            modalImage.height= "500";
            }
 
            function hideModal() {
            var modal = document.getElementById("modal");
            modal.style.display = "none";
            }
      </script>

</body>
</html>

点击第4张图结果如下：

练习3、设置图像的相关对齐属性，编程实现如图所示效果

<!doctype html>
<html lang="en">
<head>
      <meta char set="utf-8">
      <style type="text/css">
            img{width: 45px;height: 45px;}
      </style>
</head>

<body>
      <h4 align="center">图像对齐方式应用</h4>
      <hr color="red"size="2">
      <h3>未设置对齐方式的图像：</h3>
<p><img src = "C:\Users\WAN\Desktop\Web前端开发技术\guilin1.jpg"border="0">
PNG文件采用LZ77算法的派生算法进行压缩，其结果是获得高的压缩比，不损失数据。
它利用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不可能
产生颜色的损失，这样就可以重复保存而不降低图像质量。</p>
<h3>已设置对齐方式的图像：</h3>
<p>
PNG-8格式与GIF图像类似，同样采用8位调色板将RGB彩色图像转换为索引彩色图像。
图像中保存的不再是各个像素的彩色信息，<img src="C:\Users\WAN\Desktop\Web前端开发技术\guilin1.jpg"align="center">
而是从图像中挑选出来的具有代表性的颜色编号，每一编号对应一种颜色，图像的数据量也因
此减少，这对彩色图像的传播非常有利。</p>
<p>PNG图像在浏览器上采用流式浏览，即使经过交错处理的图像会在完全下载之前提供浏
览者一个基本的图像内容，然后再逐渐清晰<img src="C:\Users\WAN\Desktop\Web前端开发技术\guilin1.jpg"align="middle">
起来。它允许连续读出和写入图像数据，这个特性很适合于在通信过程中显示和生成图像。
</p><p>PNG可以为原图像定义256个透明层次，使得彩色图像的边缘能与任何背景平滑地融合，
从而彻底地消除锯齿边缘。这种功能是GIF和JPEG没有的。</p>
<p><img src = "C:\Users\WAN\Desktop\Web前端开发技术\guilin1.jpg"align="left">
PNG同时还支持真彩和灰度级图像的Alpha通道透明度。最高支持24位真彩色图像以及
8位灰度图像。支持Alpha通道的透明/半透明特性。支持图像亮度的Gamma校准信息。支持
存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。</p>
</body>
</html>

练习4、设计图像画廊，效果如图所示。采用无序列表加载五幅图像，利用滚动文字标记实现五幅图像从右向左交替滚动显示。相关样式设置如下：

img{width:100px;height:100px;border:2px #cc0066 ridge;}

ul{list-style-type:none;}

li{float:left;}

</style>

<!doctype html>
<html lang="en">
<head>
      <meta char set="utf-8">
      <style type="text/css">
            img{width:100px;height:100px;border:2px #cc0066 ridge;}
            ul{list-style-type:none;}
            li{float:left;}
      </style>
            
</head>

<body>
      <h5 align="center">图像画廊</h5>
      <hr color="green" size="20px">
      <marquee direction="left" behavior= "alternate">
      <ul>
            <li>                 
                  <img src="C:\Users\WAN\Desktop\Web前端开发技术\guilin1.jpg">                                  
            </li>
            <li> 
                  <img src="C:\Users\WAN\Desktop\Web前端开发技术\guilin2.jpg">    
            </li>
            <li> 
                  <img src="C:\Users\WAN\Desktop\Web前端开发技术\guilin3.jpg">    
            </li>
            <li> 
                  <img src="C:\Users\WAN\Desktop\Web前端开发技术\guilin4.jpg">    
            </li>            
      </ul>
      </marquee>
      <hr color="green" size="20px">

</body>
</html>