前端技术

前端技术:HTML CSS js/jQuery

  • 纯CSS实现自适应浏览器宽度的正方形

    纯CSS实现自适应浏览器宽度的正方形

    JavaScript实现自适应浏览器宽度,可以监听onresize事件。纯CSS实现自适应浏览器宽度的正方形有以下三种方法:1、方案一:CSS3 vw 单位CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视...

    CSS学习 2周前 41 0 正方形
  • 纯CSS写三角形,自适应不同宽度

    纯CSS写三角形,自适应不同宽度

    今天在写一个定制模板的时候,遇到一个全屏三角形做的特效,需要用到自适应,在不同分辨率下都三角形都能自适应居中!看图:因为这个zblog模板需要自定义配色,所以这个三角形必须使用css制作,不能使用背景图片,当浏览器缩小的时候,三角形居中不变!HTML:<div class="triangle"><div class="box"></div>&...

    CSS学习 3周前 55 1 三角形
  • display: table-cell 无法使用 margin/ padding 的解法

    display: table-cell 无法使用 margin/ padding 的解法

    之前发过一篇,用div+css替代table的文章,因为div+css实在好用。已实际用过display: table的朋友,当你们在使用的时候,也许会碰到「间距调整」的问题,例如要在每一个table-cell裡头设定margin等间距调整,却发现修改无效。假设你碰过这种状况,不妨参考一下我推荐的解法。话不多说,先上个范例!我使用图片+图说当作范例,例子包含:正常状况下,图片紧密排列使用margin调整的结果将宽度写死的结果使用bord...

  • 从table转而使用div+css

    从table转而使用div+css

    一般来讲,table打好语法就可以呈现效果了,而且语法很简单,就单纯的table、tr、td,这三个语法就可以画出表格,在各个浏览器下也都可以正常的显示。如果觉得排版不漂亮,就直接在语法内加上width、color等等的属性值,效果很容易就达到了,可是这样会让程式码杂乱。对于搜寻引擎来讲,他们抓网站内容通常不会一次抓完,会先抓到一定的网页大小,之后再来,如果你把样式调整的程式码都放进去,很快的,搜寻引擎可能光收录你的表格样式,还没抓到重...

    CSS学习 3周前 58 0 table
  • 纯CSS 画梯形

    纯CSS 画梯形

    梯形制作过程中,涉及到border-left /right    transparent(背景透明) 还需要图形的宽度代码如下:<div id="oricl"></div> <div id="oricl1"></div>#oricl{     border-botto...

    CSS学习 1个月前 105 1 梯形
  • 超大图居中的方法,绝对定位与相对定位使图片居中方法!

    超大图居中的方法,绝对定位与相对定位使图片居中方法!

    在网页设计中,常常会遇到大图片需要居中,但又不能把图片做为背景居中。 方法/步骤 使用绝对定位html代码css代码 .wrap{width:100%;overflow:hidden;}.banner{width:1920px;margin-left:-960px;left:50%;position:relative;}效果使用相对定位html代码<div class="bannerbox"...

    CSS学习 2个月前 120 0 图片居中
  • 图片在DIV中居中显示的方法

    图片在DIV中居中显示的方法

    问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景)关于该问题的解决方法如下:方法一:思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。结构如下:<div><img src="images/tt.gif" width="150" height="100" /></div>...

    CSS学习 2个月前 108 0 图片居中
  • display: list-item什么意思?display:block/inline/inline-block/inline-table/list-item的区别

    display: list-item什么意思?display:block/inline/inline-block/inline-table/list-item的区别

    display:list-itemdisplay:list-item为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点,而display:block则不会出现黑点。display:block/inline/inline-block/inline-table/list-item区别大家都知道 display:block是显示成块状,独占一行;而inline是行...

    CSS学习 2个月前 95 0 display
  • CSS 菜单(有子菜单/子分类)显示图标,没有不显示

    CSS 菜单(有子菜单/子分类)显示图标,没有不显示

    选单常见于我们的生活当中,通常用于整理一系列的指令,简化複杂的程序,使介面看起来更加友善。当应用程式愈複杂,功能愈多时,通常会利用多级选单将类似的指令组织成一个子选单。一般网页常见到二级选单,利用 CSS 即可达成,有些会透过 JavaScript 增加更多效果,例如动画、延迟等。多级选单一般常使用 JavaScript 达成,不过透过 CSS 也能做出简单的多级选单。###HTML<nav>   &l...

    CSS学习 2个月前 100 0 菜单
  • jQuery 遍历 - eq() 方法

    jQuery 遍历 - eq() 方法

    通过为 index 为 2 的 div 添加适当的类,将其变为蓝色:$("body").find("div").eq(2).addClass("blue");定义和用法eq() 方法将匹配元素集缩减值指定 index 上的一个。语法.eq(index)参数描述index整数,指示元素的位置(最小为 0)。如果是负数,则从集合中的最后一个元素往回计数。详细说明如果给定表示 DOM...

    js/jQuery 2个月前 84 0 eq()
展开