css样式
关注
分享
扫一扫
文章平均质量分 61
一天一天积累
这个作者很懒，什么都没留下…
展开
-
flex的一种常用布局实现
1.有些页面的内容较少，撑不起整个屏幕，结果底部内容显示在了屏幕中间位置。2.中间部分实现圣杯布局效果图：代码：主要使用了flex:1;<html><head> <meta charset="utf-8"/> <title>内容过少时，底部内容不在浏览器最下方</title> <style type="text/css"> *{ margin:0p...原创 2020-06-16 17:18:17 · 437 阅读 · 0 评论 -
css全屏变灰色（特殊节日使用）
效果图：使用滤镜filter的grayscale函数。<style>.filter { -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%);...原创 2020-06-16 17:10:55 · 860 阅读 · 0 评论 -
ios下text-align:justify文本两端对齐失效
text-align: justify在当文案只有一行的时候是不会生效的。解决方案是用text-align-last: justify来修复text-align: justify对最后一行不起作用的问题。Android还是有一定的支持度的，但是ios就惨了，完全不支持，所以只能改。分析text-align: justify不生效的原因就是文字在最后一行，所以可以再想要两端对齐的文字前后分别加一个标签，然后把文字挤在不是最后一行的位置上。.content { width: 100px;/..原创 2020-06-10 18:59:34 · 3294 阅读 · 0 评论 -
ios下点击不起作用
给这个元素增加一个属性cursor: pointer;原创 2020-05-19 17:36:10 · 169 阅读 · 0 评论 -
元素使用display: inline-block；后会有间隙的问题
元素使用display: inline-block;后，总是和其他元素出现间隙，其实是fontsize惹的祸，将父元素的font-size:0px,就可以解决原创 2020-03-12 17:22:46 · 276 阅读 · 0 评论 -
居中一张图片
未知图片的宽高，要在div中垂直水平居中这张图片。html部分： css部分：.div{ width:300px; height:300px; border:1px原创 2015-10-13 11:15:00 · 521 阅读 · 0 评论 -
针对iphone4调整样式
/*iphone4下兼容*/@media screen and (max-device-width:320px) and (max-device-height:480px){ .mplay{ position:fixed; }}这里的(max-device-width:320px) and (max-device-heigh原创 2015-09-17 16:02:57 · 362 阅读 · 0 评论 -
文字居中不仅仅只用line-height
今天看书看到display属性的值时，有table-cell，那么同时结合vertical-align:middle;应该可以实现文字的垂直居中，实现如下： css部分：.table{ display:table-cell; width:100px; height:100px;原创 2015-09-17 16:27:01 · 504 阅读 · 0 评论 -
css3动画，设置动画基点
@-webkit-keyframes swing { 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);原创 2015-08-31 12:07:46 · 3175 阅读 · 0 评论 -
制作翻转效果动画
经测试改动画在移动端兼容有一些问题，要兼容移动端可前往https://blog.csdn.net/u012011360/article/details/92766950html页面：<div class="box start_3_1" title="点击翻面"> <img src="images/bg1.jpg" alt="纸牌正面" class...原创 2015-08-16 15:52:30 · 1185 阅读 · 0 评论 -
垂直居中一个元素
.div里的内容会垂直居中css部分：.div { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: fle原创 2015-10-15 17:24:43 · 401 阅读 · 0 评论 -
光点沿圆角按钮运动轨迹动画
Demohttp://xuanfengge.com/demo/201506/spark/spark-button.html效果代码12345678910转载 2016-04-20 11:56:53 · 2401 阅读 · 0 评论 -
优美的移动端菜单特效
模仿大疆官网效果图：点击前点击后：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">*{ margin: 0rpx; padding: 0原创 2018-04-13 11:13:07 · 3939 阅读 · 0 评论 -
线性动画
效果：鼠标经过前：鼠标经过后出现线性动画：html部分：<div class="c-btn c-btn--border-line" id="bbb">鼠标经过查看效果</div>css部分：#bbb{ border: 1px solid #EDEDED; padding-left: 40px; margin-left: 10px; padding-r...原创 2018-04-13 11:29:19 · 1838 阅读 · 0 评论 -
快速将pc和移动端网站合并成响应式网站
一、使用媒体查询加载不同css文件<link rel="stylesheet" type="text/css" href="m/css/style.css" media="screen and (max-width:800px)"><!--小于800px时加载移动端样式--><link rel="stylesheet" type="原创 2018-06-12 11:22:09 · 3299 阅读 · 0 评论 -
css 混合模式
css的混合模式类似ps里的正片叠底功能，混合模式可以是图片和背景色混合，也可以是图片和图片混合，设置方式有两种background-blend-mode 和mix-blend-mode；混合模式Multiply，screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,differ...原创 2019-03-12 16:08:55 · 1574 阅读 · 0 评论 -
翻牌动画
效果如下(可兼容移动端)：css部分：<style type="text/css">*, *:before, *:after { box-sizing: border-box;}html { font-size: 18px; line-height: 1.5; font-weight: 300; color: #333; font-famil...原创 2019-06-18 10:35:04 · 1148 阅读 · 0 评论 -
css3，可以为一个元素添加多个动画
例如：.screen3.on .text5 { animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s ease forwards text5, 1.2s 6s linear infinite wobble; -webkit-animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s e原创 2015-08-16 15:06:38 · 16442 阅读 · 3 评论 -
ie下select默认样式修改
chrome下浏览：IE和FF下浏览：使用select做下拉菜单，使用appearance:none;可以消除默认样式，但是要每个浏览器兼容到.contactus2_con select{ -webkit-appearance: none; -moz-appearance: none; appearance:none; b原创 2015-07-29 20:23:58 · 17485 阅读 · 0 评论 -
CSS HACK区别IE6、IE7、IE8、Firefox兼容性(1)
本文向大家描述一下如何使用CSS HACK区别IE6、IE7、IE8、Firefox兼容性问题，针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack，相信你对本文介绍一定会感兴趣。CSS HACK区别IE6、IE7、IE8、Firefox兼容性问题1.区别IE和非IE浏览器#tip{ background:blue;/*非IE背景藍色*/ b转载 2014-11-07 15:07:38 · 561 阅读 · 0 评论 -
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
转载自图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。1、正方形最终效果： CSS代码如下：转载 2014-11-12 16:18:07 · 1114 阅读 · 0 评论 -
页面布局中常用的清除浮动的方法
因为在布局中碰到这个问题所以在网上查找了一些资料，布局时基本上都避免不了使用float，尤其是在容器高度不固定时，此时它的高度完全是由内部的元素撑开的。如果内部元素还是浮动的，那么由于内部的元素脱离了文档流，父容器就不能被撑开了。如果父容器设置的有背景或者边框的话，此时就不能正常显示了，另外，父容器下边的其他容器或内容也会跟着向上“浮”， 占据上面的子容器应该占据的位置。那么，这时就需要清除浮动了原创 2014-10-29 10:26:31 · 760 阅读 · 0 评论 -
自适应网页设计的方法
昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。 1、在HTML头部增加viewport标签。 在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放转载 2014-11-17 17:49:57 · 536 阅读 · 0 评论 -
html中将不能完全显示的文字用...代替
效果如下图：代码原创 2014-10-31 14:40:31 · 2529 阅读 · 0 评论 -
网页中图片去色问题
网页中图片去色问题网页中经常需要一种js效果，就是鼠标经过某张图片，图片去色。为了不加载两张图片（一张彩色和一张灰色），在网上找到了一些方法。方案一：使用grayscale.js可以使用grayscale.js来实现图片的去色，但是有个缺点就是它可以实现鼠标经过图片去色，但是实现不了鼠标移开之后，图片恢复颜色。使用demo:window.onload=function(原创 2014-11-24 18:00:26 · 18945 阅读 · 0 评论 -
火狐与IE兼容性总结
1. 超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: a:link {} a:visited {} a:hover转载 2014-12-15 15:14:40 · 1636 阅读 · 0 评论 -
子元素设置margin-top，父元素也受影响
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)： 子元素设置margin-top，父元素也受影响 * { m原创 2014-12-09 13:58:06 · 20042 阅读 · 2 评论 -
RGBA颜色与兼容性的半透明背景色
RGBA颜色与兼容性的半透明背景色by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=839一、周末的唠唠叨叨这周真是辛苦的一周，很多事情不得已都拖着，比如现在这篇文章早前几天前就应该完工了；关于vertical-align属性的下集还没有开始写，jQue转载 2014-12-09 12:00:49 · 1833 阅读 · 0 评论 -
chrome显示12px以下字体的解决方法
chrome显示12px以下字体的解决方法 * { margin: 0px; padding: 0px; font-family: "微软雅黑"; } .px12 { font-size: 12px; } .px10 { font-size: 10px原创 2014-12-10 15:37:08 · 12456 阅读 · 2 评论 -
jQuery实现简单而且很酷的返回顶部链接效果
jQuery实现简单而且很酷的返回顶部链接效果 返回页面顶部 1 2原创 2014-12-11 15:45:21 · 915 阅读 · 0 评论 -
IE6 position:fixed 固定定位问题
IE6下 position:fixed失效，解决方法如下：除了IE6的浏览器.top { width: 97px; height: 278px; background: #e0c157; position: fixed; z-index: 30000; /* 控制左右位置*/ right: 50px;原创 2015-02-25 15:09:56 · 817 阅读 · 0 评论 -
山顶角
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> Border body { background-color: #CCC; }原创 2015-02-26 13:09:49 · 1271 阅读 · 0 评论 -
css3动画 抖动效果
html结构：原创 2015-02-27 16:55:02 · 23046 阅读 · 0 评论 -
IE下的cursor的url不兼容
鼠标的光标可以显示成图片（ico格式或者cur等），光标在线制作网址为：http://app.baidu.com/widget?appid=134026。html： css：#bottle{ background:url("../images/flower.jpg"); height:330px;原创 2015-04-30 17:20:53 · 3427 阅读 · 0 评论 -
移动端select菜单无法修改默认样式
Volvo Saab Opel Audi但是在移动端，设置的样式会不起作用，如下图：因为ios和安卓系统有默认的菜单样式，要想设置自定义的样式，需要添加一个样式-webkit-appearance: none;之后再设置自定义的样式。如：原创 2015-06-15 14:21:29 · 2323 阅读 · 2 评论 -
提交按钮设置背景图片，以及鼠标经过换背景图
用户名： 登录密码： 重复密码： 服务器： wei原创 2014-08-22 16:42:21 · 2718 阅读 · 0 评论