web前端实验一

最新推荐文章于 2023-04-22 22:44:58 发布

Alfafar

最新推荐文章于 2023-04-22 22:44:58 发布

阅读量1.8k

点赞数 6

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/Alfafar/article/details/116162522

版权

html 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1.应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210426170016298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsZmFmYXI=,size_16,color_FFFFFF,t_70说明：
~内容相对于浏览器居中，图标见附件disc.jpg
~盒子边框1px solid #ccc，内边距20px
~文本字体颜色#122e67，文本高度30px
在这里插入图片描述

<!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>
</head>
<style type="text/css">
.div1{margin: 0  auto; width:600px;  border:5px solid#ccc;padding: 20px;} 
.div2{ margin:0 auto; width:500px;  border:1px solid#ccc;padding: 20px;} 
li{
    text-align: left;

    color:#122e67;
    height:20px;
    padding-bottom: 1px;
    border-bottom-style:dotted;
    border-bottom-color: #ccc;
    list-style-image: url("images/disc.jpg");
}
    </style>
<body>

    <div  class="div1" >
        
        <div class="div2" align="left" >

            <ul>
                <li>
                    xxxxxxxxxxxxxxxxx
                </li>
                <li>
                       xxxxxxxxxxxxxxxxx
                </li>
                <li>
                       xxxxxxxxxxxxxxxxx
                </li>
                <li>
                       xxxxxxxxxxxxxxxxx
                </li>
                <li>
                      xxxxxxxxxxxxxxxxx
                </li>
                <li>
                       xxxxxxxxxxxxxxxxx
                </li>
            </ul>

        </div>
    </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>
</head>
<style type="text/css">
body{
    margin:0 auto;
    background-color: #ccc;
}
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>
            <span class="span1">
                抱抱果新首发
            </span>
            <span class="span2">
                抱―下就幸福
            </span>
            <img src="images/1.jpg"> 
        </li>
        <li>
            <span class="span1">
                天猫冰箱节
            </span>
            <span class="span2">
                智由随风
            </span>
            <img src="images/2.jpg">
            
        </li>
        <li>
            <span class="span1">
                西门子全球精选
            </span>
            <span class="span2">
                旗般精品享你所想
            </span>
            <img src="images/3.jpg">
        </li>
        <li>
            <span class="span1">
                进口葡萄酒专场
            </span>
            <span class="span2">
                原瓶进口品质保证
            </span>
            <img src="images/4.jpg">
            
        </li>
        <li>
            <span class="span1">
                手机专场
            </span>
            <span class="span2">
                原装正品
            </span>
            <img src="images/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>
</head>
<style>
   div{
       margin-left: 50%;
        margin: 0 auto;
    }
.h1{
    line-height: 32px;
    font-size:14px;
    color:#666;
    font-weight: bold;

}
.h2{
    line-height: 25px;
    font-size:12px;
    color:#66667F

}

 li{
     margin: 10px;
     height:320px;
     width:250px;
     padding: 10px;
     border:solid 1px#ccc;
    overflow: hidden;
    }
    strong{
        color:#FF5584;
    }
</style>
<body>
<div>
    <ul>

        <li>
            <img src="images/pic1.jpg" width="250px" height="188px">
            <span class="h1">动画便利店X果壳网《西门子洗碗机...</span>
            <p class="h2"><h class="h2"><strong> 原创作品</strong></h>-影视-Motion Graphic</p>
            <span class="h2">两小时前上传</span>
            <sapn class="h2">
                <strong>1569 </strong> 人气/<strong>50 </strong> 推荐
            </p>
            <img src="images/play.png">
        </li>
        <li>
            <img src="images/pic2.gif" width="250px" height="188px">
            <span class="h1">动画便利店X果壳网《西门子洗碗机...</span>
            <p class="h2"><h class="h2"><strong> 原创作品</strong></h>-影视-Motion Graphic</p>
            <span class="h2">两小时前上传</span>
            <sapn class="h2">
                <strong>1569 </strong> 人气/<strong>50 </strong> 推荐
            </p>
            <img src="images/play.png">
        </li>

</ul>
</div>

</body>
</html>

Alfafar

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
web前端实验一

1.应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。说明：~内容相对于浏览器居中，图标见附件disc.jpg~盒子边框1px solid #ccc，内边距20px~文本字体颜色#122e67，文本高度30px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
复制链接

扫一扫