iT邦幫忙

DAY 16
1

網路技術學習筆記系列 第 16

CSS 兩欄式排版

廢話不多說

來把我今天的code貼上來!

我使用的方法是 float: left ;

搭配 position: relative;

HTML:

		<meta charset="UTF-8">
		<title>exercise5</title>
		<link rel="stylesheet" href="exercise5.css">
	
	
		<p>abcdefg</p>

		<div class="parent">
			<div class="left">
				<ul>
					<li>aaa</li>
					<li>bbb</li>
					<li>ccc</li>
				</ul>
			</div>
			<div class="right">
				<a href="http://www.facebook.com"></a>
			</div>
		</div>

	

CSS:

p{
	color:green;
}
.parent{
	position:absolute;
}
.left{
	position: relative;
	float:left;
	height: 350px;
	width: 200px;
	background-color: blue;

}
.right{
	position: relative;
	float: left;
	height: 350px;
	width: 200px;
	background-color: orange;
}

DEMO:


上一篇
CSS 標籤的階層順序計算 Specificity
下一篇
CSS筆記n 排版相簿
系列文
網路技術學習筆記17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言