-
css控制UL LI 的样式详解(推荐)
所属栏目:[系统] 日期:2020-05-10 热度:165
div ul lia href="#"首页/a/li li/li lia href="#"博客/a/li li/li lia href="#"设计/a/li li/li lia href="#"相册/a/li li/li lia href="#"论坛/a/li li/li lia href="#"关于/a/li /ul /div CSS: 复制代码 代码如下: #menu ul {list-style:none;margin:0p[详细]
-
从腾讯网站首页改版学到的几点体会心得
所属栏目:[系统] 日期:2020-05-10 热度:161
腾讯首页近日改版了,现在将自己从其中学到和感悟到的几点总结出来分享: 1、宽屏设计: 1)不管腾讯处于什么考虑,宽屏总是让人看的很舒服,而且页面整体缩短了近1半,这让浏览信息的用户会方便很多。 2)同时大家注意到了,腾讯的宽屏不是完全的宽屏,而[详细]
-
解决网站防挂IFRAME木马的原理
所属栏目:[系统] 日期:2020-05-10 热度:120
相信大多数朋友都是iframe木马的受害者,有朋友的网站被注入了n回iframe,心情可想而知。而且现在ARP攻击,注入iframe也是轻而易举的事,仅局域网里都时刻面临威胁,哎,什么世道。接近年关,为了防止更多的朋友受到攻击,于是细细说下。 灵儿曾经在经典论[详细]
-
浅谈CSS中盒模型的理解
所属栏目:[系统] 日期:2020-03-29 热度:59
今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 ( 摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助 ) 1.基本的盒模型知识 CSS css盒子模型 又称框[详细]
-
CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法
所属栏目:[系统] 日期:2020-03-29 热度:157
大佬给了一张优惠券图片(如下图),我一看,这波浪型的边框和内倒角用css写不出来吧,遂向大佬说明并要ui切图,大佬回答:css3可以实现。好吧,大佬都说可以实现了,还不赶紧去求谷哥,度娘。 实现内倒角 上代码,然后解释代码 div class=radial-gradient/d[详细]
-
如何只在IE上加载CSS样式表
所属栏目:[系统] 日期:2020-03-29 热度:61
前言:IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载。 IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表。如下所示,使用外部样式表。 !--[if IE] link rel=stylesheet type=text/css href=http://w[详细]
-
css 11种方法实现一个tips带有描边的小箭头
所属栏目:[系统] 日期:2020-03-29 热度:79
副标题#e# 我们在网页开发中实现一个tips时会有一个小箭头,实现这种方法的文章网上已经泛滥了,但有时实现这个小箭头不止只有单纯的三角它还有描边,今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边,本章不涉及svg/canvas,没必要因为我[详细]
-
使用CSS的border属性绘制各种几何形状的方法
所属栏目:[系统] 日期:2020-03-29 热度:196
副标题#e# border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的黑魔法哈,让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子: 在页面上写一个 div div class=borde[详细]
-
css3 flex实现div内容水平垂直居中的几种方法
所属栏目:[系统] 日期:2020-03-29 热度:177
副标题#e# 一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反) ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-direction:column-reverse (与column[详细]
-
css3媒体查询中device-width和width的区别详解
所属栏目:[系统] 日期:2020-03-29 热度:161
定义:定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值就不会变。 比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。 2.width 定义[详细]
-
CSS 漂亮搜索框美化代码
所属栏目:[系统] 日期:2020-03-29 热度:173
效果图: 实现这种效果有两种方法:一是整体处理一个背景,以透明gif图的方式定位到搜索框,或者切分开,这种方法加载快,而且灵活性更高。 文中用到的图片 提示:您可以先修改部分代码再运行[详细]
-
css3 中translate和transition的使用方法
所属栏目:[系统] 日期:2020-03-29 热度:125
translate和transition一直让我觉得,很牛皮很强大,怎么也学不会,其实是自己比较抗拒去了解她,接口看了不到半个小时的文档,大概了解了下,下面是示例,可以下载下来自己运行下试试 !DOCTYPE htmlhtmlhead titletranslate和transition/title/headbodyst[详细]
-
浅析CSS3 中的 transition,transform,translate之间区别和作用
所属栏目:[系统] 日期:2020-03-29 热度:121
transform 和 translate transform指变换、变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是指元素进行2D变换,2D变换就是指,元素以当前位置(0,0)按照x轴的方向移动多少,按照y轴的方向移动多少 例如: transfo[详细]
-
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
所属栏目:[系统] 日期:2020-03-29 热度:54
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。 方法1:计算滚动条宽度并隐藏起来 在本站的侧栏,你可以看到[详细]
-
CSS3 不定高宽垂直水平居中的几种方式
所属栏目:[系统] 日期:2020-03-29 热度:50
.father {display: flex;justify-content: center;align-items: center;} 这种方式兼容性不好 2、position + transform .son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);} IE9以下不支持transform属性 3、table + table-ce[详细]
-
Web标准:结构,表现和行为分离
所属栏目:[系统] 日期:2020-03-28 热度:141
Web标准:讨论内容结构表现行为分离 内容与表现分离,从标准到国人重视那天起,就已经讨论了,但是停留在div cssxhtml css纯代码的分离,思想上流程上,到底如何分离? 古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它[详细]
-
用CSS遮罩实现过渡效果的示例代码
所属栏目:[系统] 日期:2020-03-28 热度:50
副标题#e# 今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样,遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中,我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣[详细]
-
详解css透明度之rgba和opacity的区别及兼容
所属栏目:[系统] 日期:2020-03-28 热度:107
对于设置透明度,我们有两个可以选的css3属性:rgba 和 opacity opacity 用法: #box{background-color:rgb(125,25,0);opacity: 0.5} IE9, Firefox, Chrome, Opera 和 Safari 使用属性opacity来设定透明度。 opacity 属性能够设置的值从 0.0 到 1.0。值越[详细]
-
聊一聊CSS中的长度单位的使用
所属栏目:[系统] 日期:2020-03-28 热度:167
CSS中有很多属性可以接受长度值,比如: width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多,因此CSS也提供了许多长度单位。有的是日常生活中使用的单位,比如:厘米(cm)和英寸(in);有的是印刷行业使用的单位,[详细]
-
详解利用clear清除浮动的一些问题解决
所属栏目:[系统] 日期:2020-03-28 热度:178
下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before {content: .;display: block;height: 0;clear: both;visibility: hidden;} Question 1: 上面的代码的能够实现清除浮动的问题吗? Answer: Can't. 因为clear属性只能控制元素本身与前面的[详细]
-
css隐藏移动端滚动条并且ios上平滑滚动的方法
所属栏目:[系统] 日期:2020-03-28 热度:158
css隐藏移动端滚动条并且ios上平滑滚动的方法 HTML代码如下 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0meta http-equi[详细]
-
如何使用css绘制钻石的方法
所属栏目:[系统] 日期:2020-03-28 热度:160
听说你想要钻石:gem:?买不起,还是用css来画一个吧,但你敢送给自己女朋友,不保证不被打。 下午两点要相亲,要不把这个送相亲对象? 效果 先看下效果吧,想一想怎么构图先。 上图是已经完成的效果。钻石整体都是由三角形构成,上五下三。上边是五个等边[详细]
-
ie中出现的jquery.form.js拒绝访问,input上传按钮必须主动点击的问题
所属栏目:[系统] 日期:2020-03-28 热度:88
下面先给大家看下代码 form id=uploadFileForm2 name=uploadFileForm2 enctype=multipart/form-data method=postdiv class=upload-wapper mt20input type=file name=excelfile id=dataFile class=dataFile accept=application/vnd.openxmlformats-officedo[详细]
-
使用 CSS3 中@media 实现网页自适应的示例代码
所属栏目:[系统] 日期:2020-03-28 热度:76
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。 一、CSS2 中的@me[详细]
-
css3 给背景设置渐变色的方法
所属栏目:[系统] 日期:2020-03-28 热度:142
css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之前的线性过度,这个css3属性只支持高版本的浏览器。 //浏览器前缀background: linear-gradient(red, blue);background: -webkit-linear-gradient(red, blue);background: -o-linear-g[详细]