![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 73
Seven_5477
这个作者很懒,什么都没留下…
展开
-
css实现奥运五环(立体)
看上面的图,五个环是互相穿过,有遮挡的立体图案,不是直接平铺的。主要思路:每个可见环都是两个环(本身环+伪元素环)重叠显示的,把伪元素环的z-index设置为1,使伪元素环浮在本身环的上面。然后把伪元素环某个方向的border-color设置为透明色transparent,使其透明,另一个可见环的颜色就会显示出来,从而实现被遮挡的效果。<!doctype html><html lang="en"><head> <meta charset...原创 2021-08-16 14:05:24 · 593 阅读 · 0 评论 -
flex布局练习
题目来源题1:整体框架示例使用Flex模型编写HTML页面代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi原创 2021-07-25 19:19:50 · 629 阅读 · 0 评论 -
table利用colspan实现跨行,table td实现跨半行
想只用一个table实现这样一个表格:可以看到第二行和第三行的列数是不一样的,通过定义第二行和第三行width是没有用的,会影响第一行的排版。可以用colspan实现跨行。比如我设置第二行的第二列是它对应的上一行的跨三行:代码如下:<table style="width: 100%;letter-spacing: 0.5px;"> <thead> <tr class="trStyle2"> <th cla原创 2021-06-02 11:16:41 · 2633 阅读 · 0 评论 -
float:包裹性、破坏性、清除浮动和影响;浮动元素后的文字不移动
float的最初作用是:实现文字环绕效果。但是现在的float主要用于布局,先介绍一下float的两个特性:包裹性破坏性包裹性指的是,浮动元素的宽度会收缩到与内容一致。通常,盒子不设置宽高的时候,默认的宽度是100%,高度由内容决定。但是浮动会使盒子产生包裹性,宽度收缩到内容的宽度。<div style="border: 2px solid red;"> <img src="./images/2.jpg" width="150px" height="100原创 2020-08-19 13:56:00 · 1109 阅读 · 0 评论 -
li标签设置float:left;时,第二行第一个li移到最右,第二个后面的挤到第三行。原因:li没有定高导致高度坍塌。
想要实现的效果:但是在给li标签设置float:left;时,出现下面这种情况:我的代码:ul li { float: left; width: 100px; text-align: center; font-size: 12px;}原因是:没有定高,高度坍塌。可以选择定高。但是我写的这个场景,因为每个li的内容都不是一样多,所以无法定高。在折中情况下,解决方法有两个:1. 清除第二行第一个的浮动。<li style="clear: both;"原创 2020-07-13 13:28:29 · 1749 阅读 · 0 评论 -
单选框radio和复选框checkbox的样式更改:利用伪元素
首先要知道的是:单选框radio和复选框checkbox的样式本身是无法更改的,想要自定义样式,必须用到伪元素。第一步:用span或者i标签来写单选框/复选框。把这个标签放在input的后面,并且用label将两者包裹起来。 <label class="radio">黑名单模式 <input type="radio" name="mode" value="1"> <i></i> </label> <原创 2020-07-09 15:31:27 · 1088 阅读 · 0 评论 -
html+css+js轮播图:手动轮播,自动轮播
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- <script type="text/javascript" src="demo.js"></script> --></head><style type="text/css"> *{ margin: 0; paddin原创 2020-06-19 16:57:26 · 23224 阅读 · 14 评论 -
@font-face矢量图标引用的两种方法:在线引用和离线引用,以及图标无法显示的原因
在写web的时候常常用到iconfont.cn这个网站(阿里巴巴矢量图标),但是怎么引用呢?一、找到图标并添加到购物车进入网站后登录,然后搜索相关图标找到想要的图标后点击加入购物车二、下载源码把想要的图标全部加到购物车后,点击右上角的购物车,然后选择下载代码下载后的文件有这么多三、根据教程操作点击这个html,进入教程,选择unicode引用根据步骤操作这些代码复制到你的总样式表文件中即可,不用另外新建文件四、修改路径一般情况下我们把这几个字体文件放在一个新建的font文件原创 2020-05-12 09:49:32 · 1220 阅读 · 0 评论