常见Html布局的CSS样式设置！(span图标、伪类元素+过渡动画transition)

最新推荐文章于 2024-06-07 08:00:00 发布
最新推荐文章于 2024-06-07 08:00:00 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： HTML 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39590098/article/details/104416644
版权
本文详细介绍了HTML布局的多种方法，包括页面大框架的布局设置，使用span标签创建小图标，结合伪类元素和过渡动画实现动态效果，img图片的适应性设置，以及文字垂直居中和对话框居中显示的技巧。此外，还涵盖了遮罩层的创建以及CSS实用属性如box-sizing和cursor的应用。
摘要由CSDN通过智能技术生成

case 01

页面大框架的布局设置

  • 第一种：（用的比较多）
    先将网页结构分成大块(div)，每块都设置成 width：100%; 给height设置高度，再内部自己定义宽高
  • 第二种：
    大块(div)的高度不设置，只设置width:100% , 高度由大块内部盒子撑开
  • 第三种：
    大块(div)的宽度不设置，只设置高度，宽度由内部width:100%撑开【该种情况适用于只放图片banner】
    【注意：只设置高度，不设置宽度，其中宽度默认会是占满父级的宽度】
//以下是第一种布局的设置！
//HTML
<body>
	<div class="header"></div>
	<div class="banner"></div>
	<div class="footer"></div>
</body>

//CSS
.header{
	width:100%;
	height:80px;
}
.banner{
	width:100%;
	height:500px;
}
.footer{
	width:100%;
	height:300px;
}

case02

span标签用于放置小图标

  • 手法：
    • display：inline-block; //设置成行内块
    • 设置宽高(width、height) //用宽高撑出背景内容
    • background：url(图片位置) no-repeat center; //不重复，居中显示
    • background-size：contain; //填充满
//HTML
<a href="javascript:;" class="my-cart">
	<span class="icon-cart"></span>购物车
</a>
 
//CSS
.icon-cart{
     display: i
最低0.47元/天 解锁文章
杜杜杜俊杰
关注
专栏目录
CSS实现图标样式思路+总结
qq_41096610的博客
10-03 1222
最近需要利用纯CSS来实现各种图标样式，发现这是一件挺有意思的事情，总结如下，与君共勉。 前言 首先，利用CSS绘图，需要对CSS有一个基础的认识，可以参照《W3school_css教程》。 总结 其实，CSS绘图与我们平常画图有着相似之处。首先需要分析所绘图形可以拆分成由哪些简单的图形组成。如果不能拆分，那就考虑考虑可以由哪些所熟悉的图形改变而成。总而言之，就是需要将一个复杂的图标简化成我们所熟悉的。当然对于一些比较常用的图标，我们需要清楚绘制原理，例如圆、三角形等，很多复杂的图标都是利用简单的图标组合而
span小图标踩坑
weixin_45643442的博客
09-20 843
以前踩过，结果忘了又再次跌倒 ！！ 用来做小图标的图片大小要和你设置的宽高一样，不然他是截取图片上那个大小的区域，所以很可能会什么都没有显示。 首先span是行内标签，你要把它设置为block或inline-block，然后设置宽高。 实例代码： display: block; width:20px; height:20px; background: url(’…/images/s.png’) 我的图标大小也是20x20，这个用ps一下就行 ...
span标签内使用icon图标，icon和文字位置水平对齐
weixin_45717984的博客
06-23 5216
span标签里面嵌套icon图标，图标位置和文字位置水平对齐
html中如何引入icon
yao_1996的博客
01-26 1712
前端引入icon库挑选图标1.进入阿里矢量图标库: [传送门](https://www.iconfont.cn/)2.挑选自己喜欢的图标并添加至购物车3.进入购物车，下载代码导入至项目1. 复制下载的文件至项目2.使用引入的图标(1).font classa. 引入 下载文件 中的iconfont.cssb. 挑选相应图标并获取类名，应用于页面(1).Unicode 挑选图标 1.进入阿里矢量图标库: 传送门 2.挑选自己喜欢的图标并添加至购物车 3.进入购物车，下载代码 下载文件如下： 导入至项目 1.
html行内设置样式,Js获取/设置行内样式和非行内样式
weixin_34442215的博客
06-09 1401
1、获取行内(内嵌、行间)样式：obj.style.attr;进行获取非行间样式。2、设置行内样式：obj.style.attr = value;3、获取非行内样式：function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值if(obj.currentStyle){ //针对ie获取非行间样式return obj.currentStyle[a...
【实例】html中span标签的css样式添加
神创的博客
02-14 1万+
----------------------------------------------------------------------------            正想要处理选择器的一些事宜，却巧合的处理了css加入html中的问题= =，菜鸟进阶中            此后，就是如何选择文本中的特定文字，进行span标定，已经样式的改变；以及提取父级----------------...
HTML圣诞树+CSS独立文件+圣诞树螺旋旋转特效.zip
12-20
8. **自定义字体与图标**：可能会使用`@font-face`规则引入自定义字体，或者用`content`属性结合`::before`和`::after`伪元素添加SVG图标或Web字体图标来装饰圣诞树。 综上所述，这个项目不仅展示了HTML和CSS的基础...
2024最新前端面试题(八股文)一阶段总结（html，css）!!!!新手必看必背!通俗易通!全面!全是干货！
shixindonga1226的博客
01-13 4052
•支持动画，只有全透明和不透明两种模式，只有 256 种颜色,适用于简单动画、徽标和简单图形等应用场景。•常见格式,采用有损压缩算法，保持图像质量的同时减小文件大小 ,体积较小，不支持透明，不支持动画采用无损压缩算法，体积也相对较小，支持透明背景，不支持动画一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰画质最好，文件太大，不利于网络传输谷歌开发的一种图片格式,较小的文件大小,较高图像质量,格式新,要考虑兼容性.
html+css3电影卡片
03-15
6. **动画效果**：利用CSS3的过渡(`transition`)和动画(`animation`)，为鼠标悬停等交互添加动态效果。 7. **评分样式**：使用伪元素(`::before`或`::after`)和`content`属性创建星星图标，展示电影评分。 例如，一...
HTML+CSS+JS 动态展开式菜单
最新发布
正在创作系列：【若冰说CSS】
06-07 1271
实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有一个图标和文字。当菜单展开时，选项会以渐变的方式出现。
html如何太假icon图标,如何在我的html中使用Flaticon中的图标？
weixin_33539366的博客
06-04 1439
我想给我的网站一些图标。现在我看到很多人使用这个网站Flaticon。如何在我的html中使用Flaticon中的图标？我所做的是把这样的事情在我的CSS：/*** Font 1*/@font-face {font-family: "Flaticon1";src: url("flaticon1.eot");src: url("flaticon1.eot#iefix") format("embedd...
html 页面样式-- div span 排版
churchill的专栏
02-29 1626
由于div默认是block   块   会换行 span默认是inline   内联   同一行  html>head>head>body>div align=left style="display:inline;border:1px solid green;width:20px;">11div>div align=center style="display:inline;border
HTML5span中加入超链接,html到css基础第一日2018-10-06
weixin_39915815的博客
05-30 1157
html百度截取的旁边的页面描述 SEO search engine optimization 搜索引擎优化 关键词 告诉搜索引擎这个网页是干什么的，提高搜索正确性UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。保存大小： UTF-8(更臃肿、加载更慢) > gb2312 (更小巧，加载更快)总结：UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；g...
关于前端引入icon图标
小吴同志的博客
06-24 1万+
一、先说说引入时可能遇到的问题 引入之后看不见图标 引入之后图标显示为小方框 二、找原因 查看是否正确引入bootstrap/font-awesome的css文件 Glyphicons 字体图标除需引入bootstrap的css文件外，还需引入fonts 引入的文件路径是否正确 HTML界面引用图标的代码是否正确 三、解决办法bootstrap的icon引入 bootstrap中有开源的Gly
ImageSpan 居中显示
vincecarterhu的博客
10-11 2335
要实现Textview中的图文混排需要让图片基于文字居中显示这个就需要自定义ImageSpan 并重写其ondraw的方法来实现， 先看效果那个红点和文字 就居中显示了 OK直接上代码 package com.vc.widget; import android.content.Context; import android.graphics.Bitmap; import androi...
csdn表单标题前加图标
leng0920的博客
10-30 330
<template> <div class="hello"> <el-form> <el-row> <el-col :span="5"> <div class="grid-content bg-purple"> <el-form-item label-width="120px"> <span slot="..
html中span标签的详细介绍
热门推荐
qy_yyyyy的博客
11-11 4万+
一、span标签的定义及用法 在html中，span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签本身并没有什么格式表现（比如：换行等），需要对它应用样式才会有视觉上的变化。 span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。 二、span标签语法格式 内容 三.语法格式说明 1.span标签是内联元素，不像块级元素（如：div标签、p标签等）那样有换行的效果； 2.如果不对span元素应用样式，使用span标签没有任何的显示效
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值