实验一：HTML基础

平平无奇小码手

已于 2023-04-10 15:07:43 修改

阅读量184

点赞数

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

于 2023-04-10 15:05:29 首次发布

本文链接：https://blog.csdn.net/qq_51173747/article/details/130060288

版权

Web前端实验专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实验目的及要求：

掌握HTML语言文档结构
了解基本的HTML语言标记
掌握如何利用HTML语言编写静态网页
掌握网页页面布局的方法
掌握CSS的应用

1

图片是几排文字排列

<!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.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .content{
            border: 1px solid #ccc;
            width: min-content;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            align-items: center;
            transform:translate(-50%,-50%);
        }
        .news {
            list-style-type: none;
            color: #122e67;
        }
        .news li {
            border-bottom: 1px dashed #666;
            width: max-content;
            line-height: 30px;
            letter-spacing: 0.8rem;
        }
    </style>
</head>
<body>
    <div class="content">
    <ul class="news">
            <li><img src="images/disc.jpg"></img>一行白鹭上青天</li>
            <li><img src="images/disc.jpg"></img>无穷大量必为无界变量，而无界变量不一定是无穷大量</li>
            <li><img src="images/disc.jpg"></img>两个无穷大量的积仍是无穷大量</li>
            <li><img src="images/disc.jpg"></img>基本初等函数在其定义域内都是连续的</li>
            <li><img src="images/disc.jpg"></img>初等函数在其定义区间内都是连续的</li>
        </ul>
    </div>
</body>
</html>

2

将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px
上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333
所需图片见附件，图片宽度154px，左间距60px

<!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.0" />
        <title>Document</title>
            /* 修改默认 */
            body {
                width: 100%;
                height: 100%;
                display: flex; /* 使用flex布局居中处理 */
                align-items: center;
                justify-content: center;
            }
            .content {
                border: 1px solid #666;
                background-color: #e6dfdf;
            }
            .item-list{
                padding: 5px;
            }
            /* ul列表下每一个li项*/
            .item-list li {
                background-color: #fff;
                height: 200px;
                width: 216px;
                padding: 20px 0 0 20px; /* 上 右 下 左*/
                display: inline-block;
                list-style: none;
            }
            img {
                width: 154px;
                margin-left: 60px;
            }
            .desc-btm,
            .desc-top{
                margin: 0;
            }
            .desc-top{
                font-size: 18px;
                color: #000;
            }
            .desc-btm{
                font-size: 14px;
                color: #64C333;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <ul class="item-list">
                <li><p class="desc-top">抱抱果新首发</p><p class="desc-btm">抱一下就幸福</p> <img src="images/1.jpg" alt="" /></li>
                <li><p class="desc-top">天猫冰箱节</p><p class="desc-btm">智由随风</p> <img src="images/2.jpg" alt="" /></li>
                <li><p class="desc-top">西门子全球精选</p><p class="desc-btm">旗舰精品想你所限</p> <img src="images/3.jpg" alt="" /></li>
                <li><p class="desc-top">进口葡萄酒专场</p><p class="desc-btm">原瓶进口品质保证</p> <img src="images/4.jpg" alt="" /></li>
                <li><p class="desc-top">手机专场</p><p class="desc-btm">原装正品</p> <img src="images/5.jpg" alt="" /></li>
            </ul>
        </div>
 </body>
</html>

3

列表项高320px 宽250px，外间距10px，内间距10px，边框线1px solid #ccc
每项中第一行文字14px，颜色#666，文本行高度32px。其他行文字12px，颜色#66667F，文本行高度25px
“原创作品”加粗，颜色#FF5584
所需图片见附件，图片宽度250px，高度188px

<!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.0" />
        <title>Document</title>
        <style>
            /* 先设置主体居中 */
            .main {
                padding: 10px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #666;
                width: min-content;
            }
            /* 卡片 */
            .item{
                margin: 10px;
                padding: 10px;
                border: 1px solid #ccc;
                height: 320px;
                width: 250px;
            }
            .item-img{
                width: 250px;
                height: 188px;
            }
            /* 标题设置超出隐藏 */
            .item-title {
                font-size: 17px;
                font-weight: 550;
                white-space: nowrap;
                text-overflow:ellipsis;
                overflow: hidden;
            }
            /* 鼠标放上去会显示 */
            .item-title:hover{
                overflow: visible;
            }

            .item-desc-author,
            .item-desc-type,
            .item-desc{
                font-size: smaller;
                color: #878;
                font-family: 'Lucida Sans';
            }

            .item-desc span{
                line-height: 25px;
            }
            .item-desc-attr{
                font-size: 14px;
                color: rgb(206, 20, 165);
                font-weight: bold;
            }
            .item-date{
                font-size: 10px;
            }
            i{
                color: #ee763e
            }
            .item-data{
                margin-top: 10px;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <!-- 卡片整体 -->
            <div class="item">
                <!-- 大图 -->
                <a href="www.bing.com"><img class="item-img" src="images/pic1.jpg" /></a>
                <!-- 卡片标题 -->
                <div class="item-title">动画便利店X果壳网《西门子洗碗机可太洗碗机了》</div>
                <!-- 卡片描述 -->
                <div class="item-desc">
                    <!-- 原创作品或者转载 -->
                    <span class="item-desc-attr">原创作品</span>
                    <!-- 类型 -->
                    <span class="item-desc-type">-影视-</span>
                    <!-- 作者 -->
                    <span class="item-desc-author">Motion Graphic</span>
                </div>
                <!-- 上传时间 -->
                <div class="item-date">2小时前上传</div>
                <!-- 数据 -->
                <div class="item-data">
                    <!-- 播放量 -->
                    <a href="www.baidu.com"><img src="images/play.png" alt="" class="icon" /></a>
                    <span class="item-data-play"><i>1284</i></span>
                    <!-- 人气 -->
                    <span class="item-data-popularity">人气/<i>17</i> </span>
                    <!-- 评论 -->
                    <span class="item-data-comment">评论/<i>14</i></span>
                    <span class="item-data-comment">推荐</span>
                </div>
            </div>

            <div class="item">
                                <!-- 大图 -->
                <a href="www.baidu.com"><img class="item-img" src="images/pic2.gif" /></a>
                <!-- 卡片标题 -->
                <div class="item-title">动画便利店X视知《到底工资怎么发》</div>
                <!-- 卡片描述 -->
                <div class="item-desc">
                    <!-- 原创作品或者转载 -->
                    <span class="item-desc-attr">原创作品</span>
                    <!-- 类型 -->
                    <span class="item-desc-type">-影视-</span>
                    <!-- 作者 -->
                    <span class="item-desc-author">Motion Graphic</span>
                </div>
                <!-- 上传时间 -->
                <div class="item-date">3小时前上传</div>
                <!-- 数据 -->
                <div class="item-data">
                    <!-- 播放量 -->
                    <img src="images/play.png" alt="九转" class="icon" />
                    <span class="item-data-play"><i>1569</i></span>
                    <!-- 人气 -->
                    <span class="item-data-popularity">人气/<i>50</i> </span>
                    <!-- 评论 -->
                    <span class="item-data-comment">评论/<i>125</i></span>
                    <span class="item-data-comment">推荐</span>
                </div>
            </div>
        </div>
    </body>
</html>