<!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. 【Mongous】

    amark/mongous Mongous - 一个轻量级的nodejs mongodb驱动 mongous,是我不够懂你吗?关于mongous不支持objectId查询 mongous 不需要 _i ...

  2. 【模拟】Codeforces 699A Launch of Collider

    题目链接: http://codeforces.com/problemset/problem/699/A 题目大意: 给N个点,向左或向右运动,速度均为1,问最早什么时候有两个点相撞.无解输出-1 题 ...

  3. Square（强大的剪枝）

    http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=2410 /* 题意; 给出一定数量的棍子用这 ...

  4. 《University Calculus》-chaper13-多重积分-二重积分的引入

    这一章节我们开始对多重积分的研究. 在此之前,我们首先来回忆起积分的过程,在平面中,面临求解不规则图形的面积(常叫曲边梯形)的时候,我们可以采取建立直角坐标系,然后通过得到不规则图形边界的函数表达式f ...

  5. docs

    https://www.eucalyptus.com/docs/eucalyptus/3.4/index.html  [Eucalyptus PDF官方下载] http://aws.amazon.co ...

  6. Linux 守护进程的启动方法

    守护进程”(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 Web应用写好后,下一件事就是启动,让它一直在后台运行. 这并 ...

  7. 将对象格式的style转换为字符串格式

    var style = { position:'absolute', background:'red', width:'2px', height:'2px', color:'#fff', top:x, ...

  8. PHP学习之［第05讲］PHP5.4 循环结构、系统函数和自定义函数

    一.while/for/break/continue: while (expr){ statements } for (expr1:expr2:expr3){ statement } break n  ...

  9. [Angular 2] ng-model and ng-for with Select and Option elements

    You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms ...

  10. josn 转php

    $data = josn_decode(data,[true]); 加true转化为php数组:不加为对象,使用:$data->'字段'.