html田字格布局,用四个DIV做四个块成一个田字格布局
用四个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做四个块成一个田字格布局相关推荐
- 网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
- java算斜率_[Java教程]js用斜率判断鼠标进入div的四个方向
[Java教程]js用斜率判断鼠标进入div的四个方向 0 2016-11-07 16:00:08 网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后 ...
- php div 实现上中下布局,上中下结构DIV CSS布局实例
实例布局之上中下结构DIV CSS布局 上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部).中(内容区).下(底部版权)组成.而这其实是由最简单上下结构CSS布局演变而成,只 ...
- html ap div,第10讲 网页布局元素：Ap DIV.ppt
第10讲 网页布局元素:Ap DIV 嵌套的含义:嵌套并不表示一个AP DIV元素在另外一个AP DIV元素里面显示,而是指一个AP元素的代码在另一个AP元素代码的内部. 嵌套在内的为子层,嵌套层外部 ...
- Android Compose 新闻App（四）下拉刷新、复杂数据、网格布局、文字样式
Compose 新闻App(四)下拉刷新.复杂数据.网格布局.文字样式 前言 正文 一.下拉刷新 ① 添加依赖 ② 使用 ③ 样式更改 二.刷新数据 三.复杂数据 四.复杂列表 ① 更改返回数据 ② ...
- 计算机网页div怎么划分,《网页布局与实现（DIV+CSS）》
编辑推荐:<高职高专计算机教学改革新体系规划教材>特色: ·反映产业技术升级,符合职业教育规律和高端技能型人才成长规律,根据计算机类专业建设和教育教学改革而设计. ·对接职业标准和岗位要求 ...
- 单片机四个按键做加减乘除功能
这里写自定义目录标题 单片机四个按键做加减乘除功能 单片机四个按键做加减乘除功能 #include<reg52.h> #define uchar unsigned char #define ...
- css关于控制div靠左或靠右的排版布局
关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).rig ...
- 前端移动Web第四天案例：阿里百秀首页-响应式布局（bootstrap框架）
阿里百秀首页案例 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现 中 ...
最新文章
- Overall Comparision With WCDMA
- java平衡二叉树，最全Java知识总结
- Linux内核调试方法总结之sysrq
- 结合传统与数字技术，构建逼真的机械设计
- 文件系统：Ext3和Ext4
- 电脑桌面出现透明条图标“复制”“刷新”解决方法
- cartographer探秘第五章之 Cartographer 所用到的 C++11 新特性
- Atitit 短信 技术的概论 短信备份 attilax总结 1.1. 短信的历史 1 1.2. 短信长度 160字的长度限制灵感来自对明信片的研究。明信片。大多数明信片上的字符不超过160个
- ASP（Answer Set Programming）编程入门
- java读取服务器文件_JAVA读取服务器端文件
- Android 10.0 PackageManagerService（四）APK安装流程-[Android取经之路]
- 阳/阴性预测值Positive/negative Predictive Value（推荐AA）
- 家用无线路由器哪个品牌好？程序员分享值得推荐的无线路由器
- ROS小车打造（12）－－Arduino订阅cmd_vel实现差速控制
- QGIS二次开发：鼠标在地图上移动时，状态栏显示鼠标所在位置经纬度
- 手把手教你搭建SSM框架，简单有效理解SSM框架
- vmware安装centos8网络配置并配置NAT子网（解决Unit network.service not found问题）
- 视觉定位系统在机器人全场定位的应用
- 计算机教室网络连接简图,多媒体教室连接示意图.ppt
- 一个Android下ping的简单工具类