CSS
关注
分享
扫一扫
wcy7916
这个作者很懒，什么都没留下…
展开
-
css之 -webkit-XXX相关属性应用
1：ios上 input框按钮样式显示不对，android上正确:解决：添加如下代码：-webkit-appearance：none说明：改变按钮和其他控件的外观，使其类似于原生控件。-webkit-appearance会将webkit浏览器中的元素默认样式去除。2:触发click事件时，有默认的阴影效果，需要去掉：解决：添加如下代码：webkit-tap-highlight-co...原创 2019-12-30 14:24:40 · 395 阅读 · 0 评论 -
css animate动画demo
页面下滑指引的小箭头<div class="next_guide_icon"><img src="/Images/ting/float_top_icon.png"></div>/*小箭头上下移动*/@keyframes guide_icon { 0% { transform: translateY(0); } 2...原创 2018-12-20 17:05:48 · 1235 阅读 · 0 评论 -
css ios H5页面web页面 上下滑动不流畅
移动端 ios上面，滑动一点，页面滚动一点，不流畅，安卓不这样解决方案1：删除如下代码：html,body{ height: 100%;}因为我的页面是下半部分可以滑动，上半部分不动。所以html,body的高度设置的就是 height: 100%;所以我采取的方案2解决方案2：增加如下代码：*{ -webkit-overflow-scrolling: touch;}...原创 2019-02-15 10:32:51 · 1637 阅读 · 0 评论 -
使用第三方字体
1：下载第三方的文件 例如：DINCondensed.ttf2：将字体文件放在项目中3：在common.css中引入字体文件@font-face { font-family: dincondensed; src: url('./DINCondensed.ttf') format('truetype');}4:使用改字体.swiper-pagination-cust...原创 2019-02-28 18:35:26 · 1911 阅读 · 0 评论 -
移动端 初始状态默认显示滚动条（告诉用户此区域是可以上下滚动查看的）
.readDry .scrollDry { height:2.731rem; overflow-y: scroll; background: #F7F8FB; border-radius: 0.171rem; font-size: 0.273rem; color: #525151; padding:0.256rem; /*debug...原创 2019-04-08 09:34:45 · 3313 阅读 · 1 评论 -
-webkit-overflow-scrolling:touch 导致图片不显示bug
前言：ios移动端 ul列表，上下滑动比较卡顿，不够流畅，添加了-webkit-overflow-scrolling:touch 属性后解决了这个bug,增加了滚动回弹效果。但是触发了另一个问题，上下滑动时 li 里面的 img图片不显示了，需要手动点一下才显示，文字数据是显示的，图片路径 src路径存在视图：主要 html:<div class="slideDivContent"...原创 2019-04-30 10:38:13 · 712 阅读 · 0 评论 -
粘性定位之 position:sticky
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。即元素先按照普通文档流定位，之后为固定定位。...原创 2019-06-26 13:00:04 · 1763 阅读 · 0 评论 -
锚点跳转bug ：导致点每个菜单，都会记录一次history，导致点返回频繁显示
jquery:锚点的平滑跳转$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);javascript: //操作顶部菜单 var getlang = document.getElementById('eudicMenuToplist'...原创 2019-07-01 09:48:00 · 1649 阅读 · 0 评论 -
点击锚点跳转，顶部菜单栏遮住了内容
问原创 2019-07-01 10:31:35 · 2075 阅读 · 0 评论 -
JS/CSS判断是不是iphoneX？
js判断 if (/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)) { //是iphoneX } else { //不是iphoneX }CSS判断：@media only scr...原创 2018-10-24 18:02:18 · 3796 阅读 · 0 评论 -
解决 Android 系统 设置line-height和height相同，文字却偏上显示（pc端和ios都显示ok）
问题：代码： width: 36px; height: 20px; line-height: 20px; position: absolute; top: 14px; right: 14px; color: #fff; background: #F87D28; border-radius: 2px; font-si...原创 2018-10-24 16:08:35 · 4583 阅读 · 0 评论 -
ios/android移动端将不同字号的文字底部对齐显示
效果：html:<div class="fou_time_list">66<span>分钟</span></div>css:.fou_time_list { //让父容器的子view都置底 display:flex; flex-direction: row; align-items: flex-end;...原创 2018-10-29 17:24:06 · 1211 阅读 · 0 评论 -
css Flex 弹性布局
作用：用来为盒状模型提供最大的灵活性flex属性：flex-direction flex-direction =&gt;决定主轴的方向（即项目的排列方向）,规定灵活项目的方向.box { flex-direction: column-reverse | column | row | row-reverse ;}column-rever...转载 2018-05-07 09:36:41 · 121 阅读 · 0 评论 -
移动端页面初始化的css样式
初始化的css样式reset.csshtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, sam...原创 2018-05-04 09:20:28 · 3832 阅读 · 0 评论 -
CSS3 @keyframes 动画效果
@keyframes 案例1. 先设置动画效果:@keyframs myframes{from{ }to{ transform:translate(300px); }}2. 在元素的样式中调用并设置动画执行:amimation-name:myframes;(自定义名称)调用已经设置好的动画。amimation-duration:5s;(动画...原创 2018-05-04 09:18:02 · 3205 阅读 · 0 评论 -
pc端页面初始化样式
/* 基础样式定义 */body,html,ul,li,p,h1,h2,h3,h4,h5 { margin: 0; padding: 0;}h1,h2,h3,h4,h5,h6 { font-weight: normal;}img { border: none; font-size: 0;}a { color: #71777d; ...原创 2018-05-07 09:36:32 · 2004 阅读 · 0 评论 -
点击导航栏页面滚动到指定显示位置---animate动画
animate动画example:html:<ul> <li class="head_nav_li" data-value="index"> <a href="###" class="product_li_a" onclick="body_scroll('top')">aaaa&原创 2018-05-07 09:37:51 · 4929 阅读 · 0 评论 -
css布局之水平垂直居中
垂直居中法一：Flex 布局：.div{ display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/}原创 2018-05-14 14:39:01 · 131 阅读 · 0 评论 -
css 设置背景图片模糊效果
效果： html: <div class="head_channel"> <div class="head_box"> //这里是内容区域 </div> <div class="blur_bj"> <img src="https://原创 2018-07-17 09:55:45 · 23634 阅读 · 1 评论 -
css 规定文本行数，超出的用省略号表示
首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box...原创 2018-08-23 11:13:58 · 2222 阅读 · 0 评论 -
css sticky-footers 布局
定义：当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。 当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部；效果：实现方式：方法一 ：flex布局方式html代码：&lt;div class="wrapper"&gt; &lt;div class="content"&gt;这里是转载 2018-05-04 09:20:02 · 181 阅读 · 0 评论