随笔分类 -  CSS

摘要:写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况: <style> div{width:400px;height:400px;border:1px solid #000; } img{width:100%;height:100%;} </style> 不管容器有多大,只要将img的宽高设置 阅读全文
posted @ 2020-07-06 22:49 谦信君 阅读(5071) 评论(0) 推荐(0) 编辑
摘要:我们首先来介绍如何实现禁止复制,知道了禁止的方式,再破解就容易了。 实现禁止复制粘贴 比较简单,直接上代码: 破解禁止复制粘贴 知道如何禁止了,那破解这个限制就容易多了。 首先,绝大部分限制都是采用js实现的,那我禁用js不久OK了么?突然发现我太聪明了!假如你使用的是Chrome或者其它国产web 阅读全文
posted @ 2019-12-08 20:28 谦信君 阅读(84447) 评论(0) 推荐(1) 编辑
摘要:在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果。那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例),让大家可以了解并掌握css的display属性设置img图片居中的两种方法。有一定的参考价值,有 阅读全文
posted @ 2019-04-16 21:35 谦信君 阅读(48408) 评论(0) 推荐(2) 编辑
摘要:!important声明强制优先 CSS优先级中还有一个最无敌的声明,就是!important。 在CSS样式表中,带有!important声明的样式优先使用,它的优先级会超越任何地方、任何方式的样式声明,包括行内style属性中声明的样式。 比如下面代码: 这里的这行文字在浏览器中仍然显示为红色字 阅读全文
posted @ 2018-04-17 11:07 谦信君 阅读(365) 评论(0) 推荐(0) 编辑
摘要:根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“ 阅读全文
posted @ 2018-03-12 20:40 谦信君 阅读(12668) 评论(0) 推荐(0) 编辑
摘要:大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?下面我们逐步的分析一下: 一、首先我们看看各平台的默认字体情况 宋体(SimSun):Win下大部分游览器的默认字体,宋体在小字号下(如12px 阅读全文
posted @ 2017-08-20 07:55 谦信君 阅读(3236) 评论(0) 推荐(1) 编辑
摘要:一、line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: line-height 属性设置行间的距离(行高),不能使用负值。该属性会影响行框的布局。在应用到 阅读全文
posted @ 2017-03-22 14:41 谦信君 阅读(645) 评论(0) 推荐(0) 编辑
摘要:列表项目默认分行排列,那么将列表项设置浮动就可以实现水平放置 1 li{float:left;} li{float:left;} 示例如下: 创建Html元素 1 2 3 4 5 6 <ul> <li>itemlist-1</li> <li>itemlist-2</li> <li>itemlist- 阅读全文
posted @ 2017-03-21 23:16 谦信君 阅读(3630) 评论(0) 推荐(0) 编辑
摘要:有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_ 阅读全文
posted @ 2017-03-19 09:28 谦信君 阅读(291) 评论(0) 推荐(0) 编辑
摘要:https://segmentfault.com/a/1190000006110417 大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?下面我们逐步的分析一下: 一、首先我们看看各平台的默认字 阅读全文
posted @ 2017-03-02 10:44 谦信君 阅读(831) 评论(0) 推荐(0) 编辑
摘要:html 中几次方,平方米,立方米,上标,下标,删除线等的表示方法 上标下标删除线 小号字 插入字 M2 54 X24+Y1<3=100 N5N <sup>上标</sup> <sub>下标</sub> <del>删除线</del> <small>小号字</small> <ins>插入字</ins> 阅读全文
posted @ 2016-08-04 16:35 谦信君 阅读(1549) 评论(0) 推荐(0) 编辑
摘要:现在在学校里面,培训机构里面都有很多课程是前端切图这一方面的,简单来说就是学习div+css网页排版。有很多人经过这一轮的学习之后就发现自己对排版这一方面非常的熟悉甚至说自己的div+css的高手。其实真正说要懂得一个网页排版需要注意的一些问题是什么呢?是不是在电脑上面看到自己排版出来的页面就真的是 阅读全文
posted @ 2016-04-22 15:19 谦信君 阅读(6651) 评论(0) 推荐(0) 编辑
摘要:最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node 首先 本实例展示的是基于Node+Express+node-mysql快速搭建的一套增删改查,视图模板是jade,基本上都是现在能用的到的技术,市面上的实例 阅读全文
posted @ 2016-04-14 11:39 谦信君 阅读(3028) 评论(1) 推荐(0) 编辑
摘要:发现: 最近在做移动端的东西,说起移动端弹性盒子布局真是无往不利,用起来特别爽,我也是偶尔间发现的这个属性并且它的用法,在网上基本查不到这个属性的资料(个人看法)。如果没有听说过(display:box)的朋友建议去别人家的博客看看CSS3就可以直接command+w了,由字看意,是不是能联想到 d 阅读全文
posted @ 2016-04-14 11:38 谦信君 阅读(5550) 评论(0) 推荐(0) 编辑
摘要:一、首先W3C标准 结构、表现、动作 与 html、css、javascript相对应,它本意是结构表现分离,而且按照html规范编写结构。 标签方面: -所有标签都要小写、关闭、并且合理嵌套,id不能重复 -标签要有属性,属性必须有值,并且用“”表示 -img标签不能忽略alt属性 -表格标签不适 阅读全文
posted @ 2016-04-14 10:34 谦信君 阅读(341) 评论(0) 推荐(0) 编辑
摘要:水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响,否则一切都是无用功。margin:0 auto 也可以被写成margin:0 auto 0 a 阅读全文
posted @ 2016-04-10 17:56 谦信君 阅读(1562) 评论(0) 推荐(0) 编辑
摘要:定义和用法 padding-top 属性设置元素的上内边距(空间)。 说明 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠。不允许指定负内边距值。 注释:不允许使用负值。 可能的 阅读全文
posted @ 2016-04-10 09:08 谦信君 阅读(2948) 评论(0) 推荐(1) 编辑
摘要:当设置值为cover,可以呈现出图片铺满浏览器内容的视觉效果 实例 规定背景图像的尺寸: 定义和用法 background-size 属性规定背景图像的尺寸。 语法 background-size: length|percentage|cover|contain; 值描述测试 length 设置背景 阅读全文
posted @ 2016-04-05 15:33 谦信君 阅读(5141) 评论(0) 推荐(0) 编辑
摘要:开始研究响应式web设计,CSS3 Media Queries是入门。Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。那么,Media Queries是如何工作的?两种方... 阅读全文
posted @ 2015-12-11 12:21 谦信君 阅读(298) 评论(0) 推荐(0) 编辑
摘要:一、前言 首先看看一道阿里这期网申的题目吧!1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::first-letter C. #main::before D. [t... 阅读全文
posted @ 2015-12-11 11:37 谦信君 阅读(248) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示