![](https://img-blog.csdnimg.cn/20190906094654690.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
wendZzz
若有需要请联系微信号:coolbigflower
微信公众号:前端一起学
展开
-
CSS知识补充-选择器
目录一、CSS二、CSS引用 三、选择器1、简单的选择器2、复杂选择器(1)父子选择器(派生选择器)(2)直接子元素选择器(3)并列选择器(4)分组选择器3、权重计算CSS相关知识复习时,深究了一些发现自己知道的还是很少,之前只是会用却不了解所用的到底是什么,学海无涯。一、CSS首先第一点还是要知道一直说的CSS全称是什么,即cascading ...原创 2018-08-16 16:39:23 · 323 阅读 · 0 评论 -
自适应设计涉及的知识点(CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport)
1、PX(CSS pixels)1.1 定义虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px。1.2 注意在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,相对的是设备像素(device pixel)。在同样一个设备上,每1个CSS像素...转载 2019-02-13 21:27:21 · 937 阅读 · 0 评论 -
响应式布局的实现
响应式布局的概念响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。但需要注意的是,响应式布局的关键不仅仅在于布局,更多的是细节需要去考虑,譬如表单的响应式设计、图片的响应式设计。响应式布局的实现步骤当创建一个响应式网站,或者将非响应式布局改成响应式的时候,首先要关注的是元素的...原创 2019-03-27 17:21:12 · 527 阅读 · 0 评论 -
伪元素-webkit-scrollbar轻松更改滚动条样式
昨儿有需求写了个组件,要求改变文本框的默认滚动条样式。上网搜了一下,原来真有方法可以去修改,一直以为滚动条是默认的样式,是自己孤陋寡闻了。特意各方了解一下,写个测例,在此记录学习。大家都讲的方式就是利用-webkit-scrollbar,当然咯这是基于webkit内核的浏览器才有效,chrome上也可以看,毕竟是webkit分支出去的。首先需要知道的是伪元素和伪类。CSS3中通过:区分伪类...原创 2019-08-13 14:07:01 · 2130 阅读 · 0 评论 -
img自适应父容器
很多讲解图片自适应的方法都是将图片作为容器的背景图,通过背景图的一些属性来设置实现自适应的功能。但有时候难免需要用到嵌套在div中的img,将img自适应它的父容器div。html结构:<div class="imgWrap"> <img src="test.png"></div>首先需要图片在父容器中居中显示,使用flex布局.i...原创 2019-08-07 15:48:22 · 3938 阅读 · 0 评论 -
CSS3搞定图片变形再旋转
发现最近和图片样式杠上了。需要图片可以在根据X轴变形之后仍然能够顺时针或者逆时针旋转。达到如下效果:dom结构:<div class="imgWrap"> <img src="test.png"></div>首先,实现对图片的旋转:@keyframes imgRotate{ 0%{ transfo...原创 2019-08-12 14:07:09 · 1172 阅读 · 0 评论 -
纯css实现星级评分效果
纯css实现超酷炫的星级评分动画效果,实现思路:5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋转的动画dom结构,用form实现<form> <div class="star"> <input type="radio" id="rate5" name="r...原创 2019-09-10 13:42:11 · 2412 阅读 · 3 评论 -
纯css制作电闪雷鸣的天气图标
效果效果图如下实现思路使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式dom结构用两个嵌套的div容器就可以了,父容器来控制图标显示的位置,子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了,这些都是在css中定义的。<div class="contai...原创 2019-09-16 11:00:56 · 454 阅读 · 0 评论 -
纯css实现乌云密布的天气图标
阴天,在不开灯的房间,当所有思绪都一点一点沉淀,爱情究竟是精神鸦片,还是世纪末的无聊消遣。原创 2019-09-16 14:27:11 · 378 阅读 · 0 评论 -
纯css写一个大太阳的天气图标
太阳当空照,花儿对我笑,小鸟说早早早,你为什么背上炸药包原创 2019-09-18 09:21:52 · 294 阅读 · 0 评论 -
纯纯的css画美美的彩虹
哪里有彩虹告诉我,能不能把我的愿望还给我,为什么天这么安静,所有的云都跑到我这里,有没有口罩一个给我,释怀说了太多就成真不了,也许时间是一种解药,也是我现在正服下的毒药,看不见你的笑,我怎么睡得着......你要离开 我知道很简单原创 2019-09-19 09:30:43 · 344 阅读 · 0 评论 -
纯css画一个月亮的天气图标
效果效果图如下实现思路使用box-shadow进行构建 星星的样式,有闪烁的动画 月亮的样式,有弧形的上下摇摆动画dom结构用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写星星的样式,after伪元素画月亮。<div class="container"> <div class="starry"></div>...原创 2019-09-19 10:45:15 · 904 阅读 · 0 评论 -
CSS3新特性-多栏布局
为了实现类似报纸,杂志的多列排版的布局,CSS3新增了一个多列布局模块(css multi column layout module)。主要应用在文本的多列布局方面。语法:colums:<column-width> || <column-count>譬如三栏布局,每栏内容宽度为150pxcolumns: 150px 3;column-width属性...原创 2018-11-13 09:39:45 · 1616 阅读 · 0 评论 -
Flex布局
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模式提供最大的灵活性。flexbox布局常用于比较复杂的页面,可以轻松实现屏幕和浏览器窗口的大小发生变化时保持元素的相对位置和大小不变,同时减小了依赖于浮动布局实现元素位置的定义以及重置元素的大小。任何一个容器都可以指定为Flex布局..box{ display: flex;}行内元素也可以使用Flex布局....转载 2018-10-30 10:22:52 · 317 阅读 · 1 评论 -
CSS3新特性-动画
关键帧Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}在一个“...原创 2018-10-09 10:49:06 · 342 阅读 · 0 评论 -
CSS补充知识-position定位
目录1、绝对定位2、相对定位3、选择定位的要点4、块级元素在页面居中5、两栏布局6、经典bug(1)margin塌陷(2)margin合并1、绝对定位(1)脱离原来位置进行定位,(2)相对于最近的有定位的父级元素进行定位,若没有存在定位的父级,则相对于整个文档定位。div{ width:100px; height:100; ...原创 2018-08-22 14:46:07 · 241 阅读 · 0 评论 -
前端模块化开发思维
学习过程中自己练习的测试代码,都是小白式先写好HTML中架构,然后对这些“骨架”进行增添样式,感觉没毛病呀。譬如,假设创建6个盒子,一个盒子宽高100px、背影颜色红色;一个宽高300px、蓝色;一个宽高450px、黄色;一个宽高100px、蓝色;一个宽高450px、红色;一个宽高300px、黄色。作为传统的我一直采用传统的正向顺序编写,<!DOCTYPE html>&...原创 2018-08-17 11:38:41 · 892 阅读 · 1 评论 -
CSS补充知识-浮动
CSS中分有盒模型、层模型、浮动模型。当两个块级元素中第一个块级元素浮动时,第二块级元素会占据第一个原来的位置,第一会覆盖住第二个,然而这不是层模型中的层次覆盖。浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素都是看不见的,也就会覆盖它们,.box1{ width:100px; height:100px; background-color:black; ...原创 2018-08-20 14:25:51 · 357 阅读 · 0 评论 -
CSS补充知识-文字溢出处理和文字图片代替问题
1、文字溢出问题文字溢出分为单行文本和多行文本。单行文本溢出处理固定的三个步骤,先是取消文本换行功能,然后再使溢出部分隐藏,隐藏部分用...显示。p{ width:100px; height: 20px; line-height: 20px; white-space:nowrap; overflow: hidden; text-overf...原创 2018-08-20 15:18:36 · 568 阅读 · 0 评论 -
纯CSS、原生JS、jQuery实现下拉菜单功能
一、纯CSS实现实现下拉菜单需要用display,即改变display的block或none值。先构建基本的HTML框架,<div id="nav"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">...原创 2018-09-13 15:21:46 · 3643 阅读 · 0 评论 -
CSS 各种居中实现整理
<center>标签对其所包括的文本进行水平居中。text-align:centertext-align:center,在父容器里水平居中 inline 文字,或 inline 元素vertical-align:middle垂直居中 inline 文字,inline 元素,配合 display:table,display:table-cell,有奇效。line-...转载 2018-09-20 09:30:16 · 286 阅读 · 0 评论 -
CSS3新特性-选择器
属性选择器HTML中可通过各种属性给元素增加很多附加信息。譬如,用id属性将不同div区分。CSS3新增的3个属性选择器使得属性选择器有了通配符的概念,也感觉像是正则表达式的样子。E[att^="val"]E:选择匹配的元素E; att:元素E定义了属性att; ^:其属性值以val开头的任何字符串。E[att$="val"]$:其属性值以val结尾的任何字符串。E[at...原创 2018-09-29 11:39:20 · 366 阅读 · 0 评论 -
CCS3新特性-盒模型属性box-sizing
在找小项目练习时,自己的完成度不太好,就找别人的代码看,发现了box-sizing这个属性,遂在网上找了很多资料研究,自己再来整理一下加深印象。以往认知中,盒模型的组成: content(内容) + margin + padding+ border 组成。 浏览器有两种盒模型:W3C下的标准模型和 IE下的传统模型(IE6以下,不包含IE6版本或”QuirksMode下IE5.5+”)...原创 2018-09-21 08:58:39 · 565 阅读 · 0 评论 -
CSS3新特性-变形
CSS3中对一个元素的变形通过 transform 及其一系列函数来实现。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法: transform: none|transform-functions;旋转rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一...原创 2018-10-08 16:34:32 · 288 阅读 · 0 评论 -
纯css耍个透明正方体转一转
效果效果图如下实现思路定义一个最外层的容器,用来控制显示的位置 定义一个父容器,用来设置元素被查看位置的视图,这里使用到CSS3的perspective 属性 定义子容器,设置为相对定位,利用transform-style属性,使被转换的子元素保留其 3D 转换 定义6个div,构成正方体的6个面dom结构按照实现思路,我们需要如下的dom结构<div cl...原创 2019-09-20 15:03:14 · 522 阅读 · 0 评论