2024.4.9-day12-CSS 常用样式属性和字体图标

news2024/11/26 0:50:37

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

  • 作业

作业

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="三角形" content="三角形">
        <meta description="三角形" content="三角形">
        <title>三角形</title>
        <style>
            .btn {
                position: relative;
                width: 100px;
                height: 50px;
                background-color: black;
                color: white;
                margin: 30px auto 0;
                line-height: 50px;
                text-align: center;
            }
            .tips {
                position: absolute;
                width: 300px;
                height: 50px;
                left: 50%;
                background-color: blue;
                margin-left: -150px;
                top: 60px;
                color: white

            }
            .tips::after {
                content:'';
                position: absolute;
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border: 10px solid transparent;
                border-bottom-color: red;
                left: 50%;
                margin-left: -10px;
                bottom: 50.5px;

            }
            .btn:hover .tips  {
                display: block;
            }
            .btn .tips {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="btn">
            查看
            <div class="tips">我想学习前端知识</div>
        </div>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="图片" content="图片">
        <meta description="图片" content="图片">
        <title>图片</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            div {
                width: 300px;
                margin: 30px auto 0;
                background-color: blue;
            }
            .method1 {
                display: block;
            }
            .method2 {
                /* vertical-align: top;
                vertical-align: middle; */
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./images/1.jpg" height="50px">          

        </div>
        <div>
            <img class="method1 " src="./images/1.jpg" height="50px">
        </div>
        <div>
            <img class="method2 " src="./images/1.jpg" height="50px">
        </div>
      
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="计数器" content="计数器">
        <meta description="计数器" content="计数器">
        <title>计数器</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            body {
                counter-reset: month;
            }
            .box {
                counter-reset: day;
                width: 300px;
                margin: 30px auto 0;
                
            }
            .month {
                text-align: center;
            }
            .month::after {
                counter-increment: month;
                content: '第 'counter(month)'月';
            }
            .day>li {
                float: left;
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
            }
            .day>li::after {
                counter-increment: day;
                content: counter(day);
            }
            .clearfix::after {
                content: '';
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h3 class="month"></h3>
            <ul class="day clearfix">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="box">
            <h3 class="month"></h3>
            <ul class="day clearfix">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="字体图标" content="字体图标">
        <meta description="字体图标" content="字体图标">
        <title>字体图标</title>
        <link rel="stylesheet" href="./iconfont/iconfont.css">
        <style>
            * {
                padding: 0;
                margin: 0;  
            }

            .fotter {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div class="fotter">
            <span class="iconfont" style="color:blue;">&#xe622;</span>
            <span class="iconfont">&#xe61d;</span>
            <span class="iconfont">&#xe616;</span>
            <span class="iconfont">&#xe6e2;</span>
            <span class="iconfont">&#xe892;</span>
            <span class="iconfont icon-gouwuche"  style="color:blue;"></span>
            <span class="iconfont icon-wode"></span>
            <span class="iconfont icon-fenlei"></span>
            <span class="iconfont icon-shouye"></span>
            <span class="iconfont icon-shezhi"></span>
        </div>
    
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="字体图标" content="字体图标">
        <meta description="字体图标" content="字体图标">
        <title>字体图标</title>
        <link rel="stylesheet" href="./iconfont/iconfont.css">
        <style>
            * {
                padding: 0;
                margin: 0;  
            }

            a {
                text-decoration: none;
                color: black;
            }

            a:hover {
                color: red;
            }

            .fotter {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100px;
                font-size: 0;
                box-shadow: 0 0 10px #ccc;

            }
            
            .fotter .item {
                width: 25%;
                display: inline-block;
                font-size: 18px;
                text-align: center;
                cursor: pointer;
                margin-top: 15px;
            }
            
            .iconfont {
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div class="fotter">
            <a class="item">
                <div class="iconfont icon-shouye"></div>
                <div>首页</div>
            </a>
            <a class="item">
                <div class="iconfont icon-fenlei"></div>
                <div>分类</div>
            </a>
            <a class="item">
                <div class="iconfont icon-gouwuche"></div>
                <div>购物车</div>
            </a>
            <a class="item">
                <div class="iconfont icon-wode"></div>
                <div>我的</div>
            </a>
            
        </div>
    
    </body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1580283.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++进阶之路---何为智能指针？

C++进阶之路---何为智能指针？

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、为什么需要智能指针&#xff1f; 下面我们先分析一下下面这段程序有没有什么内存方面的问题&#xff1f;提示一下&am…
阅读更多...
通过系统防火墙，禁用同网段主机互访

通过系统防火墙，禁用同网段主机互访

要通过系统防火墙禁止同网段主机之间的互访&#xff0c;您可以在Windows操作系统中使用高级防火墙规则来实现。以下是在Windows环境中创建一条规则以阻止本地同一子网内的计算机互相访问的基本步骤&#xff1a; 对于Windows防火墙&#xff08;适用于Windows 7至Windows 11&…
阅读更多...
一文带你全面了解功能安全软件监控方案

一文带你全面了解功能安全软件监控方案

引言&#xff1a;功能安全标准&#xff08;ISO26262 Part6&#xff09;提到了用于错误探测的安全机制&#xff0c;其中就有程序流监控&#xff0c;如图1所示&#xff1b;本文主要探讨在AUTOSAR CP以及AP的场景下&#xff0c;怎么实现程序流监控。 图1 ISO26262 Part6 一、CP场…
阅读更多...
Android设备使用DS file远程访问群晖NAS管理本地文件

Android设备使用DS file远程访问群晖NAS管理本地文件

文章目录 1. 群晖安装Cpolar2. 创建TCP公网地址3. 远程访问群晖文件4. 固定TCP公网地址5. 固定TCP地址连接 DS file 是一个由群晖公司开发的文件管理应用程序&#xff0c;主要用于浏览、访问和管理存储在群晖NAS&#xff08;网络附加存储&#xff09;中的文件。这个应用程序具有…
阅读更多...
JS--demo实现随机点名

JS--demo实现随机点名

逻辑就是通过点击事件得到数组里面的随机一个值&#xff0c;再把这个值给删除&#xff0c;当数组长度为1的时候&#xff0c;停止点名&#xff0c;用disabled属性让用户不能进行点击。 <!DOCTYPE html> <html lang"en"><head><meta charset&quo…
阅读更多...
基于springboot实现校园资料分享平台系统项目【项目源码+论文说明】

基于springboot实现校园资料分享平台系统项目【项目源码+论文说明】

基于springboot实现校园资料分享平台系统演示 摘要 随着信息互联网购物的飞速发展&#xff0c;国内放开了自媒体的政策&#xff0c;一般企业都开始开发属于自己内容分发平台的网站。本文介绍了校园资料分享平台的开发全过程。通过分析企业对于校园资料分享平台的需求&#xff…
阅读更多...
电脑微信双开，微信微信多开支持多个微信同时登录，快速切换，方便快捷 电脑最简单的微信双开多开方法 电脑上怎么登录两个微信账号？电脑微信怎么能够双开？

电脑微信双开，微信微信多开支持多个微信同时登录，快速切换，方便快捷 电脑最简单的微信双开多开方法 电脑上怎么登录两个微信账号？电脑微信怎么能够双开？

支持多个微信账号同时登录&#xff0c;不限微信登录个数&#xff0c;运行快速&#xff0c;稳定不卡顿 集成所有聊天窗口&#xff0c;一键快捷切换&#xff0c;窗口再多也不乱&#xff0c;提高你的工作效率 同时管理多个微信号&#xff0c;且需要分别维护用户关系、粉丝社群 …
阅读更多...
Oracle表空间满清理方案汇总分享

Oracle表空间满清理方案汇总分享

目录 前言思考 一、第一种增加表空间的数据文件数量达到总容量的提升 二、第二种解决方案针对system和sysaux的操作 2.1SYSTEM表空间优化 2.2sysaux表空间回收 2.2.1针对sysaux的表空间爆满还有第二套方案维护 三、第三种解决方案使用alter tablespace resize更改表空间的…
阅读更多...
HTML转EXE工具（HTML App Build）永久免费版:24.4.9.0

HTML转EXE工具（HTML App Build）永久免费版:24.4.9.0

最新版本的HTML2EXE即将发布了。自从去年发布了HTML2EXE之后&#xff0c;我就正式上班了&#xff0c;一直忙于工作&#xff0c;实在没有时间更新&#xff08;上班时间不能做&#xff09;&#xff0c;很多网友下载使用&#xff0c;反应很好&#xff0c;提出了一些改进的建议&…
阅读更多...
Tomcat项目部署spring mvc项目，压测出现的问题

Tomcat项目部署spring mvc项目，压测出现的问题

Tomcat项目部署spring mvc项目&#xff0c;压测出现的问题 项目部署&#xff1a;docker部署时候设置的内存是80G&#xff0c;JVM堆内存的初始堆和最大堆设置的内存都是64G 1、压测的时候&#xff0c;并发1000&#xff0c;循环1次 日志显示&#xff1a;堆内存溢出 2、排查出…
阅读更多...
蓝桥杯单片机之PCF8591的使用

蓝桥杯单片机之PCF8591的使用

下文仅仅讲怎么使用。 本文章参考&#xff1a; 【蓝桥杯】PCF8591 A/D D/A转换应用_pcf8591中输出电压2v怎么表示-CSDN博客 蓝桥杯电子类单片机学习三——PCF8591 AD/DA转化器&#xff0c;AT24C02 EEPROM存储器&#xff08;iic驱动&#xff09;_蓝桥杯da转换输出的是什么-CS…
阅读更多...
dg_mmld部分复现

dg_mmld部分复现

Ours ( K ˆ \^{K} Kˆ2)复现结果– Photo&#xff1a;0.9634730538922156 (at Epoch 23) Art&#xff1a;0.8125 (at Epoch 23) Cartoon&#xff1a;0.7713310580204779 (at Epoch 18) 差距在可接受范围内 辅助信息 If you send 作者 an e-mail, 作者 will tell you a URL w…
阅读更多...
C/C++中const关键字用法总结

C/C++中const关键字用法总结

C基础专栏&#xff1a;http://t.csdnimg.cn/4FdOH 目录 1.引言 2.修饰变量 2.1.修饰普通变量 2.2.修饰指针 2.3.修饰对象 3.修饰函数形参 4.修饰函数返回值 5.修饰类成员函数 6.const与constexpr区别 7.总结 1.引言 在面试的过程&#xff0c;面试官经常都会问到const…
阅读更多...
arm-linux-gnueabihf-gcc默认目录

arm-linux-gnueabihf-gcc默认目录

默认编译的头文件目录&#xff1a; /usr/local/arm/gcc-linaro-4.9.4-2017.01-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/lib 默认编译的库文件目录&#xff1a; /usr/local/arm/gcc-linaro-4.9.4-2017.01-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/include/ …
阅读更多...
[C++]哈希应用之位图布隆过滤器

[C++]哈希应用之位图布隆过滤器

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;c大冒险 总有光环在陨落&#xff0c;总有新星在闪烁 前言&#xff1a; 我们之前…
阅读更多...
Hadoop安装部署-NameNode高可用版

Hadoop安装部署-NameNode高可用版

Hadoop分布式文件系统支持NameNode的高可用性&#xff0c;本文主要描述NameNode多节点高可用性的安装部署。 如上所示&#xff0c;Hadoop分布式文件系统部署了NameNode的Master主节点以及NameNode的Slave副节点&#xff0c;当Master主节点发生故障变得不可用时&#xff0c;ZooK…
阅读更多...
Vulnhub:DEVCONTAINER: 1

Vulnhub:DEVCONTAINER: 1

目录 信息收集 arp nmap nikto whatweb WEB 信息收集 dirmap 文件上传 提权 系统信息收集 横向提权 信息泄露 get root 信息收集 arp ┌──(root㉿ru)-[~/kali/vulnhub] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:50:56:2f:dd…
阅读更多...
Windows Server 2008添加Web服务器（IIS）、WebDAV服务、网络负载均衡

Windows Server 2008添加Web服务器（IIS）、WebDAV服务、网络负载均衡

一、Windows Server 2008添加Web服务器&#xff08;IIS&#xff09; &#xff08;1&#xff09;添加角色&#xff0c;搭建web服务器&#xff08;IIS&#xff09; &#xff08;2&#xff09;添加网站&#xff0c;关闭默认网页&#xff0c;添加默认文档 在客户端浏览器输入服务器…
阅读更多...
无需训练，这个新方法实现了生成图像尺寸、分辨率自由

无需训练，这个新方法实现了生成图像尺寸、分辨率自由

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 近日&#xff0c;来自香港中文大学 - 商汤科技联合实验室等机构的研究者们提出了FouriScale&…
阅读更多...
蓝桥杯-外卖店优先级

蓝桥杯-外卖店优先级

代码及其解析 #include<bits/stdc.h> using namespace std; const int N100010;int order[N]; //order[id] 第id号店上一次的订单,记录的是时间 int prior[N]; //prior[id] 第id号店的优先级 int flag[N]; //flag[id] 第id号店在不在优先缓存中struct node{int…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023