web实验记录1

是小夢夢啊

已于 2022-06-15 10:42:19 修改

阅读量259

点赞数

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

于 2022-06-15 10:19:50 首次发布

本文链接：https://blog.csdn.net/DoraemonDream/article/details/125291386

版权

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

5 篇文章 0 订阅

订阅专栏

web实验记录1

实验目的
实验内容
写在最后

实验目的

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

实验内容

完成如下图所示界面设计效果。

说明：
1)可考虑基于列表进行设计，居中显示
2)将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px
3)上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333
4)所需图片见附件，图片宽度154px，左间距60px

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.0">
    <title>实验1-2</title>
    <link rel="stylesheet" href="Ex1-css2.css">
</head>
<body>
        <ul>
            <li>
            <p class="p1">抱抱果新首发</p>
            <p class="p2">抱一下，就幸福</p>
            <img class="img" src="../images/1.jpg" alt="">
        </li>
            <li>
                <p class="p1">天猫冰箱节</p>
                <p class="p2">智由随风</p>
                <img class="img" src="../images/2.jpg" alt="">
            </li>
            <li>
                <p class="p1">西门子全球精选</p>
                <p class="p2">旗舰精品，享你所想</p>
                <img class="img" src="../images/3.jpg" alt="">
            </li>
            <li>
                <p class="p1">进口葡萄酒专场</p>
                <p class="p2">原装进口品质保证</p>
                <img class="img" src="../images/4.jpg" alt="">
            </li>
            <li>
                <p class="p1">手机专场</p>
                <p class="p2">原装正品</p>
                <img class="img" src="../images/5.jpg" alt="">
            </li>
        </ul>
</body>
</html>

CSS:

ul{
    font-size: 0px;
}

li{
    list-style-type: none;
    display: inline-block;
    border: 2px solid pink;
    width: 216px;
    height: 200px;
    padding-top: 20px;
    padding-left: 20px;
}
.p1{
    margin: 0px;
    font-size: 18px;
    color: #000;
}
.p2{
    margin: 0px;
    font-size: 14px;
    color: #64c333;
}
.img{
    width: 154px;
    margin-left: 60px;
}

完成下图所示的静态网页制作。

说明：
1)可考虑基于列表进行设计，居中显示
2)列表项高320px 宽250px，外间距10px，内间距10px，边框线1px solid #ccc
3)每项中第一行文字14px，颜色#666，文本行高度32px。其他行文字12px，颜色#66667F，文本行高度25px
4)“原创作品”加粗，颜色#FF5584
5)所需图片见附件，图片宽度250px，高度188px

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.0">
    <title>实验1-3</title>
    <link rel="stylesheet" href="Ex1-css3.css">
</head>
<body>
    <ul>
        <li>
            <img class="img1" src="../images/pic1.jpg" alt="">
            <p class="f1">动画便利店X果壳网《西门子洗碗机》<br>
            <span class="span1">原创作品</span>-影视-Motion Graphic <br>2小时前上传<br><span class="span2">1284</span>&nbsp;&nbsp;人气/<span class="span2">11</span>&nbsp;&nbsp;评论/<span class="span2">47</span>&nbsp;&nbsp;推荐</p>
            <img class="img2" src="../images/play.png" alt="">
        </li>
        <li>
            <img class="img1" src="../images/pic2.gif" alt="">
            <p class="f1">动画便利店X视知《到底工资怎么发》<br>
            <span class="span1">原创作品</span>-影视-Motion Graphic <br>3小时前上传<br><span class="span2">1569</span>&nbsp;&nbsp;人气/ <span class="span2">50</span>&nbsp;&nbsp;评论/<span class="span2">125</span>&nbsp;&nbsp;推荐</p>
            <img class="img2" src="../images/play.png" alt="">
        </li>
    </ul>
</body>
</html>

CSS:

li{
    line-height: 320px;
    list-style-type: none;
    width: 250px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #ccc;
}
p.f1:first-line{
    font-size: 14px;
    font-weight: bold;
    color: #666;
    line-height: 32px;
}
.span1{
    font-weight: bold;
    color: #ff5584;
}
.f1{
    font-size: 12px;
    color: #66667f;
    line-height: 25px;
margin: 0;
white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}
.img1{
    display: block;
    width: 250px;
    height: 188px;
}
.img2{
    display: block;
    width: 15px;
    height: 15px;
}
.span2{
    font-size: 10px;
    color:red;
    line-height: 25px;
}

写在最后

仅对个人实验做一次记录，文中不足、错误之处欢迎指正；
创作不易，点个赞吧！

是小夢夢啊

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
web实验记录1

HTML：CSS：完成如下图所示界面设计效果。说明：1)可考虑基于列表进行设计，居中显示2)将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px3)上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C3334)所需图片见附件，图片宽度154px，左间距60pxHTML:CSS:完成下图所示的静态网页制作。说明：1)可考虑基于列表进行设计，居中显示2)列表项高320px 宽250px，外间距10px，内间距
复制链接

扫一扫