图片垂直布局实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45234177/article/details/116561976

目标：实现3张图片垂直排列布局，并且每张图片都可以点击
实现：

<!Doctype html>
<html lang="zh">
    <meta charset="UTF-8">
    <title>图片列表练习</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        /* 外部边框样式 */
        ul{
            width: 25%;
            background-color: cornsilk;
            border: 3px solid rgb(217, 255, 0);
        }
        li{
            margin: 10px;
        }
        .img_style{
            width: 100%;
        }
    </style>
</html>
<body>
    <!-- 列表，图片的外部边框 -->
    <ul>
        <!-- 列表中的内容 -->
        <li>
            <!-- 设置图片链接 -->
            <a href="javascript:;">
                 <img src="./img/1.gif" alt="lay" class="img_style">
            </a>     
        </li>
        <li>
            <a href="javascript:;">
                <img src="./img/2.png" alt="lay" class="img_style">
            </a>      
        </li>
        <li>
            <a href="javascript:;">
                <img src="./img/3.png" alt="lay" class="img_style">
            </a>       
        </li>
        
    </ul>
    
</body>

效果图：
在这里插入图片描述
知识点：

reset.css：重置样式表，引用该文件可以取消元素的默认样式
无序列表：使用ul标签创建无序列表，li标签表示列表项
格式：

        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>`

3.超链接：从一个页面跳转到其他页面或者当前页面的其他位置

	href属性（指定跳转路径）：值可以是一个外部网站的地址，也可以写一个内部页面的地址

格式：

<a href="http://www.baidu.com">超链接</a>

4.图片：

     src属性 ：指定外部图片的路径
     alt属性 ：图片描述，默认情况下不显示，有些浏览器在图片出错时显示。搜索引擎会根据alt中的内容来识别图片
     图片格式：
            jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片
            gif 支持的颜色比较少，支持简单透明，支持动图，适合颜色单一的、动图
            png 支持颜色丰富，支持复杂透明，不支持动图，网页中使用最多
            webp 谷歌推出的专门用来表示网页的图片的一种格式，具备其他图片格式的所有优点，但兼容性不好
            base64
                将图片使用base64编码，将图片转换为字符，通过字符的形式来引入图片

格式：