制作文字logo

最新推荐文章于 2022-09-29 01:46:22 发布

喝着奶茶敲实验

最新推荐文章于 2022-09-29 01:46:22 发布

阅读量836

点赞数

分类专栏：网页设计与制作

本文链接：https://blog.csdn.net/weixin_45756724/article/details/108515532

版权

网页设计与制作专栏收录该内容

5 篇文章 0 订阅

订阅专栏

制作文字logo

实验步骤
代码
效果

实验步骤

打开VSCode，在自己的文件夹中新建网页文件，文件名logo.html，输入！，按Tab键自动生成H5网页框架标签。
将title标签内容改为“文字Logo”，在内添加6个标签，分别设置标签内容和class以及id值
在自己的文件夹中新建文件夹css，在css中新建文件logo.css，在logo.html的标签中引入css文件
在logo.css中设置标签选择器、类选择器和id选择器的属性和值，两个文件分别保存后在浏览器查看效果

代码

04logo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字logo</title>
    <link rel="stylesheet" href="CSS/04logo.css" />
</head>
<body>
    <strong class="blue">G</strong>
    <strong class="red">o</strong>
    <strong id="orange">o</strong>
    <strong class="blue">g</strong>
    <strong id="green">l</strong>
    <strong class="red">e</strong>
</body>
</html>

04logo.css

strong {
    font-size: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.blue{
    color:blue;
}
.red{
    color:red;
}
#orange{
    color:orange;
}
#green{
    color: green;
}

在这里插入图片描述

效果

在这里插入图片描述

喝着奶茶敲实验

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
制作文字logo

制作文字logo实验步骤代码效果实验步骤打开VSCode，在自己的文件夹中新建网页文件，文件名logo.html，输入！，按Tab键自动生成H5网页框架标签。将title标签内容改为“文字Logo”，在内添加6个标签，分别设置标签内容和class以及id值在自己的文件夹中新建文件夹css，在css中新建文件logo.css，在logo.html的标签中引入css文件在logo.css中设置标签选择器、类选择器和id选择器的属性和值，两个文件分别保存后在浏览器查看效果代码04logo.ht
复制链接

扫一扫