html div css
文章平均质量分 50
北方的刀郎
这个作者很懒,什么都没留下…
展开
-
8个css技巧 帮助你减少重复规则和复写
8个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html。转载 2023-09-01 15:53:17 · 419 阅读 · 0 评论 -
CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承。...转载 2022-08-04 19:20:48 · 1084 阅读 · 0 评论 -
微信浏览器视频自动播放
这篇文章主要介绍了解决手机微信浏览器视频自动播放和默认全屏问题(示例代码)以及相关的经验技巧,文章约1077字,浏览量435,点赞数6,值得推荐!1.早期因为带宽和流量的因素,移动端浏览器禁止视频自动播放,现在现在流量便宜了、手机硬件越来越好了,部分可支持了2.在移动端浏览器, video 在用户点击播放或者通过API video.play() 触发播放时,会强制以全屏置顶的形式进行播放,设计的初衷可能是因为全屏能提供更好的用户体验<video controls="controls" s原创 2022-03-05 01:13:56 · 5961 阅读 · 1 评论 -
视频资源以blob:http呈现的原理
blob 其实是 h5 表征的 Blob 对象数据,具体请看文档。我们可以使用 Blob 对象隐藏真实的资源路径,在一定程度上可以起到数据的加密性,更多的是为了干扰爬虫。比如日常使用的一些音频,视频,图片,我们都可以使用其 Blob 二进制数据流来表征数据,而非使用 uri,就像经常用到的 image src 的 dataUrl。要使用 blob 来表征数据资源,需做到以下两点:1、服务端返回的为资源的二进制数据2、前端接收到二进制数据后,使用 URL.createObjectURL(blo原创 2022-01-25 15:55:58 · 808 阅读 · 1 评论 -
font-size:100%; font: 12px/1.5 Arial;什么意思
font-size是设置字体的属性常见设置字体大小有 px, rem,em 但是有一种设置就是设置 font-size为百分比。 1 font-size:100%; 设置字体属性为默认大小,是相对于浏览器默认字体大小或继承body设定的字体大小来说的example:body{ font-size:12px;}div{ font-size:100%; //这个div标签的字体大小会继承body标签的12px;也就是说,div的字体大原创 2022-01-10 22:05:28 · 690 阅读 · 0 评论 -
flex布局space-between,最后一行左对齐
一般是这样效果,不是想要的。方法一、添加几个空item根据布局列数添加空item,比如每行最大n列,那么在最后添加n个空item即可放 n-2 个也可以。可以省两个(空的可以把其他挤过来。但是高度wei)<html><style> .item { width: 32%; height: 60px; margin-top: 10px; } .itemempty { height: 0px; width: .原创 2021-10-25 16:53:26 · 518 阅读 · 0 评论 -
checkbox选中改变默认样式,改变颜色,一般用背景图
###checkbox选中改变默认样式,改变颜色,一般用背景图.cconte div input[type='checkbox']{position: absolute;left:-0.2rem;top: .1rem;-webkit-appearance: none;appearance:none;//去掉复选框的默认背景样式-moz-appearance:none;display: block;wid...原创 2021-10-20 12:16:02 · 1433 阅读 · 0 评论 -
P标签为啥不能包裹div标签,p包不住div?
p包不住div?大家都知道,块级元素可以包裹内联元素以及块级元素,但是,为什么P不能包含div呢,w3c说,这样子严重违反P的语义。。。所以,在一些标准的浏览器里面,会把你包含在P里面的div吐出来。口说无凭,有图有真相。...原创 2020-05-07 16:25:53 · 1517 阅读 · 1 评论 -
input type=file 默认文字改成英文的?
简单的方法,是把原来的 input 隐藏后用图片替换,用jquery 添加隐藏元素的click事件,代码如下:<input id="img1" type="file" name="img1" accept="image/png,image/jpeg, image/gif" style="display: none;"><img src="/en/images/sel...原创 2020-01-07 15:59:36 · 3800 阅读 · 0 评论 -
jquery中Json操作
在开发中,我们有可能拿到的不是全的json,而是一部分json格式的数据,这个时候我们需要将其强转为json对象第一种方法:使用jquery中的$.parseJSON(),但是它对json数据格式的要求较高,必须要双引号包围起来<script type="text/javascript"> //第一种:使用jquery中自带的$.parseJSON()函数...原创 2019-10-15 19:47:03 · 273 阅读 · 0 评论 -
html中#include file的用法
html中#include file的用法 参数 PathType 将 FileName 的路径类型。路径可为以下某种类型: 路径类型 含义 文件 该文件名是带有 #include 命令的文档所在目录的相对路径。被包含文件可位于相同目录或子目录中;但它不能处于带有 #include 命令的页的上层目录中。 虚拟 文件名为 Web 站点上虚拟目录的完整虚拟路径。 FileName 指定要包含的文原创 2016-03-21 10:40:48 · 6130 阅读 · 1 评论 -
opacity: 0.5; css透明覆盖详解
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持firefox, Safari和 Opera. filter:alpha(opac原创 2016-03-21 10:41:26 · 5592 阅读 · 0 评论 -
absolute与relative怎么区分,
很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在当前元素没有设定TRBL,默认依据父级的做标原始点为原原创 2016-03-21 10:42:05 · 638 阅读 · 0 评论 -
<meta http-equiv=...> 的功能
的功能 博客分类: 【 Html 】 浏览器SchemeYahooServlet.net 1.定义语言 格式: 〈meta http-equiv=″Content-Type″ content=″text/html; charset=gb2312″〉 这是META最常见的用法,在制作网页时,在纯HTML代码下都会原创 2016-03-21 10:42:23 · 271 阅读 · 0 评论 -
background-position属性
法: background-position : length || length background-position : position || position 取值: length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | bottom | left | center | right 说明:原创 2016-03-21 10:42:31 · 553 阅读 · 0 评论 -
iframe去掉滚动条
让竖条没有: 让横条没有: 两个都去掉?更简单了原创 2016-03-21 10:42:52 · 10407 阅读 · 0 评论 -
路径前加于不加(/)反斜杠
如题,这是我们今天做关于JavaWeb请求转发时遇到的问题。 1.(无)开头表示当前目录下的 2.(/)开头的目录表示该目录为根目录的一个子目录 3.(./)开头的目录表示该目录为当前目录(当前目录所在的目录)的一个子目录 4.(../)开头的目录表示该目录为当前目录的父目录 但是实际使用过程中我们发现了很多问题,首先关于无反斜杠原创 2016-03-21 10:43:22 · 1868 阅读 · 0 评论 -
css 显示省略号
.sub{ width: 280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } filename}" title="{$newsinfo->title}" target="_blank">{$newsinfo->title}//这样也行p style="width: 300px;overflow: h原创 2016-03-21 10:43:43 · 595 阅读 · 0 评论 -
ul li 居中显示
ul li { list-style:none; color:red; display:inline; width:180px; text-align:center; line-height:20px;}去掉浮动,改为display:inline;还有就是,为什么你的ul跟li之间还可以加入一个div呢?难道u原创 2016-03-21 10:44:22 · 357 阅读 · 0 评论 -
使用DD_belatedPNG让IE6支持PNG透明图片
使用DD_belatedPNG让IE6支持PNG透明图片 众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是e?xpression,再到javascript+透明 GIF替代.但是这些方法都有一个缺点,就是不支持C原创 2016-03-21 10:45:18 · 269 阅读 · 0 评论 -
left 和 margin-left 的区别
研究下拉菜单和弹出菜单时比较所得:1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置:测试代码:[html] view plaincopyprint?div style="position:relative;top:100px;left:100px;border:1px so原创 2016-03-21 10:45:50 · 1810 阅读 · 0 评论 -
css 伪类
编辑本段CSS术语解释:伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。伪类有::first-child ,:li原创 2016-03-21 10:45:52 · 254 阅读 · 0 评论 -
【转】<!--[if lte IE 6]>
【转】IE6及其以下版本可见IE7及其以下版本可见只有IE6版本可见除了IE以外的版本IE8及其以下的版本可见IE7及其以下的版本可见 lte: 就是Less than or equal to的简写,也就是小于或等于的意思。lt : 就是Less than的简写,也就是小于的意思。gte: 就是Greater than or equal to的简写,也就是大于或等于的意思。gt : 就是Great原创 2016-03-21 10:45:55 · 322 阅读 · 0 评论 -
不同浏览器字符间距不同原因。font-size和 font-family,
工作中,制作表格时,单元格内容在IE中可以放得下,没有换行,而在 谷歌和火狐中却换行了(单元格不够宽),为什么在IE中却够宽,其它两个却不够宽??今天测试了很久,终于弄清楚了。原来: 我没有设置字体类型 font-family,可能每个浏览器默认渲染的字体类型不一样,没设置前我发现font-family不一样,而且字间距也不一样,IE中字间距小点,FF和Chorm中字间距和IE中大多了,这难怪会原创 2016-03-21 10:46:14 · 3499 阅读 · 2 评论 -
div与span区别及用法
DIV与SPAN区别及div与san用法篇接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法。新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签。目录特点与区别 小结 知识扩展 案例效果演示 一、DIV与SPAN的区别与特点 - TO原创 2016-03-21 10:46:19 · 499 阅读 · 0 评论 -
filter:alpha(opacity=60)只在IE起作用,如何在多浏览器中实现?
filter:alpha(opacity=60)只在IE起作用,如何在多浏览器中实现?2011-10-01 13:44匿名 | 分类:浏览器 | 浏览883次就是鼠标经过的时候图片变亮 没经过的时候图片半透明效果2011-10-12 16:05提问者采纳filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;原创 2016-03-21 10:46:25 · 1520 阅读 · 0 评论 -
ie6的padding加倍解决方法
ie6的padding属性hackpadding属性在ie6下的hack!在ie6下使用padding的话,数值乘2倍增长,其他浏览器不会!只能用!important来调整!例如在IE6下的x容器样式是这样。.x{width:100px;height:100px;padding:50px;}在IE7\8,firefox,chrome等主流浏览器中,它的总占据的宽度和高度是200X200,而在IE6原创 2016-03-21 10:46:27 · 1180 阅读 · 0 评论 -
怎样防上网页中图片过大撑破布局 100
怎样防上网页中图片过大撑破布局 100问题如题,如果用CSS定义超出部分隐藏,那样超出的部分就看不到了,有没有什么好的办法,能够判断,当图片宽,或高超过一定大小后,自动按比例缩小至 设定的大小,要求在IE6下也能实现这种效果,JS,CSS 均可,最好是CSS ,若能完美解决问题,可以加分补充:可以参考这个网页 http://game.163.com/10/0823/11/6EP3S4QI00314原创 2016-03-21 10:46:30 · 468 阅读 · 0 评论 -
网页中插入FLASH代码的参数解释与使用技巧
<span style="mso-bidi-font-size:10.5pt;font-family:宋体;mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;color:#355E9E;mso-font-kerning:0pt;mso-no-proof:no;" >网页中插入原创 2016-03-21 10:46:51 · 341 阅读 · 0 评论 -
【转载】iframe自适应高度详解(转帖)
Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html下面开始讲:通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何做动态同步的问题。原创 2016-03-21 10:47:27 · 291 阅读 · 0 评论 -
display:inline , margin值在IE6变成双倍怎么解决?
margin值在IE6变成双倍怎么解决?2011-04-22 14:08kouzimeimei | 分类:百度产品 | 浏览11202次2011-04-22 15:42提问者采纳解决此办法的最简单的方法是,在style中添加:display:inline;给你介绍小技巧。可以使用以下办法来书写兼容浏览器的css代码:第一种:.div{background:orange;/*ff*/*backgro原创 2016-03-21 10:47:42 · 407 阅读 · 0 评论 -
Dreamweaver批量替换超链接
Dreamweaver批量替换超链接在改网页时,经常遇到需要批量替换超链接的情况,这里举例说明,如何将全部超链接改成特定链接:目标:将所有链接,改为http://www.58nin.com查找:替换:http://www.58nin.com">替换全部就可以了,是不是很便捷呢?哈哈原创 2016-03-21 10:47:59 · 1163 阅读 · 0 评论 -
2013年08月24日
.box li{float:left; margin-right:13px;}.box li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}.box li div img{v原创 2016-03-21 10:48:17 · 268 阅读 · 0 评论 -
css定义图片列表图片不变形
.ny_products{padding:0 0 30px;}.ny_products ul{width:651px; margin:0 auto; padding:30px 0px 0;}.pro_list li{width:197px; height:182px; line-height:50px; float:left; display:inline; margin:0 10px; over原创 2016-03-21 10:48:52 · 629 阅读 · 0 评论 -
深入理解css 行高”line-height
一、前言前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”(http://isd.tencent.com/?p=1503),是个不错的文章,学到了不少东西,建议您看看。这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考。另外,将结合实际,展示line-height的原创 2016-03-21 10:48:54 · 1276 阅读 · 0 评论 -
background -- 五个背景属性可以全部在此定义
background -- 五个背景属性可以全部在此定义 取值: [background-color> || background-image> || background-repeat> || background-attachment> || background-position>] | inherit [background-color> || background原创 2016-03-21 10:49:53 · 4548 阅读 · 0 评论 -
CSS的鼠标手势实现
教您用CSS的鼠标手势实现任意标签鼠标划过变成小手 就是:cursor:pointer,调用方法:style="cursor:pointer "原创 2016-03-21 10:49:55 · 707 阅读 · 0 评论 -
CSS3的文字阴影—text-shadow
CSS3的文字阴影—text-shadow 作者:大漠 日期:2011-05-10 点击:15471 前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。text-shadow还没有出现时,大原创 2016-03-21 10:50:03 · 481 阅读 · 0 评论 -
UL标签的padding与margin默认值 40px
UL标签的padding与margin默认值 40px 分类: CSS知识 2012-12-24 13:08 362人阅读 评论(0) 收藏 举报 UL标签的padding与margin默认值ul标签在FF中默认只有padding值(即:padding-left:40px),而在IE中只默认有margin值(即:margin-left:40px),所以先定义 ul{margin:0;pad原创 2016-03-21 10:50:46 · 1367 阅读 · 0 评论 -
<div>里用display:block有用么?
里用display:block有用么?2010-11-20 16:05ccalen | 分类:Html/Css | 浏览76565次是块元素,那在布局时候,在div的元素里面写display:block有用么?是不是div里就没有必要写display:block呢?分享到: 2010-11-22 21:22提问者采纳对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显原创 2016-03-21 10:51:08 · 384 阅读 · 0 评论