<!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=utf-8" />

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

<style type="text/css">

*

{

    margin:0px;

    padding:0px;}

.a

{

    width:150px;

    height:300px;

    border:1px solid #F00;}

</style>

</head>

<body>

<!--float 只需要确定左右，他就会靠左右边出现，同时建立多个，默认占满第一行后自动换行-->

<div class="a" style="float:left">A</div>

<div class="a" style="float:right">B</div>

<div class="a" style="float:left">C</div>

<div class="a" style="float:right">D</div>

<div class="a" style="float:left">E</div>

<div class="a" style="float:right">F</div>

</body>

</html>

格式与布局 float 左右悬浮边框的更多相关文章

  1. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  2. css样式，边界和边框，格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  3. css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

  4. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  5. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  6. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  7. 关于CSS格式与布局中的基础知识的简单操作

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

  8. 网页布局——float浮动布局

    我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下 首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离 ...

  9. HTML静态网页的格式与布局（position：（fixed、absolute、relative）、分层、float（left、right））

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...

随机推荐

  1. Redis高速内存缓冲平台可视化监控之RedisLive配置实战

    一.引用 这两天在弄Reids高速缓存平台的图形化监控,由于对于Python并不是很熟悉,安装过程中遇到了不少问题,包括: 1.python必备安装包的安装问题 2.Redis Live界面显示问题 ...

  2. ubuntu卸载vsftpd出错

    卸载vsftpd出错 $ sudo apt remove vsftpd Reading package lists... Done Building dependency tree Reading s ...

  3. Bootstrap-CSS：网格系统

    ylbtech-Bootstrap-CSS:网格系统 1.返回顶部 1. Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap ...

  4. Win7_64位 CHM打不开

    (2)在命令行运行regsvr32 itss.dll (3)在命令行运行regsvr32 hhctrl.ocx (4)开始--运行--输入“regedit”,打开注册表,找到以下分支: HKEY_LO ...

  5. 让MySql支持Emoji表情（MySQL中4字节utf8字符保存方法）

    手机端插入Emoji表情,保存到数据库时报错: Caused by: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x84' ...

  6. Linux系统查看系统硬件配置信息

    1.查看CPU信息 # 查看cpu负载 uptime # cpu使用率 (没有sar 则yum -y install sysstat) sar top bn1 |grep %Cpu # 每个cpu使用 ...

  7. OpenStack之日志

    OpenStack日志 日志对于一个稳定的系统来说相当重要,对于OpenStack这样一个大型的系统,日志当然也是必不可少,理解Openstack系统的日志对于保证OpenStack环境稳定非常重要. ...

  8. php内存回收机制的学习

    今天朋友去面试,回来问了一下怎么样,结果他说一脸懵逼,看来我们平时还是学习的太少了啊.于是比较好奇,果断问了一下都有哪些问题,朋友说第一个问题就是“描述PHP的垃圾回收机制”,我当时听了也是一脸茫然, ...

  9. TestNG中DataProvider的用法

    提供数据的一个测试方法.注解的方法必须返回一个Object[] [],其中每个对象 []的测试方法的参数列表中可以分配.该@Test 方法,希望从这个 DataProvider 的接收数据,需要使用一 ...

  10. restful 分风格

    参考:  https://blog.csdn.net/b671900/article/details/24478283 https://blog.csdn.net/john548/article/de ...