<!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. matlab中如何求某一个矩阵的标准差和均值

    方法: 先reshape成行向量或者列向量 然后,利用mean函数,std函数. 构造测试数据,可以利用random函数,就好.利用这个函数,可以构造不同分布的随机数列(或 矩阵). 如: >& ...

  2. IIS7.0出错的解决方案 IIS 状态代码：IIS详细错误代码以及解释

    一.请求筛选模块被配置为拒绝包含双重转义序列的请求.HTTP 错误 404.11 - Not Found   1.单击 开始 . 在 开始搜索 框中, 键入 Notepad. 右击 记事本 , 然后单 ...

  3. C - Catch That Cow

    题目大意 农民约翰需要抓住他的牛,他和他的牛在一条直线上(估计是一维生物),约翰在NN; ; ; i<; i++)        {            )                q- ...

  4. Android少量数据保存之SharedPreferences接口实例

    SharedPreferences数据保存主要是通过键值的方式存储在xml文件中 xml文件在data/此程序的包名/XX.xml 格式 <?xml version='1.0' encoding ...

  5. [转载]Web前端和后端之区分，以及面临的挑战

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  6. JSP写入MySQL数据库中出现乱码问题笔记

    1.在数据库链接字符串上要形如:jdbc:mysql://localhost:3306/db?useUnicode=true&characterEncoding=UTF-8(注意要加chara ...

  7. Android项目实战--手机卫士20--拿到已经安装了的程序以及程序管理主界面

    好了,之前我们就讲了高级工具里面的短信备份与还原,那么我们高级工具里面的功能就基本上完成的啦,还有一个叫程序锁的功能而已,但我们今天先不做它先,我们先把我们的程序管理这个功能完成先. 先让大家看一下我 ...

  8. Eclipse快捷键 10个最有用的快捷键（转）

    Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.    ...

  9. Android（java）学习笔记225：Activity 4 种启动模式

    1. 任务栈(task stack): 任务栈 是用来记录用户操作的行为,维护一个用户体验. 一个应用程序一般都是由多个activity组成的. 任务栈(task stack)记录存放用户开启的act ...

  10. Android 系统移植与驱动开发--第二章搭建Android环境核心步骤及心得

    第二章 搭建Android 开发环境 虽然在这一章中讲的是Android底层开发环境,但是相应伴随的还有Android NDK程序来测试Linux驱动,HAL程序库.底层开发不仅需要交叉编译环境,还要 ...