Web前端平时练习

Sealgost

已于 2023-04-17 20:35:33 修改

阅读量137

点赞数

文章标签：前端

于 2023-04-17 20:11:44 首次发布

本文链接：https://blog.csdn.net/sealfight/article/details/130207832

版权

平时练习一

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

![示例](https://img-blog.csdnimg.cn/fa51720b7d974fcb8eec75c3c33730c1.pn
说明：
内容相对于浏览器居中，图标见附件disc.jpg
盒子边框1px solid #ccc，内边距20px
文本字体颜色#122e67，文本高度30px
代码：

<html>

    <head>
        <meta charset="utf-8">
        <title>E1.1</title>
    </head>

    <body>
        <div id="ul">

            <div><img src="./images/disc.jpg"> 人要把饭碗端在自己手里 要装自己的粮食</div>
            <div><img src="./images/disc.jpg"> 解读白皮书</div>
            <div><img src="./images/disc.jpg"> 马歇尔</div>
            <div><img src="./images/disc.jpg"> 问题回答意味深长</div>
            <div><img src="./images/disc.jpg"> 60周年</div>
            <div><img src="./images/disc.jpg"> 回应</div>

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

<style>
    #ul{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        color: #122e67;
        line-height: 30px;

        padding-left: 20px;
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;

        border-width:1px;
        border-style:solid;
        border-color: #ccc;
    }
</style>

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

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

代码：

<html>

    <head>
        <meta charset="utf-8">
        <title>E1.2</title>
    </head>

    <body>
        <div>
            <ul id="ul">
                <li>
                    <span id="first01">抱抱果新首发</span><br>
                    <span id="second01">抱一下就幸福</span>
                    <img src="./images/1.jpg">
                </li>
                <li>
                    <span id="first02">天猫冰箱节</span><br>
                    <span id="second02">智由随风</span>
                    <img src="./images/2.jpg">
                </li>
                <li>
                    <span id="first03">西门子全球精选</span><br>
                    <span id="second03">旗舰精品享你所想</span>
                    <img src="./images/3.jpg">
                </li>
                <li>
                    <span id="first04">进口葡萄酒专场</span><br>
                    <span id="second04">原瓶进口品质保证</span>
                    <img src="./images/4.jpg">
                </li>
                <li>
                    <span id="first05">手机专场</span><br>
                    <span id="second05">原装正品</span>
                    <img src="./images/5.jpg">
                </li>
            </ul>
        </div>
    </body>

</html>

<style>

    #ul{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    #ul li{
        display: inline-block;
        height: 200px;
        width: 216px;
        padding-top: 20px;
        padding-left: 20px;

    }

    #first01{
        font-size: 18px;
        color: #000;
    }
    #first02{
        font-size: 18px;
        color: #000;
    }
    #first03{
        font-size: 18px;
        color: #000;
    }
    #first04{
        font-size: 18px;
        color: #000;
    }
    #first05{
        font-size: 18px;
        color: #000;
    }

    #second01 {
        font-size: 14px;
        color: #64C333;
    }
    #second02{
        font-size: 14px;
        color: #64C333;
    }
    #second03{
        font-size: 14px;
        color: #64C333;
    }
    #second04{
        font-size: 14px;
        color: #64C333;
    }
    #second05{
        font-size: 14px;
        color: #64C333;
    }

    #ul img{
        padding-left: 60px;
        width: 154px;
    }

</style>

3. 完成下图所示的静态网页制作**

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

代码：

<html>

    <head>
        <meta charset="utf-8">
        <title>E1.3</title>
    </head>

    <body>
        <div>
            <ul id="ul">
        
                <li>
                    <img src="./images/pic1.jpg" width="250" height="188">
                    <span id="f1">动画便利店X果壳网《西门子洗碗机...</span> <br>
                    <span id="f21">原创作品</span>
                    <span id="f22">-影视-Motion-Graphic</span> <br>
                    <span id="f3">2小时前上传</span> <br>
                    <span id="f41">1284</span>
                    <span id="f42">人气/</span>
                    <span id="f43">11</span>
                    <span id="f44">评论/</span>
                    <span id="f45">47</span>
                    <span id="f46">推荐</span> <br>
                    <img src="./images/play.png">
                </li>
                <li>
                    <img src="./images/pic2.gif" width="250" height="188">
                    <span id="s1">动画便利店X视知《到底工资怎么发...</span> <br>
                    <span id="s21">原创作品</span>
                    <span id="s22">-影视-Motion-Graphic</span> <br>
                    <span id="s3">3小时前上传</span> <br>
                    <span id="s41">1569</span>
                    <span id="s42">人气/</span>
                    <span id="s43">50</span>
                    <span id="s44">评论/</span>
                    <span id="s45">125</span>
                    <span id="s46">推荐</span> <br>
                    <img src="./images/play.png">
                </li>
                
            </ul>
        </div>
    </body>
</html>

<style>
    #ul{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
    }

    #ul li{
        height: 320px;
        width: 250px;
        margin: 10px;
        padding: 10px;
        
        border-width:1px;
        border-style:solid;
        border-color: #ccc;
    }

    #f1{
        font-size: 14px;
        color: #666;
        line-height: 32px;
    }

    #f21{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #f22{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #f3{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #f41{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #f42{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #f43{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #f44{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #f45{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #f46{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }

    #s1{
        font-size: 14px;
        color: #666;
        line-height: 32px;
    }

    #s21{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #s22{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #s3{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #s41{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #s42{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #s43{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #s44{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }
    #s45{
        font-weight: bold;
        font-size: 12px;
        color: #FF5584;
        line-height: 25px;
    }
    #s46{
        font-size: 12px;
        color: #66667F;
        line-height: 25px;
    }

</style>

Sealgost

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端平时练习

每项中第一行文字14px，颜色#666，文本行高度32px。其他行文字12px，颜色#66667F，文本行高度25px。将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px。列表项高320px 宽250px，外间距10px，内间距10px，边框线1px solid #ccc。上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333。所需图片见附件，图片宽度154px，左间距60px。所需图片见附件，图片宽度250px，高度188px。
复制链接

扫一扫