<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

.wrap{ margin:100px 100px 0 100px; width:600px; height:200px; overflow:hidden;}

.one{ float:left; width:100px; height:100px; border:1px  dashed #ccc; border-right:0 none; margin-left:-2px; margin-top:-1px; border-bottom:0;}

</style>

</head>

<body>

<div class="wrap">

  <div class="one"></div>

  <div class="one"></div>

  <div class="one"></div>

   <div class="one"></div>

  <div class="one"></div>

  <div class="one"></div>

   <div class="one"></div>

  <div class="one"></div>

  <div class="one"></div>

  <div class="one"></div>

  <div class="one"></div>

  <div class="one"></div>

</div>

</body>

</html>

（转载）用css来实现十字的布局的更多相关文章

  1. 如何使用Flexbox和CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  2. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  3. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  4. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  5. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  6. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  7. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  8. 如何使用 Flexbox 和 CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  9. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

随机推荐

  1. C语言基础课程 第二课 HelloWorld不为菜鸟所知的秘密

    1    愉快的开端hello world    4 1.1    include头文件包含    4 1.2    main函数    4 1.3    注释    4 1.4    {}括号,程序 ...

  2. 数据结构（线段树）：CodeForces 85D Sum of Medians

    D. Sum of Medians time limit per test 3 seconds memory limit per test 256 megabytes input standard i ...

  3. 【模拟】Codeforces 691C Exponential notation

    题目链接: http://codeforces.com/problemset/problem/691/C 题目大意: 输入一个数,把它表示成a·10b形式(aEb).输出aEb,1<=a< ...

  4. ASP.NET网站发布－允许更新此预编译站点 打勾与不打勾的区别

    发布网站时在打开的对话框中,有一个选项是至关重要的,那就是“允许更新此预编译站点”: “允许更新此预编译站点”这一项,默认情况下,前面是打上一个√的,至于要不要打上一个√,是可选的,那么,打勾与不打勾 ...

  5. __block在ARC和非ARC下有什么不同

    一般在block中修改变量都需要事先加block进行修饰.在非arc中,block修饰的变量的引用计算是不变的.在arc中,会引用到,并且计算+1:非arc下可使用(arc直接使用__weak即可) ...

  6. linux 挂载ISO

    首先,将作为源的iso的挂载到系统上. 代码如下: mount -o loop /xxx/xxx.iso /mnt/iso/ 其中/mnt/iso是事先在本地建立的文件夹. 然后将文件iso.repo ...

  7. XCODE 代码行统计

    find . -name "*.m" -or -name "*.h" -or -name "*.c" |xargs grep -v &quo ...

  8. scrollview中停止滚动的监听

    [补充]可以在主线程控制,特别注意 scrollView3.postDelayed(new Runnable() { @Override public void run() { scrollView3 ...

  9. Android--图片的三级缓存策略

    三级缓存缓存(内存)--->本地磁盘---->网络1.首先看一下图片存储到本地磁盘 public class FileUtils { String path;//文件存储的地方 publi ...

  10. 小胖学PHP总结1-----PHP的数据类型

    PHP一共支持8种原始类型.包含4中标量类型,即:boolean(布尔型).integer(整形).float/double(浮点型)和string(字符串型):两种复合类型,即:array(数组)和 ...