HTML与css使用-CFANZ编程社区

1 HTML

HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以

包含非文字元素，如：图片、链接、音乐等等。

它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接

显示出来。这种标记性语言是因特网上网页的主要语言。

HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或

.html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器

（Server）上，对外发布信息。

1.1 重点

图片
超链接标签
表格
表单

1.2 基础语法

1.2.1 标签

HTML 标记是由"<“和”>"所括住的指令标记，用于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由"<起始标记>“＋内容＋”</结束标记>"构成）。
HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用"<标志名>内容</标志名>"来

表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。

为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格

标记、链接标记、表单标记和帧标记等。

1.2.1.1 单标签

单标签,不设置属性值。

<br/>、<hr/>

1.2.1.2 单标签属性

单标签(也叫空元素)，设置属性值。如：

<hr width="800" />

1.2.1.3 双标签

双标签，不设置属性值。如：

<title>…</title>

1.2.1.4. 双标签属性

双标签，设置属性值。如：

<body bgcolor="red">…</body>
<font size="7">…</font>

1.2.2 整体结构

HTML的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签

和标签之间有需要正确嵌套。

通常一个HTML网页文件包含3个部分：标记头区…、内容区和网页区…。

<html>
	<head></head>
	<body></body>
</html>
!DOCTYPE 告诉浏览器当前html文件是html5版本
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML文档的基本结构</title>
		<script></script>
		<link rel="stylesheet" type="text/css" href=""/>
	</head>
	<body>
	</body>
</html>

1.2.2.1. html

标志用于HTML文档的最前边，用来标识HTML文档的开始。而标志放在HTML文档的最后边，用

来标识HTML文档的结束，两个标志必须一块使用。

1.2.2.2 head

和构成HTML文档的开头部分。和标志对之间的内容是不会在浏览器的框内显示出来的，两个标

志必须一块使用。

在此标志对之间可以使用、、、等标签。
：用来提供关于文档的信息，起始属性为：charset=“utf8”。表示告诉浏览器页面采用的什么编

码，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示中

文。

：用来引入css文件：用来引入js文件或编写js代码。

1.3 常用标签

1.3.1 标题

标签可定义标题，标题依次递减
h1-h6
块级元素

		<h1>hello</h1>
		<h2>hello</h2>
		<h3>hello</h3>
		<h4>hello</h4>
		<h5>hello</h5>
		<h6>hello</h6>

1.3.2 水平线

hr 分割线
属性：
- width 宽度
- align 展示的方式
  
  center 居中显示

		<hr width="80px" align="right">
		<hr width="50%" align="left">
		<hr width="80%" align="center">

1.3.3 段落与换行

段落标签p 元素之间留有间隙块级元素
属性：
- align 内容展示的方式
  - justify 两端对齐
  - left
  - right
  - center
<br />换行

<p align="justify">
			标签定义段落。p 元素会1自动oiu在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规<br />
			标签定义段落。p 元素会自动在其前后1111创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规
			标签定义段落。p 元素会11自动在其前后创建一些空白。浏览器会自动添加这些空间，您也,可以在样式表中规
			标签定义段落。p 元1素会自动在其前后创建一些空白。;lk浏览器会自动添加这些空间，您也可以在样式表中规
			标签定义段落。p 元素会自1动在其前后创建oiu一些空白。浏览器会自动添加这些空间，您也可以在样式表中规
			标签定义段落。p 元素会自动在oiu其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规
			标签定义段落。p 元素1会自动在其前后创建一些空白。浏览器会自动添加这些空间，您,.也可以在样式表中规
			标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规
			标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规
			标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规
		</p>

1.3.4 列表

1.3.4.1 无序列表

无序列表结构
- …
- 属性：
  type 设置数据前面标识的类型

		<ul type="square">
			<li>java</li>
			<li>python</li>
			<li>web</li>
			<li>测试</li>
		</ul>

1.3.4.2 有序列表

		<ol type="I">
			<li>fg</li>
			<li>f5</li>
		</ol>

1.3.5 div与span

1.3.5.1 div

div 默认占据一整行
块级元素
align:left,right,center

		<div>hello world</div>
		<div>hello world</div>

1.3.5.2 span

只展示标签体中的内容

		<span>span标签</span>
		<span>span标签</span>

1.3.6 格式化标签

font
字体标签
属性
face 设置字体风格
size 1-7字体大小
color 字体颜色
pre
原模原样的展示标签体中的内容

	<font color="aqua" size="7" face="华文新魏">格式化标签</font>
		
		<pre>
				您也可以在样式表中规                         javase
				您也可以在样式表中规
				您也可以在样式表中规
		</pre>

文本标签

		<!-- **<sub>**（下标文本）、**<sup>**（上标文本） -->
		<b>粗体</b>  <strong>粗体</strong>  <i>斜体</i> <u>下划线</u> <del>中划线</del>
		H<sub>2</sub>O      2<sup>3</sup>

1.3.7 a标签

a标签
标签定义超链接，用于从一张页面链接到另一张页面
属性
href: 用于设置需要链接页面的地址,当前页面设置#
target：设置链接打开的方式
_self: 当前页面打开
_blank：重新打开页面加载内容
实现锚点
目标元素 a标签
可以设置id属性/name属性

 <a name="属性值"></a>

目标元素其他标签
设置id属性

 <div id="属性值"></div>

导航元素
a标签

<a href="#指向id/name的属性值"></a>

		<a href="https://www.baidu.com/">百度</a>
		<a href="https://www.baidu.com/" target="_self">百度</a>
		<a href="https://www.baidu.com/" target="_blank">百度</a>	
	<br>
	<br>
	<h1>HTML</h1>
	HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。 [5] 
	<h2 id="history">HTML历史版本</h2>上有如下版本： [5] 
		①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5] <br>
		②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 [5] 
		③HTML 3.2：1997年1月14日，W3C推荐标准。 [5] 
		④HTML 4.0：1997年12月18日，W3C推荐标准。 [5] <br>
		⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 [5] <br>
	<h2>
		<a name="w3c">万维网</a>
	</h2>
	（world wide web）上的一个超媒体文档称之为一个页面（外语：page）。作为一个组<br>织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 [3] 
	<br>
	<br />
	
	<a href="#">返回顶部</a>
	<a href="#history">跳转历史版本</a>
	<a href="#w3c">返回万维网</a>

1.3.8 图片

img 元素向网页中嵌入一幅图像。
属性
src: 链接图片的地址在线/本地
border: 边框
width 宽度
height 高度
alt 当图片加载失败时显示的文本内容
title 图片的标题（鼠标悬停在图片上显示）

		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下,你就知道" border="1">
		<img src="img/lbw1.png" width="300px" height="250px" alt="图片加载失败">

1.3.9 表格

table表格
- table 表格标签
  tr 表格的行
  th 表头，居中且字体加粗效果
  td 标准单元格，居左对齐
table属性
- border 边框
- width 宽度
- height 高度
- align 对齐方式
tr属性
- align 单元格内容的水平对齐方式
- valign 垂直方向的对齐方式
- bgcolor 背景颜色
style=“border-collapse: collapse;”
- 设置边框的显示效果
- collapse 合并边框
- separate 分离边框（默认）
td

colspan和rowspan分别规定单元格横跨的列数和行数

<body>
		<table border="1" width="600px" height="300px" align="center" style="border-collapse: collapse;">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr align="center" valign="top" bgcolor="aquamarine">
				<td>张三</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr align="right" valign="bottom" bgcolor="bisque">
				<td>小明</td>
				<td>19</td>
				<td>男</td>
			</tr>
		</table>
	</body>

1.3.10 常用字符实体

空格  
小于 <
大于 >
©(版权标记) ©

<body>
		hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;王五
		<br>
		&lt;h1&gt;标题&lt;/h1&gt;
		
		Copyright &copy; 2013-2020 菜鸟教程
	</body>

1.3.11 表单

1.3.11.1 form

<form>标签用于为用户输入创建HTML表单
表单能够包含input元素,比如文本字段，复选框，单选框，提交按钮等等。还可以包含textarea等元素
form 表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行

常用属性

属性	值	描述
action	URL	规定数据传输的地址
method	get,post	规定用于发送form-data的HTTP方法
name	Form_name	规定表单的名称
target	_blank,_self,_parent,_top,framename	规定在何处打开action URL，请求打开方式

get：默认,主动的获取方式，数据在地址栏上，数据容量有限，安全性差，有缓存
post：数据单独封装在请求体中，相对安全，无缓存，数据量理论无限

1.3.11.2 input

<input>标签用于搜集用户信息.

常用属性

属性	值	描述
alt	text	定义图像输入的代替文本
checked	checked	默认选中checked=‘checked’
readonly	readonly	只读readonly=‘readonly’
maxlength	number	最大长度maxlength=值
placeholder		提示语
value	value	规定input元素的值
type	text password radio checkbox button file hidden image reset submit	规定input元素的类型.

如果想使用表单文件上传的功能，必须将请求方式先改为post，设置表单属性 enctype=“multipart/form-data”
二进制表单：enctype=“multipart/form-data”
普通表单：application/x-www-form-urlencoded

注：表单元素的数据想要提交出去，必须设置name属性

radio单选按钮以name相同为一组

checkbox复选按钮以name相同为一组

<body>
		<h1>相亲网</h1>
		<form action="https://www.baidu.com/" method="get">
			<!-- 输入框  用户名 -->
			账号:<input type="text" name="uname" value="admin" readonly="readonly"/><br>
			<!-- 输入框  密码 -->
			密码:<input type="password" name="upwd" maxlength="6" placeholder="请输入密码"/>
			<br>
			<!-- 单选框   需要用name属性将按钮捆绑为一组 -->
			<input type="radio" name="sex" value="man" />男
			<input type="radio" name="sex" value="woman" />女
			<br>
			<!-- 复选框   需要用name属性将按钮捆绑为一组 -->
			爱好：<input type="checkbox" name="hobby" value="basketball" disabled="disabled"/>篮球
							<input type="checkbox" name="hobby" value="football" checked="checked"/>足球
							<input type="checkbox" name="hobby" value="ping pong"/>乒乓球
							<br />
							
		
						<!-- 文件上传 -->
						<input type="file" name="ufile">  <br />
						<!-- 重置按钮 -->
						<input type="reset" value="重置" disabled="disabled">
						<!-- 图片按钮 -->
						<input type="image" src="img/11.png" width="15px" height="15px">
						<!-- 普通按钮 -->
						<input type="button" value="普通">
						<!-- 提交按钮 -->
						<input type="submit" value="注册">
			
		</form>
	</body>1.3.11.3 textarea

1.3.11.3 textarea

定义多行的文本输入控件.文本可以容纳无限数量的文本,通过cols(宽度)与rows(行数)来规定尺寸
cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea cols="10" rows="5"></textarea>  <br>

1.3.11.4 label

<label>标签为input元素定义标注
label元素不会呈现任何的特殊效果
label标签的for属性应当与相关元素的id属性相同,此时点击label标签会自动为元素聚焦

			<label for="username" >用户名:</label>
			<input type="text" id="username" name="uesrname" /><br>

1.3.11.5 button

常用属性

属性	值	描述
disabled	disabled	禁用按钮
type	button,submit,reset	规定按钮类型
value	text	规定按钮初始值
name	button_name	规定按钮名称

<button type="button">普通button</button>
<button type="reset">重置button</button>
<button type="submit">提交button</button><br>

1.3.11.6 select

用于定义下拉列表
option属性
selected 默认选中

常用属性

属性	值	描述
disabled	disabled	禁用下拉框
multiple	multiple	规定可选择多个选项
name	name	规定下拉列表名称
size	number	显示出来的个数

option常用属性

属性	值	描述
disabled	disabled	禁用下拉框
selected	selected	默认选中
value	text	定义送往服务器的选项值

喜欢的颜色：<select name="color" size="4" multiple="multiple">
								<option value="red">红色</option>
								<option value="green">绿色</option>
								<option value="blue">蓝色</option>
								<option value="pink">粉色</option>
								<option value="black" selected='selected'>黑色</option>
								<option value="white">白色</option>
							</select>

1.3.12 标签分类

HTML中标签元素三种不同类型：块状元素，⾏内元素，⾏内块状元素。

1.3.12.1 块状元素

元素都从新的⼀⾏开始，并且其后的元素也另起⼀⾏；元素的⾼度、宽度、⾏⾼以及顶和底边距都可

设置；元素宽度在不设置的情况下，是它本身⽗容器的100%（和⽗元素的宽度⼀致），除⾮设定⼀个宽

度

1.3.12.2 行内元素

和其他元素都在⼀⾏上；元素的⾼度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的⽂

字或图⽚的宽度，不可改变。

1.3.12.3 ⾏内块状元素

和其他元素都在⼀⾏上；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。

2 css

CSS（英⽂全称：Cascading Style Sheets）层叠样式表, 是⼀种⽤来表现HTML（标准通⽤标记语⾔的⼀

个应⽤）或XML（标准通⽤标记语⾔的⼀个⼦集）等⽂件样式的计算机语⾔。

CSS是⽤来美化⽹⻚⽤的，没有⽹⻚则CSS毫⽆⽤处，所以CSS需要依赖HTML展示其功能。

2.1 重点

css基础语法

2.2 css的基本使用

2.2.1 格式

选择器名 {
						属性 : 属性值;
						......
					}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: aqua;
				font-size: 20px;
				font-family: "arial black";
			}
		</style>
	</head>
	<body>
		jaklfjskldjfklsd
	</body>
</html>

css声明要以分号;结束，声明以{}括起来
建议⼀⾏书写⼀个属性
若值为若⼲单词，则要给值加引号，如 font-family: “agency fb”;

2.2.2 css的使用

2.2.2.1 行内式

写在具体的标签中，通过style属性将样式设置上去，多个样式分号;隔开

<body>
		<div style="background-color: aliceblue;">
			<h1>hahah</h1>
		</div>
	</body>

2.2.2.2 内部样式

定义在head标签上的style标签中

<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			div{
				background-color: bisque;
			}
		</style>
	</head>

2.2.2.3 外部样式

在外部创建一个css文件，在head标签上通过link标签引入进来
<link rel=“stylesheet” type=“text/css” href=“css/style.css”/>
- rel 当前文件与引入文件的关系
- type 引入文件的类型
- href 引入文件的地址

div{
	background-color: green;
}

<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>

2.2.2.4 优先级

就近原则,越精确越优先

2.3 css选择器

2.3.1 基本选择器

2.3.1.1 通用选择器

选择所有

*{
				color: #00FFFF;
			}

2.3.1.2 元素指定器

选择指定标签

p{
				color: #008000;
			}

2.3.1.3 ID选择器

选择设置过指定id属性值的元素

#a{
				color: antiquewhite;
    
			}

<body>
		<div id="a">123</div>
	</body>

2.3.1.4 类选择器

选择设置过指定class属性值的元素

.b{
				color: aliceblue;
			}
			
<body>
		<span class="b">789</span>

	</body>

2.3.1.5 分组选择器

当⼏个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔

.b,p{
				background-color: #00FFFF;
			}

CSS样式的优先级，是根据选择器的精确度/权重来决定的，常⻅的权重如下，权重越⼤，优先级越⾼

元素选择器：1

类选择器：10

id选择器：100

内联样式：1000

2.3.2 组合选择器

2.3.2.1后代选择器（派⽣选择器）

⽤于选择指定标签元素下的后辈元素，以空格分隔

<style type="text/css">
			.food{
				border: 1px solid black;
			}

<h1>食物</h1>
		<ul class="food">
		    <li>水果
		        <ul>
		            <li>香蕉</li>
		            <li>苹果</li>
		            <li>梨</li>
		        </ul>
		    </li>
		    <li>蔬菜
		        <ul>
		            <li>白菜</li>
		            <li>油菜</li>
		            <li>卷心菜</li>
		        </ul>
		    </li>
		</ul>

2.3.2.2 ⼦元素选择器

⽤于选择指定标签元素的所有第⼀代⼦元素，以⼤于号分隔

.food > li{
				border: 1px solid black;
			}

2.3.2.3 相邻兄弟选择器

可选择紧接在另⼀元素后的元素，且⼆者有相同⽗元素。以加号分隔

#d + div{
				border: 1px solid black;
			}

<div id="d">
				    相邻兄弟选择器1
				    <ul>
				        <li>开心麻花</li>
				        <li>贾玲</li>
				        <li>宋小宝</li>
				    </ul>
				</div>
				<div>
					相邻兄弟选择器2
					<ul>
					    <li>开心麻花</li>
					    <li>贾玲</li>
					    <li>宋小宝</li>
					</ul>
				</div>

2.3.2.4 普通兄弟选择器

选择紧接在另⼀个元素后的所有元素，⽽且⼆者有相同的⽗元素，以波浪线分隔

#d2 ~ div{
		border: 1px solid black;
}

<div id="d2">
				    普通兄弟选择器1
				    <ul>
				        <li>开心麻花</li>
				        <li>贾玲</li>
				        <li>宋小宝</li>
				    </ul>
				</div>
				<div>
					普通兄弟选择器2
				</div>
				<div>
					普通兄弟选择器3
				</div>
				<div>
					普通兄弟选择器4
				</div>

2.4 css常用属性

2.4.1 背景

CSS 背景属性⽤于定义HTML元素的背景效果

2.4.1.1 background-color

设置元素的背景颜⾊

			body{
				background-color: #00FFFF;
			}

2.4.1.2 background-image

设置元素的背景图像，默认情况下，背景图像进⾏平铺重复显示，以覆盖整个元素实体。

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
			}

2.4.1.3 background-repeat

设置是否及如何重复背景图像
repeat 默认垂直水平重复
repeat-x 水平重复
repeat-y 垂直重复
background-repeat: no-repeat 不重复
inherit 继承父类

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
				background-repeat: no-repeat;
			}

2.4.2 文本

2.4.2.1 text-align

设置⽂本对⻬⽅式，center（居中），left（左对⻬），right（右对⻬）

#div1{
				text-align: center;
			}

2.4.2.2 color

设置字体颜色

#div1{
				text-align: center;
				color: #008000;
			}

2.4.2.3 text-decoration

规定添加到⽂本的修饰，字体样式,属性值：none、underline、overline、line-through
underline 对文本添加下划线。
overline 对文本添加上划线。
line-through 对文本添加中划线，与HTML中的s和 strike 元素相同。
none 关闭原本应用到元素上的所有装饰。

<a href="" style="text-decoration: underline; color: #000000;">百度一下</a>

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
				background-repeat: no-repeat;
				text-decoration: underline;
			}

2.4.2.4 text-indent

设置⽂本⾸⾏缩进

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
				background-repeat: no-repeat;
				text-decoration: underline;
				text-indent: 2em;
			}

2.4.3 字体

2.4.3.1 font-family

⽂本字体，该属性设置⽂本的字体。后备机制

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
				background-repeat: no-repeat;
				text-decoration: underline;
				text-indent: 2em;
				font-family: 楷体,宋体;
			}

2.4.3.2 font-size

⽂本⼤⼩

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
				background-repeat: no-repeat;
				text-decoration: underline;
				text-indent: 2em;
				font-family: 楷体,宋体;
				font-size: 20px;
			}

2.4.3.3 font-style

字体⻛格，该属性最常⽤于规定斜体⽂本。属性值：normal、italic、oblique
normal：文本正常显示；
italic：文本斜体显示；
oblique：文本倾斜显示，oblique是将文字强制倾斜。

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
				background-repeat: no-repeat;
				text-decoration: underline;
				text-indent: 2em;
				font-family: 楷体,宋体;
				font-size: 20px;
				font-style: italic;
			}

2.4.3.4 font-weight

字体加粗，该属性设置⽂本的粗细。
100-900 400正常体 700加粗

body{
				background-color: #00FFFF;
				background-image: url(img/11.png);
				background-repeat: no-repeat;
				text-decoration: underline;
				text-indent: 2em;
				font-family: 楷体,宋体;
				font-size: 20px;
				font-style: italic;
				font-weight: 700px;
			}

2.4.4 对齐方式

text-align 规定元素中的⽂本的⽔平对⻬⽅式。
center（居中），left（左对⻬），right（右对⻬），justify（两端对齐），inherit（继承父类）

2.4.5 display属性

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
none 不显示元素
block 将元素设置为块级元素
inline 将元素设置为行内元素

inline-block：行内块元素

list-item：作为列表显示

		<div style="display: inline;">div块级元素</div>abcd
		
		<span style="display: block;">行内span元素</span>123

2.4.6 float 浮动

float的属性值有none、left、right。

<div style="float: right">123</div>
<div style="float: right">456</div>