Web实验一HTLML基础_应用html和css完成如图所示界面效果。内容相对于浏览器居中,图标见附件disc.jpg-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74331689/article/details/130311863

该文展示了两个HTML和CSS的实践例子，分别涉及内容居中、列表布局以及静态网页设计。第一个例子是使内容居中并展示带有图标的列表，第二个例子通过列表和inline-block实现横向显示的界面，第三个例子创建了包含图片和多行文本的列表项，每个项有特定的尺寸、颜色和间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实验目的及要求：

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

实验内容：

1．应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。

说明：

内容相对于浏览器居中，图标见附件disc.jpg
盒子边框1px solid #ccc，内边距20px
文本字体颜色#122e67，文本高度30px

运行截图

代码：

<!DOCTYPE html>
<html>
<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>experiment1-1</title>
</head>
<style type="text/css">
div{margin: 200px  auto;
    width:500px;  
    border:1px solid#ccc;
    padding: 20px;
    color:#122e67;} 
li{
    list-style: none;
    text-decoration: solid;
    line-height: 30px;
    padding-bottom: 1px;
    border-bottom-style:dotted;
    border-bottom-color: #ccc;
    list-style-image: url("./disc.jpg");
}
    </style>
<body>
    <div>
        <ul>
            <li>一</li>
            
            <li>二</li>
            
            <li>三</li>
        
            <li>四</li>
            
            <li>五</li>
            
            <li>六</li>
        </ul>
    </div>
</body>
</html>

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

说明：

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

运行截图：

代码：

<!DOCTYPE html>
<html>
<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>
</head>
<style type="text/css" >
body{
    margin:0 auto;
    background-color: #ccc;
    width: 1300px;
    height: 200px;
}
img{
    width:154px;
    padding-left: 60px;
}
   li{
    background-color: white;
    height:200px;
    width:216px;
    padding-left: 20px;
    padding-top: 20px;
    display:inline-block;
    overflow: hidden;
    }
    .span1{
        display:block;
        font-size: 18px;
        color:#000;
    }
    .span2{
        display:block;
        font-size:14px;
        color:#64C333;
    }
</style>
<body>
    <ul>

        <li ali>
            <span class="span1">抱抱果新首发</span>
            <span class="span2">抱―下就幸福</span>
            <img src="./1.jpg"> 
        </li>
        <li>
            <span class="span1">天猫冰箱节</span>
            <span class="span2">智由随风</span>
            <img src="./2.jpg">
            
        </li>
        <li>
            <span class="span1">西门子全球精选</span>
            <span class="span2">旗般精品享你所想</span>
            <img src="./3.jpg">
        </li>
        <li>
            <span class="span1">进口葡萄酒专场</span>
            <span class="span2">原瓶进口品质保证</span>
            <img src="./4.jpg">
            
        </li>
        <li>
            <span class="span1">手机专场</span>
            <span class="span2">原装正品</span>
            <img src="./5.jpg">
        </li>
    </ul>
</body>
</html

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

说明：

可考虑基于列表进行设计，居中显示
列表项高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>
        .box{
            width: 2000px;
            margin: auto;
        }
        .box ul{
            width: 500px;
            margin: auto;
        }
        .box ul li{
            height: 320px;
            width: 250px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            list-style: none;
        }
        .box ul li img1{
            width: 250px;
            height: 188px; 
            margin-bottom: 0px;   
        }
        .box ul li img2{
            margin-top: 0px;
        }
        .box ul li h4{
            font-size: 14px;
            color: #666;
            line-height: 32px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .box ul li h5{
            font-size:  12px;
            color: #66667F;
            line-height: 25px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .box ul li h6{
            font-size:  12px;
            color: #66667F;
            line-height: 25px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .box ul li h5 span{
            color: #FF5584;
            font-weight: 800;
 
        }
        .box ul li h6 span{
            color: #FF5584;
            font-weight: 400;
            }
    </style>   
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img class="img1" src="./web实验一图片/pic1.jpg" alt="">
                <h4>动画便利店X果壳网《西门子洗碗机...</h4>
                <h5>
                    <span>原创作品</span>
                        -影视-Motion Graphic</h5>
                <h5>3小时前上传</h5>
                <h6>
                    <div>
                        <span>1569</span>&nbsp;人气/<span>50</span>&nbsp;评论/<span>125</span>&nbsp;推荐
                    <div>
                </h5>
                <img class="img2" src="./pic1.jpg" alt="">
            </li>
            <li>
                <img class="img1" src="./pic2.gif" alt="">
                <h4>动画便利店X视知《到底工资怎么发...</h4>
                <h5>
                    <span>原创作品</span>
                        -影视-Motion Graphic</h5>
                <h5>3小时前上传</h5>
                <h6>
                    <div>
                        <span>1569</span>&nbsp;人气/<span>50</span>&nbsp;评论/<span>125</span>&nbsp;推荐
                    <div>
                </h5>
                <img class="img2" src="./web实验一图片/play.png" alt="">
            </li>
              
        </ul>

    </div>
</body>
</html>