资讯专栏INFORMATION COLUMN

js正方形div

vvpvvp / 1834人阅读




    
    Document
    


    
kkk

上面代码中,类为.contentdiv表示一个正方形,其高度为零,padding-top的百分比是基于父元素的宽度的,又因为该div的宽度为100%,即为父元素的宽度,所以padding-top的高度和该div的宽度是相等的,也就是正方形,在这个正方形里面可以定义我们想放在正方形里面的内容,并置其positionabsoluteleft,top均为0.这样内容区就可以放在类为.contentdiv正方形中了,并且由于该正方形是用百分比的形式,所以是响应式的。该正方形的宽度随着类为.containerdiv的宽度的变化而变化。

此外,提供一个清除浮动元素周围的类

.clearfix:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

li为浮动元素,则

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81092.html

相关文章

  • css 滚动视差 之 水波纹效果

    摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子: html: d...

    番茄西红柿 评论0 收藏0
  • css 滚动视差 之 水波纹效果

    摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子: html: d...

    番茄西红柿 评论0 收藏0
  • css 滚动视差 之 水波纹效果

    摘要:我们来看个例子代码很简单,让视口出现滚动条,然后它是这样的很普通的一个滚动效果,然后我们把注释去掉,就是加上这句话华丽变身由于它相对视口固定,看起来就好像只有一个背景一样。核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上。 我们来看个例子: html: d...

    番茄西红柿 评论0 收藏0
  • 【CSS练习】IT修真院--练习1-九宫格

    摘要:用于显示日志信息及输入一些命令请求监听。可获得请求列表,点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理,帮服务器识别设备用预览。 九宫格——用html+css制作一个网页 一. 目标效果: showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圆角...

    Tecode 评论0 收藏0
  • 纯CSS 常见3D实例

    摘要:一正方体我认为正方体可以算是图像的基础吧,首先正方体是由六个相同的面所组成,其次就需要我们依次构造。 一、正方体 我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面所组成,其次就需要我们依次构造。(据体构造在代码中)成平图如下:showImg(https://segmentfault.com/img/bVbffpd?w=608&h=504); 代码如下: ...

    szysky 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<