用四个DIV做四个块成一个田

用DIV做成一个田

#zz{

width: 400px;

height: 400px;

}

#s1{

width: 200px;

height: 200px;

background: black;

float: left;

}

#s2{

width: 200px;

height: 200px;

background: green;

float: left;

}

#s3{

width: 200px;

height: 200px;

background: navy;

float: left;

}

#s4{

width: 200px;

height: 200px;

background: yellow;

float: left;

}

另一种简单些的

用DIV做成一个田

#s1{

width: 100px;

height: 100px;

background: black;

float: left;

}

#s2{

width: 100px;

height: 100px;

background: green;

float: left;

}

#s3{

width: 100px;

height: 100px;

background: navy;

float: left;

clear: left;

}

#s4{

width: 100px;

height: 100px;

background: yellow;

float: left;

}

html田字格布局,用四个DIV做四个块成一个田字格布局相关推荐

  1. 网页设计(四)——DIV+CSS布局3

    前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...

  2. java算斜率_[Java教程]js用斜率判断鼠标进入div的四个方向

    [Java教程]js用斜率判断鼠标进入div的四个方向 0 2016-11-07 16:00:08 网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后 ...

  3. php div 实现上中下布局,上中下结构DIV CSS布局实例

    实例布局之上中下结构DIV CSS布局 上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部).中(内容区).下(底部版权)组成.而这其实是由最简单上下结构CSS布局演变而成,只 ...

  4. html ap div,第10讲 网页布局元素:Ap DIV.ppt

    第10讲 网页布局元素:Ap DIV 嵌套的含义:嵌套并不表示一个AP DIV元素在另外一个AP DIV元素里面显示,而是指一个AP元素的代码在另一个AP元素代码的内部. 嵌套在内的为子层,嵌套层外部 ...

  5. Android Compose 新闻App(四)下拉刷新、复杂数据、网格布局、文字样式

    Compose 新闻App(四)下拉刷新.复杂数据.网格布局.文字样式 前言 正文 一.下拉刷新 ① 添加依赖 ② 使用 ③ 样式更改 二.刷新数据 三.复杂数据 四.复杂列表 ① 更改返回数据 ② ...

  6. 计算机网页div怎么划分,《网页布局与实现(DIV+CSS)》

    编辑推荐:<高职高专计算机教学改革新体系规划教材>特色: ·反映产业技术升级,符合职业教育规律和高端技能型人才成长规律,根据计算机类专业建设和教育教学改革而设计. ·对接职业标准和岗位要求 ...

  7. 单片机四个按键做加减乘除功能

    这里写自定义目录标题 单片机四个按键做加减乘除功能 单片机四个按键做加减乘除功能 #include<reg52.h> #define uchar unsigned char #define ...

  8. css关于控制div靠左或靠右的排版布局

    关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).rig ...

  9. 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)

    阿里百秀首页案例 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现 中 ...

最新文章

  1. CAShapeLayer和CAGradientLayer
  2. codefore 213 C Relay Race (朴素DP)
  3. 通过这些简单的步骤从头开始学习Java
  4. linux分辨率和用户有关吗,Linux系统在高分屏非正常分辨率显示
  5. 读取config文件中的键值
  6. 好的飞鸽传书2007对于对外的API
  7. win10应用安装位置修改方法
  8. MySQL卸载不干净或Mysql安装失败的解决办法
  9. 林子雨大数据技术原理总结
  10. pytorch之transforms
  11. 3-arm裸机存储器控制器之SDRAM
  12. ff14服务器建信号,《FF14》服务器人口平均化公告 陆行鸟区关闭角色创建
  13. 用计算机怎么计算r角度,R语言中的数学计算
  14. Google首席软件工程师Joshua Bloch谈如何设计一款优秀的API
  15. python图像数据分析,【笔记】python数据分析——应用案例之图像负片
  16. 计算机不能再U盘新建文件夹,U盘无法建立新的文件夹?!三种小方法教你解决...
  17. 分布式机器学习核心理念
  18. 【Paper】2019_DoS/数据注入攻击下基于一致性的信息物理系统安全性研究_曹雄
  19. 正则表达式快速入门(三)
  20. iStylePDF接口对象必知必会系列之Page

热门文章

  1. 【English】九、kids/children/toddlers 三个单词的区别
  2. JS:滑动窗口算法 (上集)
  3. Expression常用方法使用
  4. fastadmin框架,如何获取管理员的角色组
  5. oracle命令解锁用户,在命令行下进行Oracle用户解锁
  6. 要上市的“麻辣烫一哥“杨国福,难过食安关
  7. 每天十道面试题(六)
  8. 容器化部署(k8s)任务调度平台xxl-job(部署过程及踩坑问题记录)
  9. 软件测试的介绍和如何做好软件测试
  10. 中蒙俄经济走廊背景_中蒙俄经济走廊背景下黑龙江省对俄经贸合作发展研究