产品导航
  • 网页特效源码
    图片代码
    导航菜单
    选项卡/滑动门
    文字特效
    表单代码
    提示框/浮动层/弹出层
    DIV CSS
    html5 css3
    其他特效
  • 网站模板源码
    电脑、通讯、数码
    家具洁具、日用品
    建材、五金、装饰
    纺织、服装、鞋帽
    礼品玩具、工艺品
    家电、照明、电子
    文具、乐器、体育
    机电、仪器、设备
    食品、饮料、酒类
    汽车、摩托电动车
    能源、环保、节能
    冶金、金属、零件
    农业、水产、养殖
    矿产、石油、化工
    珠宝首饰、化妆品
    医药医器、保健品
    包装、印刷、造纸
    书画、艺术、收藏
    通用、其他制造业
    房地产、建筑装修
    餐饮、咖啡、茶楼
    咨询、策划、翻译
    金融、证券、典当
    健身、运动俱乐部
    家政、保洁、搬家
    医院、诊所、保健
    旅游宾馆、农家乐
    美容、休闲、养生
    婚庆、摄影、影楼
    仓储、物流、租车
    维修、保养、回收
    广告、会展、设计
    文化、教育、培训
    政府、协会、机构
    其他行业网站
  • 小程序源码
  • 游戏源码
  • 微信公众平台源码
  • 营销软件
  • 云虚拟主机
    全能型云虚拟主机
    海外免备案主机
    高防云享主机
    专业型云虚拟机
    Linux专业型云虚拟机
    .NET专业型云虚拟机
    JSP专业型云虚拟机
    百度云虚拟机(BCH)
  • 旅游系统
    旅游网站模板
    组合套餐
    产品应用
    营销应用
    内容应用
    供应分销应用
    插件接口应用
    SAAS版本应用
  • Cisco设备
    交换机
    路由器
    无线
    网络管理
    接口和模块
    光网络
  • IBM设备
    服务器
  • 华为设备
    交换机
    路由器
    WLAN
    存储
  • 智能设备

前端制作开发之CSS网格线制作

 二维码
发表时间:2021-05-25 16:40
最近在工作中,遇到需要绘制网格线的效果,如下图:

我尝试用了三种方式去做,第一种方式是用linear-gradient()做的,首先,
Html:

网格线效果的Css:
background: -webkit-linear-gradient(top, transparent 180px, #c3c3c3 0), -webkit-linear-gradient(left, transparent 306px, #c3c3c3 0);
background-size: 307px 181px;
考虑兼容性,可以加上一些前缀:
-moz-linear-gradient、-ms-linear-gradient、-webkit-linear-gradient
浏览器支持如下:

-webkit-linear-gradient(top, transparent 180px, #c3c3c3 0)和-webkit-linear-gradient(left, transparent 306px, #c3c3c3 0);用意是是上面180px设置了透明的,左边开始306px设置了透明的,然后水平方向限制只显示307px,在垂直方向设置限制只显示181px的范围,加上background默认了repeat的,那么就能到想要的网格线了,不过此次我需要做的效果不能用这个,因为这里设置了固定的值,意味了网格的大小固定了,下面两种方式可以得到根据屏幕大小变化,网格数不变而自适应的网格。
第二种方式需要在div. grid里面添加多个span,一个span代表一个网格,用grid布局做,grid-gap是设置网格布局中列和行之间的间距大小,grid-template-columns是设置网格布局中的列宽,grid-template-rows是设置网格布局中的行高,用网格布局做这个网格线,需要在div.grid的子级设置边框。

Css:
.grid{
width: 100vw;
   height: 100vh;
   grid-template-columns: auto auto auto auto auto;
   grid-template-rows: auto auto auto auto;
   display: grid;
   grid-gap: 0;
}

.grid span{
opacity: 0.25;
border: #FFFFFF solid 1px;
margin-left: -1px;
    margin-top: -1px;
}
不过整个容器最外边我不需要有边框,于是我选择了用第三种方式做。第三种也是需要在div. grid里面添加多个span,一个span代表一条线,然后,布满屏幕的网格就是由一条一条线组成,例如:上面需要做的效果,就是四行五列,需要7条线,那么设置7个span,前面四个span的代表的是四条竖线,后三个是三条横线,然后设置如下的样式就能得到想要的效果。
Css:
.grid{
position: absolute;
left: 0;
top: 0;
width: 100vw;
    height: 100vh;
z-index: 1;
pointer-events: none;
}
grid span{
    display: block;
    position: absolute;
    background: rgba(255,255,255,0.25);
}
.grid span:nth-child(1), .grid span:nth-child(2), .grid span:nth-child(3), .grid span:nth-child(4){
    bottom: 0;
    width: 1px;
    height: 100%;
}
.grid span:nth-child(1){
    left: calc(20% - .5px);
}
.grid span:nth-child(2){
    left: calc(40% - .5px);
}
.grid span:nth-child(3){
    left: calc(60% - .5px);
}
.grid span:nth-child(4){
    left: calc(80% - .5px);
}
.grid span:nth-child(n+5) {
    left: 0;
    height: 1px;
    width: 100%;
}
.grid span:nth-child(5) {
    top: calc(1 * 25vh - .5px);
}
.grid span:nth-child(6) {
    top: calc(2 * 25vh - .5px);
}
.grid span:nth-child(7) {
    top: calc(3 * 25vh - .5px);
}
关注我们
关于我们
天隆网络科技有限责任公司励志为顾客提供出更好的网站建设、二次开发、管理、维护系统等。本团队为此收录了大量的技术和相关人员。公司积极鼓励客户前来本站交流互动,积极鼓励为本站提出创新的好点子 本团队专注于企业的网站设计制作,为刚接触网站开发和运营的客户提供更好的帮助到你的解决方案。
服务范围
联系我们
QQ:1602299552
邮箱:dhtlit@qq.com
付款方式:现金,刷卡,支付宝,微信