css
文章平均质量分 51
酷jjs
追求卓越,激流勇进!
展开
-
css3动画,动态打字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes typing { from...原创 2019-10-24 15:05:01 · 536 阅读 · 0 评论 -
input输入框自动填充黄色背景解决方案
转发来自:https://www.cnblogs.com/herozhou/p/7197715.htmlchrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:input:-webkit-autofill {background-color: #...转载 2019-02-13 17:25:32 · 1605 阅读 · 0 评论 -
css3箭头
position: absolute;right: 0;top: 10rpx; width:14px;height: 14px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg);原创 2018-05-18 14:22:18 · 1692 阅读 · 0 评论 -
flex弹性布局 以及 定位
flex-direction:决定元素的排列方向flex-wrap:决定元素如何换行flex-flow:是 flex-direction 和 flex-wrap 的简写justify-content:元素在主轴上的对齐方式align-items:元素在交叉轴上的对齐方式flex-grow:当有多余空间时,元素的放大比例flex-shrink:当空间不足时,元素的缩小比例flex-basis:元素在...原创 2018-05-02 14:41:40 · 3081 阅读 · 0 评论 -
竖排文字居中排列效果
.cont{background:rgba(255,255,255,0.8);margin-top:10px; height:44%;width:100%;writing-mode:vertical-rl; display:flex;-webkit-display:flex;flex-direction:column; align-content: center;justify-c...原创 2018-04-14 10:19:20 · 1648 阅读 · 0 评论 -
shape-outside实现文字环绕图片圆弧形排列效果
shape-outside: circle(20px at 50px 30px),那么圆的半径为20px,圆心距离左侧为50px,距离顶部为30px的点。/*****************人物内容介绍***************/.culture_cont{padding:20px 0;height:auto;width:100%;}.culture_cont .people{over...原创 2018-04-23 11:28:39 · 3530 阅读 · 0 评论 -
文字上下左右居中
/*###########################道教商城详情#####################*/.shopdetail{margin-top:24px;margin-bottom:24px;}.shopdetail .slideimg_ban{width:100%;height:386px;background:#faf9f7;margin-bottom:30px;}....原创 2018-04-04 09:25:19 · 1514 阅读 · 0 评论 -
css3动画效果
/*红包侠黄色圆圈不断放大缩小动画*/.yellow_sacle{ animation: yuan 0.3s linear 0s infinite alternate;}@keyframes yuan { from { transform: scale(1); -ms-transform: scale(1); /* IE 9 */ ...原创 2018-04-03 11:28:47 · 165 阅读 · 0 评论 -
摇一摇效果
<style> .r1{transform:rotate(-4deg);-moz-transform:rotate(-4deg);-webkit-transform:rotate(-4deg);-o-transform:rotate(-4deg);} .r2{transform:rotate(3deg);-moz-transform:rotate...原创 2018-04-03 10:30:47 · 142 阅读 · 0 评论 -
css雪花飘落效果
链接:https://pan.baidu.com/s/1_4Qam-lVlLv4yitmFQyyVg 密码:y8qb<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title>&l原创 2018-04-07 20:41:27 · 5903 阅读 · 1 评论 -
外部文字引入css
@font-face{ font-family:fangzheng_my;src:url("font/fangzheng.TTF");}.myfont{font-family:fangzheng_my;}原创 2018-03-30 16:29:35 · 151 阅读 · 0 评论 -
纯css小猫
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css小猫</title> <style> *{padding:0;margin: 0;} li{list-style:none;} body{background:#f6f7f2;}原创 2017-02-16 16:24:58 · 1217 阅读 · 0 评论 -
CSS3实现图片在DIV中上下左右居中(2)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3</title> <style> .box{width:600px;height:600px;border:1px solid red;position: relative;} .wrapper {转载 2017-02-21 10:00:41 · 3055 阅读 · 0 评论 -
CSS实现图片在DIV中上下左右居中(1)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片在div实现上下左右居中的方法</title> <style> div{width:400px;height:400px;border:1px solid #000000;text-align: center;}原创 2017-01-12 16:02:52 · 1615 阅读 · 0 评论 -
jq/css鼠标经过图片放大效果
<!doctype html><html><head><style>img{display:block;}.box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;}.box img{width:200px;height:160px;position:relative;}</style><script sr原创 2017-01-16 17:11:24 · 11727 阅读 · 0 评论 -
'autocomplete="off"'在Chrome中不起作用解决方案
<input type="text" class="loginuser" maxlength="16" autocomplete="off" placeholder="请输入账号"/><input type="password" class="loginpwd" maxlength="16" autocomplete="new-password"placeholder="请输入密码"/>关键原创 2016-12-08 15:24:11 · 1147 阅读 · 0 评论 -
css布局:圣杯布局
圣杯布局:左右两边固定宽度,中间不设置宽度(自适应页面宽度)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> *{ margin:0;padding: 0;} .center{height:500px;backgro原创 2016-08-29 14:10:30 · 668 阅读 · 1 评论 -
css布局:等高布局
等高布局:(左右两边,一侧设置高度,另一侧自适应)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>等高布局</title> <style> *{ margin:0;padding: 0;} .wrap{ width:1000px; margin: 0 a原创 2016-08-29 17:01:57 · 684 阅读 · 0 评论