首页 CSS

CSS 第2页

  • css3 中translate和transition的使用方法

    css3 中translate和transition的使用方法

    translate和transition一直让我觉得,很牛皮很强大,怎么也学不会,其实是自己比较抗拒去了解她,接口看了不到半个小时的文档,大概了解了下,下面是示例,可以下载下来自己运行下试试 <!DOCTYPE html> <html> <head> <title>translate和transition</title> </head> <body> <style type="text/cs...

    CSS 2020-03-30 5 0
  • 浅析CSS3 中的 transition,transform,translate之间区别和作用

    浅析CSS3 中的 transition,transform,translate之间区别和作用

    transform 和 translate transform指变换、变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是指元素进行2D变换,2D变换就是指,元素以当前位置(0,0)按照x轴的方向移动多少,按照y轴的方向移动多少 例如: transform:translate(0,100%) 表示从元素的当前位置延y轴方向,向下移动整个元素高度的距离 transform:translate(-20px,0) 表示从元素的当前位置延x轴方向...

    CSS 2020-03-30 6 0
  • 解决CCS中的margin:top塌陷问题

    解决CCS中的margin:top塌陷问题

    HTML结构如下: CCS结构如下: 页面效果图如下: 现在我们可以看到在子元素中明明设置了向右50px和向下50px,可页面显示的效果却只有向右移动的没向下移动的。 通常来说,margin是设置元素的外边距,正常情况下设置margin值时应该是父元素相对于浏览器定位,子元素相对于父元素定位;而现在设置了 margin-top: 50px,页面却没效果这就说明是margin塌陷。 那什么是margin塌陷呢?   在子级中当设置margin-top: 50px;时,里面的盒子并没有改变,但...

    CSS 2020-03-30 5 0
  • css3媒体查询中device-width和width的区别详解

    css3媒体查询中device-width和width的区别详解

    1.device-width 定义:定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值就不会变。 比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。 2.width 定义:定义输出设备中的页面可见区域宽度。 输出的是你的网页可见区域的宽高,假设你的网页是移动端网页嵌套在某个webview中,width实际上就是webview的宽高...

    CSS 2020-03-30 4 0
  • css :not的多个条件的写法详解

    css :not的多个条件的写法详解

    :not 伪类选择器可以筛选不符合表达式的元素 例子 table tbody tr:not(:first-child):not(:last-child) td { text-align: right; } 以上代码可以选择table表格中tbody部分非首个、非最后一个的tr,并设置其子元素td文本样式居右 这里面需要注意not的语法格式: 单个的not写法: /*选中非段落元素*/ :not(p) { } 多个not的写法...

    CSS 2020-03-27 19 0
  • CSS3制作轮播图的一种方法

    CSS3制作轮播图的一种方法

    轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种 下面是style部分: 这几行都能明白吧 <style> *{margin:0;padding:0;} a{text-decoration:none} li{list-style:none;} 设计宽度不要超过轮播图片的总宽度再加不到第一张1张图片的宽度(加第一张1张图片的宽度是为了轮播效果看得见)我的是1500宽度和200的高度,再设置溢出隐藏(消除移动出显示区域还在显示)...

    CSS 2020-03-27 18 0
  • CSS3 新增选择器的实例

    CSS3 新增选择器的实例

    结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式​ li:first-ch...

    CSS 2020-03-27 17 0
  • CSS实现半透明边框与多重边框的场景分析

    CSS实现半透明边框与多重边框的场景分析

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border。 半透明边框被主调色影响, 实现的效果为 解决方案: 使用background-clip 属性规定背景的绘制区域,使得绘制区域仅限制在content+padding。 Div { border:10px solid rgba(0,0,0,.5); background: lightblue; background-clip: padding-box; } 补充...

    CSS 2020-03-27 16 0
  • CSS拾遗之箭头,目录,图标的实现代码

    CSS拾遗之箭头,目录,图标的实现代码

    1. CSS拾遗之图标 图标有三种制作方法: 图片 css(小箭头用CSS搞定) 自己画font(fontawsome插件) fontawsome插件下载之后,解压,新版的与老版不一样。 2. html文件的目录结构 xxx project - app - s1.html - s2.html - css - commons.css - script - commons.js...

    CSS 2020-03-27 17 0
  • 基于html+css做一个好看的可翻转登录注册界面

    基于html+css做一个好看的可翻转登录注册界面

    做一个好看的可翻转登录注册界面 前言 最近在尝试做网盘,使用的技术栈大概是 .net core + MVC + Mysql + Layui,主要目的是通过这个具体的项目,熟悉熟悉 .net core 开发,.net 的未来就是他了! 我的设想 在完成后端的一部分 建设 之后,我把目光投向了前端——登陆注册,由于这个网盘是用来试手的个人项目,我并不想用曾经用过的制作方式——登录和注册界面分开来做。我试图讲这两个功能合到一个页面上,并且以一种不是很 &qu...

    CSS 2020-03-27 16 0
  • CSS实现鼠标移至图片上显示遮罩层效果

    CSS实现鼠标移至图片上显示遮罩层效果

    1、将遮罩层html代码与图片放在一个div 我是放在 .img_div里。 <div class="img_div"> <img src="./images/paella-dish.jpg"> <a href="#"> <div class="mask"> <h3>A Pi...

    CSS 2020-03-27 15 0
  • uni-app中使用scss的示例代码

    uni-app中使用scss的示例代码

    遇到的坑 整个一个下午我都在解决uni-app中使用scss的坑,首先说一下我的问题,在用scss时一直不能使用@mixin,然后百度各种办法调试: 代码写法问题(完全按官网的写法来的不可行): 官网demo 浏览器问题(换火狐不行)。 语法版本问题(换了写法同样不行): scss使用mixin不生效,浏览器无法编译出来 插件没有安装上(重装还是不好使)。 把<style type='css'> 改成了 scss , 还是不行。 使用scss新语法还时不行 整个一下午实在是弄不出来...

    CSS 2020-03-27 14 0
  • CSS 如何影响首次加载时的白屏时间的解决方法

    CSS 如何影响首次加载时的白屏时间的解决方法

    含有外部 css 文件的渲染流水线 上图中,请求 HTML 数据和构建 DOM 中间有一段空闲时间,这段时间可能成为页面渲染的瓶颈。DOM 构建结束后,css 文件还未下载完成这段时间内,渲染流水线一直在等待,因为下一步是合成布局树。合成布局树需要 CSSOM 和 DOM,所以需要等待 CSS 加载结束并解析为 CSSOM。这种情况下,CSS 没有阻塞 DOM 的生成。 CSSOM 的作用 提供给 JS 操作样式表的能力 为布局树合成提供基础的样式信息 含有内联 JS 和 外部...

    CSS 2020-03-27 14 0
  • 详解CSS盒子塌陷的5种解决方法

    详解CSS盒子塌陷的5种解决方法

    一,盒子塌陷是什么? 本应该在父盒子内部的元素跑到了外部。 二,为什么会出现盒子塌陷? 当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父盒子的高度就会直接塌陷为零, 我们称这是CSS高度塌陷。 下图下方两个子元素的盒子分别设置了左浮动和右浮动,顶端的长条盒子出现了塌陷 ex : 三,关于盒子塌陷的几种解决方法 最简单,直接,粗暴的方法就是盒子大小写死,给每个盒子设定固定的...

    CSS 2020-03-27 14 0
  • 利用css制作3D照片墙效果

    利用css制作3D照片墙效果

    利用css制作3D照片墙,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div> <img src="#"/> <img src="#"/&g...

    CSS 2020-03-27 14 0