<!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. spoj-694-Distinct Substrings(后缀数组)

    题意: 给定一个字符串,求不相同的子串的个数 分析: 每个子串一定是某个后缀的前缀,那么原问题等价于求所有后缀之间的不相同 的 前 缀 的 个 数 . 如 果 所 有 的 后 缀 按 照 suffix ...

  2. Linux企业级开发技术（7）——libevent企业级开发之锁和线程

    编写多线程程序的时候,在多个线程中同时访问同样的数据并不总是安全的. libevent的结构体在多线程下通常有三种工作方式: 1.某些结构体内在地是单线程的:同时在多个线程中使用它们总是不安全的. 2 ...

  3. 数据结构典型算法的VC实现（袁辉勇）

    1. 迷宫问题求解 #include <stdio.h> #define m 8 //迷宫内有8列 #define n 8 //迷宫内有8行 #define MAXSIZE 100//栈尺 ...

  4. lightoj 1004 dp:数字三角形

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1004 #include <cstdio> #include <cst ...

  5. poj2299

    好吧,看到这个图片就知道是干什么的了,求逆序数- - 可以用线段树,貌似还可以用归并排序,这题应该是考的归并排序,毕竟是递归分治- - 基本上都忘了,再写一写试试吧. AC ///////////// ...

  6. Cocos2d-X学习——Android移植，使用第三方库.so被删掉问题

    2014-05-26 导语:Cocos2dx在安卓上移植的时候,增加第三方库,却发现新加的so库被删掉了. 正文: 1.我的环境: cocos2d-x 2.2.3, ndk-r9 2.网上找了非常多, ...

  7. Android中自定义View的MeasureSpec使用

    有时,Android系统控件无法满足我们的需求,因此有必要自定义View.具体方法参见官方开发文档:http://developer.android.com/guide/topics/ui/custo ...

  8. Android GridView属性集合

    GridView的一些特殊属性: 1.android:numColumns=”auto_fit”   //GridView的列数设置为自动 2.android:columnWidth=”90dp &q ...

  9. POJ 1039 Pipe 枚举线段相交

    Pipe Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9493   Accepted: 2877 Description ...

  10. vsftp配置主动模式和被动模式

    配置文件:/etc/vsftpd/vsftpd.conf 主动模式配置方法: 主动式连接使用的数据通道 connect_from_port_20=YES 支持数据流的被动式连接模式 pasv_enab ...