<!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. thinkphp 3.2.3在nginx+php下的url重写配置经验

    环境:centos7.2+lnmp1.3(nginx+php7.0+mysql5.5) 进入服务器配置路径:cd /usr/local/nginx/conf/nginx.conf 修改nginx.co ...

  2. 淘宝用户api 如何获得App Key和API Secret

    下面我们通过截图的方式详细说明申请淘宝应用的步骤. 一.访问淘宝开放平台http://open.taobao.com/ 申请成为合作伙伴 二.填写个人信息申请入住 三.点击创建应用 四.填写应用名称, ...

  3. 关于分布式锁Java常用技术方案

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.      所以自己结合实际工作中的一些经验和网上 ...

  4. 实验七 c字符数组和字符串函数

    7.1 #include<stdio.h>#include<string.h> int main(){ char a[40]; int i; gets(a); //输入字符串进 ...

  5. -Java-Runoob-高级教程-实例-数组：09. Java 实例 – 数组扩容

    ylbtech-Java-Runoob-高级教程-实例-数组:09. Java 实例 – 数组扩容 1.返回顶部 1. Java 实例 - 数组扩容  Java 实例 以下实例演示了如何在数组初始化后 ...

  6. table边框

    border-collapse 语法 border-collapse:separate | collapse | inherit 默认值:separate 取值 separate: 默认值.边框会被分 ...

  7. dubbo 官方参考手册~备案（防止哪天阿里一生气把dubbo给删除了）

          首页  ||  下载  ||  用户指南  ||  开发者指南  ||  管理员指南  ||  培训文档  ||  常见问题解答  ||  发布记录  ||  发展路线  ||  社区 E ...

  8. CRM牛人博客

    http://www.cnblogs.com/caims/  刀客 http://www.cnblogs.com/waxdoll/ 蜡人张

  9. Hibernate 零散知识点

    1 get方法和load方法查询时的区别: 如果在缓存中没有找到相应的对象,get会直接访问数据库并返回一个完全初始化的对象,过程中可能涉及多次数据库调用:而load会返回一个代理对象,只有在对象ge ...

  10. ESB的编程模型(场景)

    GateWay:网关channel:数据传输的通道adapter:数据连接通道的数据适配器spliter:对通道里面的数据进行分割router:对通道进行路由transforme:对消息进行格式化转化 ...