<!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. 本地ip 和 网络ip 解释

    本地IP其实就是私有IP地址10.0.0.0--10.255.255.255172.16.0.0----172.31.255.255192.168.0.0---192.168.255.255 这些都是 ...

  2. fiddler工具能干啥

    1.通过模拟弱网进行测试(试了木有效果) http://www.cnblogs.com/LanTianYou/p/7095174.html (试了貌似没反应) http://caibaojian.co ...

  3. JavaScript-Tool：Numeral.js

    ylbtech-JavaScript-Tool:Numeral.js A javascript library for formatting and manipulating numbers. 1. ...

  4. [转]身份证从 15 >> 18

    身份证号码的结构和表达形式 1.号码的结构 由十七位数字本体码和一位效验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字效验码.2.地址码 表示编码对象常住 ...

  5. 邮件服务器fixpost服务（1）

    发邮件所用的协议,SMTP协议,端口TCP25 收邮件所用的协议,pop3.imap协议 邮件客户端(MUA):foxmail.闪电邮.邮件大师.outlook 搭建邮件服务器所用到的软件(MTA邮件 ...

  6. Oracle 同一个字段的两值进行加减计算

    如 病人ID      入院日期                出院日期 00001      2016-09-01          2016-09-10 00001      2016-09-15 ...

  7. SQL中select与set的区别

    转自 : http://www.cnblogs.com/4mylife/archive/2012/10/25/2738466.html 下表列出 SET 与 SELECT 的区别   SELECT S ...

  8. Web 项目遇到的乱码问题

    问题代码: jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  9. Spark分析之启动流程

  10. mysql更新(八) 可视化工具Navicat的使用 索引

    17-索引   一.索引的介绍 数据库中专门用于帮助用户快速查找数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置吗,然后直接获取. 二 .索引的作用 约束和加速查 ...