css樣式圖文排版
<!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>css圖文排版</title>
<style type="text/css">
#menu{
list-style-type:none;
list-style-position:outside;
list-style-image:none;
margin-top:auto;
padding-top:10px;
}
#menu li{
/*float:left;*/
margin:5px;
border:solid 1px blue;
display:inline;
}
#top{
background-image:url(html_css_javascript/image/bg.png);
height:40px;
text-align:center;
}
.clearfloat { /* 此類應當放在 div 或 break 元素上,而且該元素應當是完全包含浮動的容器關閉之前的最後一個元素 */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="top">
<ul id="menu">
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</div>
<h1> 主要內容 </h1>
<p>
<div style="float:left; margin:10px;"><img src="html_css_javascript/image/hand1.gif"/></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam.<div style="float:right; margin:10px;"><img src="html_css_javascript/image/hand1.gif"/></div> Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
</p>
<br class="clearfloat"/>
<hr/>
<h2>H2 級別的標題 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</body>
</html>
相關文章
- CSS 設定<img>圖片樣式CSS
- CSS文字排版CSS
- 用html+css樣式,畫背景圖HTMLCSS
- CSS3製作圖片樣式CSSS3
- css樣式CSS
- div+css排版CSS
- 借用圖文智慧排版製作精美的鎖屏圖片
- 【BootStrap】圖片樣式、輔助類樣式和CSS元件 -附原始碼bootCSS元件原始碼
- 常用CSS樣式2:其它樣式CSS
- 常用CSS樣式1:文字樣式CSS
- CSS系列:CSS常用樣式CSS
- CSS系列:CSS文字樣式CSS
- CSS系列:CSS表格樣式CSS
- 教你輕鬆整合華為Image Kit圖文排版功能
- CSS重置樣式CSS
- css字型樣式CSS
- css背景樣式CSS
- 001---css樣式規則及css字型樣式CSS
- 匯入式CSS樣式CSS
- 1.5 常用CSS樣式1:文字樣式CSS
- 1.6 常用CSS樣式2:其它樣式CSS
- font-class引入css樣式,引入字型圖示CSS
- CSS 樣式防禦CSS
- css修改title樣式CSS
- css樣式簡寫CSS
- css 樣式清零CSS
- Css基本樣式————文字CSS
- CSS的基本樣式CSS
- 認識CSS樣式CSS
- CSS樣式簡介CSS
- CSS常見樣式CSS
- CSS滑鼠樣式整理CSS
- CSS滑鼠樣式(cursor)CSS
- CSS樣式繼承CSS繼承
- css設定背景圖片樣式程式碼例項CSS
- QuarkXPress 2021 for Mac(圖文設計排版佈局工具)Mac
- css樣式常用的樣式以及選擇器CSS
- CSS層疊樣式表——定義樣式表CSS