css
关注
分享
扫一扫
Byte_Dance
长风破浪会有时，直挂云帆济沧海
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css设置图片放大缩小和移动
利用元素的transition(过渡属性),加元素的 :hover(鼠标移动到元素上边),transform 元素2D转换原创 2017-12-30 16:05:02 · 1254 阅读 · 0 评论 -
使用Jquery配合CSS3动画和2D变换属性制作动态特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial原创 2018-08-21 23:48:09 · 475 阅读 · 0 评论 -
简单的flex 响应式布局（Bootstrap栅格系统布局）
最简单的相应布局 父标签CSS配置display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/flex-direction: row;/*表示元素的走向*/flex-wrap:wrap;/*声明元素是否换行*/子标签CSS配置height:200px;margin:5px;flex-grow:1;flex-basis:300px;这样就...翻译 2018-10-01 20:03:34 · 1620 阅读 · 0 评论 -
Vue中的CSS过渡的6个过程
<!--模板--><template> <div name="users"> <hr> <!--过渡--> <button @click="showHide">按钮</button> <翻译 2018-10-03 22:12:16 · 453 阅读 · 0 评论 -
前端工程师需要明白的「像素」
转自简书:https://www.jianshu.com/p/af6dad66e49a场景：人物：前端实习生「阿树」与 切图工程师「玉凤」事件：设计师出设计稿，前端实现页面玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞阿树：(>_<)毛问题噶啦~阿树：哇靠，为啥你给的设计稿是640px宽 ，iPhone 5不是320px宽吗？？？玉凤：A pix...转载 2018-10-17 22:05:45 · 315 阅读 · 0 评论 -
如何设置固定的背景图像：
若想做到div盒子的背景跟随鼠标滚动,首先要满足以下几点1:背景图片的的高度一定要撑满整个屏幕2:设置盒子的background-attachment属性为fixed style="height:500px;width:100%;background: url(images/bg-1.jpg) no-repeat center center ; background-attachm...翻译 2018-09-29 18:20:25 · 595 阅读 · 0 评论 -
滚动加载动画
自封装插件 : <script> /*** * 使用方法: * 调用方法时,后边的效果会覆盖前面的,所以只需要调用一次即可 * 此方法全局只执行一次,只有定义了animated类名的才能使用此方法 * <div class="animated bt"></div> /可以使用 * ...转载 2018-09-29 18:54:47 · 1083 阅读 · 0 评论 -
CSS自适应样式表
在我们开发的过程中, 使用响应式页面是, 可能有时候需要PC端和移动端的样式不一样,这个时候如果用JS的方式 简单的还可以.多的话就显得很臃肿 要加很多判断 响应速度大大降低.这个时候 我们可以使用 CSS3中的 @media属性, 我们先创建一个html页面<!DOCTYPE html><html lang="en"><head> <...原创 2018-11-25 13:42:21 · 1183 阅读 · 0 评论 -
网易云首页菜单栏
实例:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery原创 2018-11-28 11:14:01 · 824 阅读 · 0 评论 -
CSS伪类和微元素的区别
1.伪类与伪元素的区别？1) 定义区别伪类 伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。伪元素 伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它...转载 2018-12-12 20:36:53 · 2400 阅读 · 0 评论 -
hover后执行过渡效果
hover后执行过渡效果元素标签上添加过渡的标准 : .course-item{ position: relative; top:0; transition:box-shadow,top 0.5s;}hover 后要改变的内容.course-item:hover{ box-shadow:0 2px 15px -2px #8b8b8b; ...原创 2018-12-12 23:16:25 · 3050 阅读 · 7 评论 -
H5翻页动画原理实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .divs1{原创 2018-12-09 11:06:43 · 2491 阅读 · 2 评论 -
在bootstrap布局中 为了使不同尺寸的页面可以显示不同个数的 element
在bootstrap布局中 为了使不同尺寸的页面可以显示不同个数的 element ，可以在元素上加上不同的栅格元素 <div class="container"> <div class="col-sm-6 col-md-4 col-lg-3"></div> <div class="col-sm-6 col-...翻译 2018-12-20 16:15:19 · 3146 阅读 · 0 评论 -
将页面的table表格导出为excel或者word
<script> /*第一个参数为:表格的id名 第二个参数为:a标签的id名*/ function exportTable(tableId, aid,fileName) { // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档， // 设置...翻译 2018-12-20 23:49:02 · 2698 阅读 · 0 评论 -
电商放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { ma原创 2019-01-04 00:25:12 · 609 阅读 · 0 评论 -
插件封装:无限循环滚动
这个方法需要注意的是 : img元素必须要在CSS内先指定宽度,不然等JS去设置宽度的时候,由于图片本身加载进来的时候是图片原来的尺寸,当加载过程中鼠标一旦滑动了一下,就会触发hover离开的函数,这时候再鼠标滑动进去,相当于执行了两次hover离开,就会出现滚动停不下来的情况.为防止 定时器累加 这种情况出现,也可以给定时器上做好预防(即开启定时器之前 都要先关闭定时器):&l...原创 2018-12-31 22:49:09 · 497 阅读 · 0 评论 -
让div撑满整个屏幕的方法
在body只有一个div的时候，可以通过这样的方式让div撑满整个屏幕。1.给div设置定位。 复习一下—— css中position有五种属性： static:默认值，没有定位 absolute:绝对定位，相对于父级元素进行定位 relative:相对定位 fixed:固定定位,相对于浏览器窗口进行定位 inherit:从父元素继...转载 2019-01-07 20:52:48 · 1521 阅读 · 0 评论 -
点击登录显示蒙版
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, in原创 2019-01-07 21:12:37 · 352 阅读 · 0 评论 -
文本超出规定范围显示为省略号
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv=&qu转载 2018-07-10 15:48:12 · 1653 阅读 · 0 评论 -
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
做了一个页面,其中有个问题是要把body的背景全部填充为一张图片.用bootstarp框架兼容手机端使用的是下列这种方法:body{ background: url("public/img/bg/dlbg.jpg") center no-repeat fixed;; background-size:cover;}但是在手机上打开的时候发现页面只能打开一部分,下边另一部分被不显示了...转载 2018-05-10 14:18:29 · 636 阅读 · 0 评论 -
设置z-index
在一个div明明设置了属性z-index，但是为什么在网页上显示无效呢？首先排除设置的层级不够的问题；然后我就去W3School 查询了才知道问题所在。 先来看官方给的定义的用法：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。 注释：Z-index 仅能在定位元素上奏效（position属性值设置除...翻译 2018-04-06 22:48:57 · 1896 阅读 · 0 评论 -
CSS中大图片的几种居中方法
前段时间发现了一个让图片居中的写法，父标签{text-algin:center} img {margin:0 -100%}; 不过好像对一张图片管用,多张的话就容易出现问题了,单张居中的话感觉很是好用.另外一种原始写法 position:absolute; left:50%; ...翻译 2018-02-20 21:26:24 · 354 阅读 · 0 评论 -
div布局,主内容居中,左侧导航栏放置在主内容左侧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;原创 2018-03-01 15:18:56 · 2845 阅读 · 0 评论 -
[插件封装] 创建一个banner广告栏,点击切换图片
使用Bootstarp官方插件创建一个幻灯片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Jquery移入移出幻灯片效果</title> <!--匹配移动端--&原创 2018-03-02 00:36:39 · 394 阅读 · 0 评论 -
HTML弹性盒子Flexbox
愚人码头注：本文在英文原文的基础上加了一些便于理解的注释和示例。什么是 Flexbox ？Flexbox 是 flexible box 的简称（愚人码头注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用...转载 2018-03-11 10:26:14 · 653 阅读 · 0 评论 -
对于默认字体最小为12px解决方法
谷歌浏览器默认字体大小小于12px就不好用了，字体还是12px。 为了兼容所有的浏览器，使用缩放方式使字体变小。 比如以字体大小12px为基数，缩放90%就是10.8px 代码为：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo&a转载 2018-03-05 12:17:59 · 1270 阅读 · 0 评论 -
CSS 3渐变色效果
使用CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-...转载 2018-03-06 11:38:33 · 788 阅读 · 0 评论 -
三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去？
因为第三个div块是写在第二个div块下面的，而且第二个div块的位置正常，没有浮动，它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。就好像假如你的第一个向左浮动的div是写在第二个div下面，它也是不可能占到第二个蓝色的位置上去的。左边的元素左浮动,当浮动出中间内容区域范围之后,打印就看不到左边的了,可以直接用固定定位fixed给他定位住, 右边的只能使用左f...原创 2018-03-06 13:36:16 · 5711 阅读 · 1 评论 -
设置网页打印的时候,如何让指定区域不打印
@media print { div{display:none}}<p>三生三世</p><div class="s"> <button id="1">打印按钮</button></div>转载 2018-03-24 13:09:48 · 2948 阅读 · 0 评论 -
使用css制作标签的三角按钮上下翻转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="public/bs/js/jquery-1.11.0.min.原创 2018-03-27 22:05:29 · 1284 阅读 · 0 评论 -
HTML元素垂直居中和水平居中
水平居中设置 1，行内元素 设置text-align：center 2，定宽块状元素 设置左边margin值为auto 3，不定宽块状元素 a：在元素外加入表标签（完整的，表元素写在td内，然后设置margin的值为auto b：给该元素设置displa：inine方...转载 2018-04-03 10:30:04 · 337 阅读 · 0 评论 -
解决a链接折行问题
这里右侧的a需要设置一段代码：使链接的显示为行内块级元素,让a链接为一个整体,就不会出现折行问题,需要设置一段代码 : 使a链接的显示block : 块级元素(可以设置宽高,一个块级)inline-block: 行内块级元素()设置后效果:<!DOCTYPE html><html lang="en"><head> <meta charset="...翻译 2018-04-03 10:53:10 · 887 阅读 · 0 评论 -
CSS清除浮动常用的几种方式
1：给父元素设置宽高 原理：父级DIV手动定义高度，就解决了父级DIV无法自动获取到高度的问题。 优点：简单，代码少，掌握容易 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级DIV不一样时，产生会问题 建议：不推荐使用，只建议高度固定的布局时使用 。warp { width：500 px ;身高：90 像素;} 2：在需要消除浮动的结构尾部...翻译 2018-04-03 11:24:04 · 245 阅读 · 0 评论 -
秒杀按钮的制作
秒杀按钮的制作:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <style> /*外部容器*/ .翻译 2018-04-03 21:53:11 · 505 阅读 · 0 评论 -
HTML / CSS 设置鼠标指针各种显示状态
<style> * { cursor：url（“public / img / wand.cur”），auto ;} a：hover { cursor：url（“public / img / animworm.cur”），auto ;} </ style>翻译 2018-04-04 22:28:26 · 1945 阅读 · 1 评论 -
仅使用HTML元素通过CSS样式制作一个小三角
制作小三角有两种常用的方式，1：是CSS3种的方法，通过旋转一个div元素45度，然后定位到外部div的某一边，把多余的用overflow：hidden;遮住，来获取一个三角形，但是这种方法兼容性不是很好，而且之前的浏览器也没有旋转属性，2： 通过边框属性,来制作小三角.我们可以看到,边框和边框之间是45度斜着分割的,如果我们把元素尺寸设置为0 ,仅仅留下边框,就能获得四个不同颜色的三角形.如果想...翻译 2018-04-06 17:45:38 · 620 阅读 · 0 评论 -
input File 选择图片后 预览
<form action="upload.php" method="post" enctype="multipart/form-data"> <div> <img src="" class="img"> </div> <input type=转载 2019-02-08 21:38:52 · 1325 阅读 · 0 评论