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


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


文章目录

  • 作业
  • 2024.4.8-学习笔记
    • 盒子阴影
    • 文本阴影
    • 透明的
    • vertical-align
    • 字体使用

作业

在这里插入图片描述

<!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>
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>* {margin: 0;padding: 0;}a {text-decoration: none;color: black;}a:hover {color: red;}.footer {position: fixed;bottom: 0;/* 表示宽度为100%, left=0,right=0,就会让这个盒子进行拉伸 */left: 0;right: 0;height: 100px;font-size: 0;box-shadow: 0 0 10px #ccc;}.iconfont {font-size: 50px;}/* 规范建议:能用标准流的,就不用浮动或者固定、绝对定位脱标 */.footer .item {width: 25%;/* float: left; */display: inline-block;font-size: 18px;text-align: center;cursor: pointer;margin-top: 15px;}</style>
</head>
<body><div class="footer"><a href="#" class="item"><div><span class="iconfont icon-shouye"></span></div><div>首页</div></a><a class="item"><div><span class="iconfont icon-fenlei"></span></div><div>分类</div></a><a class="item"><div><span class="iconfont icon-gouwuche"></span></div><div>购物车</div></a><a class="item"><div><span class="iconfont icon-wode"></span></div><div>我的</div></a></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}body {/* month计数的名字,现在是0 */counter-reset: month;}.box {width: 300px;margin: 30px auto 0;counter-reset: day;}.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><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>

在这里插入图片描述

2024.4.8-学习笔记

盒子阴影

outset是默认的,但不能写

阴影只是渲染效果,不会影响实际div大小

文本阴影

透明的

opacity:value; value:[0,1] 文本也会变透明,是可继承的

bcakground-color设置的透明度只是背景变化,文本没有影响

在这里插入图片描述

在这里插入图片描述

vertical-align

只针对行内元素、行内块元素。

在这里插入图片描述

image默认基线对齐。

在这里插入图片描述

在这里插入图片描述

image底下有空白就是因为基于基线对齐,基线距离底部有一段距离

1.消除距离,bottom,middle,top 都可以

2.变成块级元素。

在这里插入图片描述

字体使用

1.@font-face是一个css3的引入第三方字体的扩展样式。

多个url为了使主浏览器进行兼容配置

2.定义使用iconfont的样式

3.各种图标的编码

根据@font-face进行拷贝文件

&和;是html里面编码必须的

#x是代表后面的编码是一个十六进制的数字

也可以用伪元素写

浏览器第一次链接这个字体文件会进行缓存,如果后期新增就需要强制刷新 ctrl + f5

规范建议:能用标准流的,就不用浮动或者固定、绝对定位脱标。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年网络安全趋势前瞻:从AI攻击到云安全新挑战

随着2024年开展新的序幕&#xff0c;网络安全领域正面临着前所未有的挑战与机遇&#xff0c;一系列引人注目的趋势和预测逐渐浮出水面。 一、AI技术发展引发的安全问题 近年来&#xff0c;我们见证了AI技术的飞速进步&#xff0c;其中ChatGPT等引领潮流的AI服务成为公众瞩目的…

STL优先队列比较器

有两个比较器&#xff0c;在std里面&#xff0c;一个是greater&#xff0c;一个是less&#xff0c;他们都有一个可以指定的模板类型。 #include <bits/stdc.h> using namespace std; struct node {bool operator ()(const string& a, const string& b){return a…

Linux——计算机进程基础知识

计算机基础知识 1.计算机组成五大部件: (1) 运算器 &#xff1a;也叫算数逻辑单元&#xff0c;完成对数据的各种常规运算&#xff0c;如加减乘除&#xff0c;也包括逻辑运算&#xff0c;移位&#xff0c;比较等。 (2) 控制器 &#xff1a; 它是整个计算机系统的控制中心&…

【云开发笔记No.29】如何建设数据中台

数据中台的建设是一个系统性工程&#xff0c;涉及多个层面和多个步骤。以下是根据当前行业实践和技术发展趋势总结的数据中台建设的关键步骤&#xff1a; 统一数据标准与规范&#xff1a; 确立统一的数据指标口径&#xff0c;消除数据的二义性&#xff0c;这是确保数据质量和一…

嵌入式算法开发系列之大林算法

嵌入式系统中的大林算法 文章目录 嵌入式系统中的大林算法前言一、大林算法原理二、大林算法应用三、C语言实现总结 前言 在嵌入式系统中&#xff0c;算法的选择对系统性能和资源利用具有重要影响。大林算法是一种常见的图论算法&#xff0c;用于求解最小生成树和最短路径等问…

【三维重建工具】NeRFStudio、3D GaussianSplatting、Colmap安装与使用指南(更新中)

目录 一、NeRFStudio安装1.安装&#xff08;ubuntu系统&#xff09;2.安装&#xff08;windows系统&#xff09; 二、安装tinycudann三、Colmap安装与使用1. 安装依赖2. 安装colmap3.使用colmap3.1 可视化界面使用3.2 Nerfstudio命令行调用Colmap 四、使用NeRFStudio进行三维重…

行云防水堡-打造企业数据安全新防线

企业数据安全&#xff0c;顾名思义就是通过各种手段或者技术或者工具保障企业数据的安全性&#xff1b;保障数据信息的硬件、软件及数据受到保护&#xff0c;不受偶然的或者恶意的原因而遭到破坏、更改、泄露&#xff0c;系统连续可靠正常地运行&#xff0c;信息服务不中断。目…

常见的八大排序总结

下面列出了八种常见的排序算法&#xff0c;以及它们的特点以及相同点和不同点&#xff1a; 1. 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff1a; - 特点&#xff1a;通过重复遍历要排序的列表&#xff0c;比较每对相邻的元素&#xff0c;并依次交换顺序&#xff0…

linux tasklet

软中断、tasklet 以及工作队列&#xff0c;均是 linux 中将任务推后执行的机制。其中工作队列与用户态使用的线程池类似。 什么是任务推后执行呢 ? 可以借助于开发应用时经常使用的线程池来理解。任务推后执行&#xff0c;就是任务本该执行的时候没有立即执行&#xff0c;而是…

文档转换失败如何排查?魔众文库系统

如何排查 文档转换失败时&#xff0c;请查看最新的日志文件 storage/logs/laravel-*.log 日志文件中会将执行的命令和命令执行后返回的结果存储到日志中&#xff0c;请参考日志报错信息自行解决。

西圣、漫步者、万魔开放式耳机怎么样?无广真实测评对比推荐

开放式耳机因其独特的音质体验和佩戴舒适度&#xff0c;受到了越来越多消费者的青睐。西圣、漫步者、万魔作为国内知名的耳机品牌&#xff0c;各自都推出了自家的开放式耳机产品&#xff0c;那么&#xff0c;这三款耳机究竟如何呢&#xff1f;身为开放式耳机党的我&#xff0c;…

Datacom HCIP笔记-MPLS协议 之一

MPLS标签放在二层头和IP头之间可以称之为2.5层的位置 LSP&#xff08;Label Switched Path&#xff09;&#xff1a;标签交换路径&#xff0c;艮即到达同一目的地址的报文在MPLS网络中经过的路径。 FEC&#xff08;Forwarding Equivalent Class&#xff09;&#xff1a;一般指具…

编辑脚本 shell中的符号

shell中的符号 ~&#xff1a;家目录 !&#xff1a;执行历史命令 $&#xff1a;取变量内容 - * / %:数学运算符 &&#xff1a;后台执行 *&#xff1a;通配符 ?&#xff1a;匹配除回车以外的一个字符 ;&#xff1a;命令分隔符 |&#xff1a;管道符&#xff0c;该符号的上一…

【科研】SCI同行评审-审稿指南与意见撰写

【科研】SCI同行评审-审稿指南与意见撰写 文章目录 1、审稿指南 By Elsevier2、审稿指南 By Nature3、审稿意见撰写 1、审稿指南 By Elsevier Elsevier审稿人注意事项 Elsevier如何进行同行评审 how-to-review 完整的研究文章 检查手稿中解决的研究问题的重要性&#xff08;例…

uniapp:Hbuilder没有检测到设备请插入设备或启动模拟器的问题解决

问题 使用模拟器调试运行项目时&#xff0c;出现以下提示&#xff0c;“没有检测到设备&#xff0c;请插入设备或启动模拟器后点击刷新再试”。排查了一天最终找到原因。 解决 已确认模拟器是已经正常启动&#xff0c;并且Hbuilder设置中的adb路径和端口都配置没有问题&#…

一文搞懂从爬楼梯到最小花费(力扣70,746)

文章目录 题目前知动态规划简介动态规划模版 爬楼梯一、思路二、解题方法三、Code 使用最小花费爬楼梯一、思路二、解题方法三、Code 总结 在计算机科学中&#xff0c;动态规划是一种强大的算法范例&#xff0c;用于解决多种优化问题。本文将介绍动态规划的核心思想&#xff0c…

主从复制、数据持久化 、Redis主从集群、哨兵机制 、Redis分片集群

数据持久化 Redis、主从集群、哨兵机制 Redis分片集群 1、单点 redis 的问题2、主从复制2.1 命令传播 3、Redis的持久化3.1 AOF3.2 RDB&#xff08;默认方式&#xff09;RDB 方式&#xff1a;执行快照时&#xff0c;数据能被修改吗&#xff1f;RDB 方式总结 3.3 RDB 和 AOF 组合…

电路基础-电容-电感

电路基础 电容 通交流阻直流&#xff0c;滤波&#xff0c;旁路&#xff0c;退耦&#xff0c;作驱动电源&#xff08;洗衣机电机启动时需要一个强电启动&#xff09; 电容选型的工程值&#xff1b;参考以往开发板的选型&#xff1b;抄作业。 电源并连多个电容的作用 保证单…

30万奖金谁能瓜分?OurBMC开源大赛决赛入围名单公示

首届开放原子开源大赛基础软件赛道自今年 1 月开启报名以来&#xff0c;吸引了全国各地 BMC 技术爱好者的广泛关注和踊跃报名。该赛事由开放原子开源基金会牵头&#xff0c; OurBMC 社区及理事长单位飞腾信息技术有限公司联合承办&#xff0c;以 “基于 BMC 技术的服务器故障诊…

go的orm框架-Gorm

官网文档 特点 全功能 ORM 关联 (拥有一个&#xff0c;拥有多个&#xff0c;属于&#xff0c;多对多&#xff0c;多态&#xff0c;单表继承) Create&#xff0c;Save&#xff0c;Update&#xff0c;Delete&#xff0c;Find 中钩子方法 支持 Preload、Joins 的预加载 事务&…