网页前端：图片的应用

sky-stars

已于 2024-08-27 20:36:44 修改

阅读量371

点赞数 2

分类专栏：网页前端文章标签： html css html5

于 2021-11-21 23:11:11 首次发布

本文链接：https://blog.csdn.net/qq_51917985/article/details/121462349

版权

网页前端专栏收录该内容

7 篇文章 5 订阅

订阅专栏

文章目录

前言
具体操作
总结

前言

实验目的：
（1）掌握图片作为网页元素的使用方法； 
（2）掌握图片作为背景元素的使用方法； 
（3）掌握使用table进行页面布局的方法。
实验内容：
按照下图要求设计静态页面！

具体操作

图片的应用.css

#img1{
    width: 8%;
    height: 8%;
}

#img2{
    width: 20%;
    height: 20%;
    margin-left: 20px;
}
a:visited{
    color: hotpink;
}

table, th, td {
    border: 2px solid black;
}

图片的应用.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../css/图片的应用.css">
</head>
<body>
<img src="../image/logo.jpeg" alt="logo" id="img1">
<hr>
<ul>
    <li><a href="#Technology">科技</a></li>
    <li><a href="#agriculture">农业</a></li>
    <li><a href="#healthy">健康</a></li>
    <li><a href="#educate">教育</a></li>
    <li><a href="#economy">经济</a></li>
    <li><a href="#society">社会</a></li>
</ul>

<p><h1>科技人员制造噪音来研究安静的价值</h1></p>

<img src="../image/yanjiu.jpg" alt="yanjiu" id="img2">

<p>
    博伊西州立大学的生物学家们一直在美国西部的爱达荷州的森林制造噪音。他们正在制造噪音来研究自然界中安静的价值。他们想要知道人和动物如何应对噪音污染。
</p>
<p>
    研究人员在博伊西市国家森林一条半公里长的道路两侧安放了户外扬声器。他们通过扬声器播放汽车过往的声音已达两年时间。博伊西州立大学的杰西·巴伯（Jesse Barber）教授表示，他们发现这些声音导致了候鸟逃离。这些鸟儿也没有长胖。
</p>
<p>
    博伊西州立大学的生物学家们一直在美国西部的爱达荷州的森林制造噪音。他们正在制造噪音来研究自然界中安静的价值。他们想要知道人和动物如何应对噪音污染。
</p>
<p>
    研究人员在博伊西市国家森林一条半公里长的道路两侧安放了户外扬声器。他们通过扬声器播放汽车过往的声音已达两年时间。博伊西州立大学的杰西·巴伯（Jesse Barber）教授表示，他们发现这些声音导致了候鸟逃离。这些鸟儿也没有长胖。
</p>

<table>
    <caption>噪音测试表</caption>
    <tr>
        <th rowspan="2">
            地点
        </th>
        <th rowspan="2">
            噪音
        </th>
        <th colspan="2">
            测试
        </th>
    </tr>

    <tr>
        <th>
            动物种类
        </th>
        <th>
            影响大小1-10
        </th>
    </tr>

    <tr>
        <td rowspan="4">
            小河旁
        </td>
        <td rowspan="2">
            采集天然气的机器声
        </td>
        <td>
            鸟类
        </td>
        <td>
            8
        </td>
    </tr>

    <tr>
        <td>
            昆虫
        </td>
        <td>
            3
        </td>
    </tr>

    <tr>
        <td rowspan="2">
            汽车过往的声音
        </td>
        <td>
            鸟类
        </td>
        <td>
            6
        </td>
    </tr>

    <tr>
        <td>
            昆虫
        </td>
        <td>
            2
        </td>
    </tr>

    <tr>
        <td rowspan="4">
            高山旁
        </td>
        <td rowspan="2">
            采集天然气的机器声
        </td>
        <td>
            鸟类
        </td>
        <td>
            9
        </td>
    </tr>

    <tr>
        <td>
            昆虫
        </td>
        <td>
            4
        </td>
    </tr>

    <tr>
        <td rowspan="2">
            汽车过往的声音
        </td>
        <td>
            鸟类
        </td>
        <td>
            4
        </td>
    </tr>

    <tr>
        <td>
            昆虫
        </td>
        <td>
            1
        </td>
    </tr>

    <tr>
        <th colspan="4">
            *此表格数据纯属虚构
        </th>
    </tr>
</table>
</body>
</html>

目录结构
在这里插入图片描述
实验结果

总结

（1）掌握图片作为网页元素的使用方法； 
（2）掌握图片作为背景元素的使用方法； 
（3）掌握使用table进行页面布局的方法。

sky-stars

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
网页前端：图片的应用

实验目的：（1）掌握图片作为网页元素的使用方法；（2）掌握图片作为背景元素的使用方法；（3）掌握使用table进行页面布局的方法。实验内容：按照下图要求设计静态页面！（1）掌握图片作为网页元素的使用方法；（2）掌握图片作为背景元素的使用方法；（3）掌握使用table进行页面布局的方法。
复制链接

扫一扫