自制校训

最新推荐文章于 2024-07-14 12:57:13 发布

Matcha_ice_cream

最新推荐文章于 2024-07-14 12:57:13 发布

阅读量293

点赞数

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

本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/117043533

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自制校训logo

使用学校logo，自制校训并显示

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校训logo</title>
    <style type="text/css">
        #box1 {
            background: rgb(136, 136, 177);
            width: 500px;
            height: 100px;
        }
        #box2 {
            width: 110px;
            height: 100px;
            background-image: url(../images/logo.jpg);
            background-size: 110px 100px;
            background-repeat: no-repeat;
            float: left;
        }
        #box3 {
            text-align: center;
            font-family:隶书;
            font-size: 40px;
            line-height:100px;
            color: rgb(58, 69, 168);
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    <div id="box3">诚 毅 勤 敏</div>
    
</body>
</html>

效果图：
在这里插入图片描述
注意：
1、在插入图片时要注意图片的路径
以图片1.jpg为例，假设存储图片的文件夹为images：
（1）图像图片位于html文件的同一级：直接使用1.jpg
（2）图像图片位于html文件下一级：/images/1.jpg
（3）图像图片位于html文件上一级：. ./images/1.jpg

Matcha_ice_cream

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自制校训

自制校训logo使用学校logo，自制校训并显示代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>校训logo</title> <style
复制链接

扫一扫