<!DOCTYPE html><html><head><style type="text/css">div.插图{float:right;width:120px;margin:0 0 15px 20px;padding:10px;border:2px solid black;text-align:center;}span{ ???float: left; ???width: 0.7em; ???font-size: 400%; ???font-family: algerian; ???line-height: 90%;}#图1{ ???border: 2px dotted red;}a{ ???float: left; ???width: 10em; ???text-decoration: none; ???color: white; ???background: purple; ???padding: 0.2em 0.6em; ???border-right: 2px solid white;}a:hover{background-color: red}li{display: inline}div.容器{ ???width: 100%; ???margin: 0px; ???border: 1px solid gray; ???line-height: 150%;}div.页眉,div.页脚{ ???padding: 0.5em; ???color: white; ???background-color: gray; ???clear: left;}h1.页眉{ ???padding: 0em; ???margin: 0px;}div.左{ ???float: left; ???width: 177px; ???margin: 0px; ???padding: 1em;}div.内容{ ???margin-left: 210px; ???border-left: 1px solid black; ???padding: 1em;}.news { ?background-color: lightgray; ?border: solid 1px black; ?float: left; ?}.news img { ?float: left; ?}.news p { ?float: right; ?}</style> ???<meta charset="utf-8"> ???<title>CSS定位</title> ???<link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="容器"></div><div class="页眉"><h1 class="页眉">MyHomepage.com.cn(W3School.com.cn)</h1></div><div class="左"><p>“在必要的情况下，永远不要增加解释任何事情所需的实体数量。”奥卡姆的威廉(1285-1349)</p></div><div class="内容"> ???<h2>免费网站建设教程</h2> ???<p>在W3School.com.cn上，你可以找到你需要的所有web构建教程，从基本的HTML和XHTML到高级的XML、XSL、多媒体和WAP。</p> ???<p>W3School.com.cn--最大的网络开发者网站!</p> ???<p>在W3School.com.cn上，你可以找到你需要的所有web构建教程，从基本的HTML和XHTML到高级的XML、XSL、多媒体和WAP。</p> ???<p>W3School.com.cn--最大的网络开发者网站!</p> ???<p>在W3School.com.cn上，你可以找到你需要的所有web构建教程，从基本的HTML和XHTML到高级的XML、XSL、多媒体和WAP。</p> ???<p>W3School.com.cn--最大的网络开发者网站!</p> ???<p>在W3School.com.cn上，你可以找到你需要的所有web构建教程，从基本的HTML和XHTML到高级的XML、XSL、多媒体和WAP。</p> ???<p>W3School.com.cn--最大的网络开发者网站!</p></div><div class="页脚">盈科投资版权所有。</div><br><br><hr size="4px" color="black"><br><div class="插图"><img src="C:\Users\hp-pc\Pictures\壁纸\96JFOVBQ3S010031.jpg" id="图1" width="120"><br>CSS is fun!</div><span>T</span><p> ???his is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text.</p><p>在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。</p><br><ul><li><a href="#">菜单一</a></li><li><a href="#">菜单二</a></li><li><a href="#">菜单三</a></li><li><a>菜单四</a></li></ul><br><p>在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。</p><br><br><br><div class="news"><img src="C:\Users\hp-pc\Pictures\壁纸\96JFOVBQ3S010031.jpg" id="图2" width="120"><p> This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text. ???This is some text. This is some text. This is some text.</p></div></body></html>
网络效果图：
page1：
page2：
page3：
CSS定位
原文地址：https://www.cnblogs.com/DJOSIMON/p/9733821.html