CSS设计美丽之绝对定位（absolute）的使用（小作品）

最新推荐文章于 2024-04-23 14:12:55 发布

「已注销」

最新推荐文章于 2024-04-23 14:12:55 发布

阅读量979

点赞数 1

分类专栏： css设计之美

本文链接：https://blog.csdn.net/h15882065951/article/details/71976726

版权

css设计之美专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于HTML与CSS的小作品之一：

前端已经学习过绝对定位的概念了：

绝对定位：脱离文档流，以离自己最近定位的祖先元素（position）为参照物，如果没有定位的祖先元素，则追溯到以body为参照物，通过四个偏移属性进行偏移，不会影响文档中的元素，其margin不会与其它margin重叠。

以下是自己学习绝对定位后的做的一个小作品：

完整代码：点击查看本作品完整的代码

最后的作品效果为：

根据图片可以写出大概的HTML代码框架：

<!DOCTYPE html>
<html lang="zh-en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>CSS Zen Garden: CSS設計之美</title>
	<link rel="stylesheet" media="screen" href="029/029.css">

	<meta name="author" content="Changjiu Huang">
	<meta name="description" content="展示CSS设计的美丽。">
	<meta name="robots" content="all">

	<!--[if lt IE 9]>
	<script src="script/html5shiv.js"></script>
	<![endif]-->
  </head>

<body>
<div class="page-wrapper">

	<section class="intro" id="zen-intro">
		<header role="banner">
			<h1>CSS Zen Garden</h1>
			<h2><abbr title="Cascading Style Sheets">CSS</abbr>設計之美</h2>
		</header>

		<div class="summary" id="zen-summary" role="article">
			<p></p>
			<p></p>
		</div>

		<div class="preamble" id="zen-preamble" role="article">
			<h3>開悟之路</h3>
			<p> </p>
			<p></p>
			<p></p>
		</div>
	</section>

	<div class="main supporting" id="zen-supporting" role="main">
		<div class="explanation" id="zen-explanation" role="article">
			<h3>這是關於什麼？</h3>
			<p></p>
			<p></p>
		</div>

		<div class="participation" id="zen-participation" role="article">
			<h3>參與</h3>
			<p> </p>
			<p></p>
			<p></p>
		</div>

		<div class="benefits" id="zen-benefits" role="article">
			<h3>益處</h3>
			<p></p>
		</div>

		<div class="requirements" id="zen-requirements" role="article">
			<h3>必要條件</h3>
			<p></p>
			<p> </p>
			<p></p>
			<p></p>
			<p></p>
		</div>

		<footer>
			<a href="javascript:void(0);" title="檢查網站的HTML是否合乎標準" class="zen-validate-html">HTML</a>
			<a href="javascript:void(0);" title="檢查網站的CSS是否合乎標準" class="zen-validate-css">CSS</a>
			<a href="javascript:void(0);" title="檢視本網站的創用CC版權聲明：姓名標示-非商業性-相同方式分享" class="zen-license">CC</a>
			<a href="javascript:void(0);" title="閱讀關於本網站的親和力說明" class="zen-accessibility">A11y</a>
			<a href="javascript:void(0);" title="在GitHub建立本網站的分支" class="zen-github">GH</a>
		</footer>

	</div>


	<aside class="sidebar" role="complementary">
		<div class="wrapper">

			<div class="design-selection" id="design-selection">
				<h3 class="select">選擇一項設計：</h3>
				<nav role="navigation">
					<ul>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
					  <li></li>
				    </ul>
				</nav>
			</div>

			<div class="design-archives" id="design-archives">
				<h3 class="archives">資料彙整：</h3>
				<nav role="navigation">
					<ul>
						<li class="next">
							<a href="javascript:void(0);">
								下一個設計 <span class="indicator">›</span>
							</a>
						</li>
						<li class="viewall">
							<a href="javascript:void(0);" title="瀏覽所有設計。">
								瀏覽所有設計							</a>
						</li>
					</ul>
				</nav>
			</div>

			<div class="zen-resources" id="zen-resources">
				<h3 class="resources">資源：</h3>
				<ul>
				  <li></li>	
				</ul>
			</div>
		</div>
	</aside>


</div>
</body>
</html>

使用CSS样式表示设置样式：

/**
* fileName: style.css
*
* fileRemark：层叠样式表
*
* author: changjiu Huang
*
* email: 99795427@qq.com
*
* create log 2017年5月14日12:00:00
*
* update log 2017年5月14日12:30:00
*
**/

/* basic css*/
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
  background: #fff url("main_bg.gif") repeat-x top left;
}

p {
  margin: 0;
  text-align: left;
}

a:link {
  font-weight: bold;
  color: #616157;
}

a:visited {
  font-weight: bold;
  color: #616157;
}

a:hover, a:active {
  color: 814610;
}

/* 具体设计 */
.page-wrapper {
  width: 770px;
  padding: 0;
  margin: 0;
}

.intro {
  width: 770px;
  padding: 0;
  margin: 0;
  margin-top: 28px;
  background: url("quicksum_bg.gif") no-repeat;
}

header {
  width: 770px;
  height: 72px;
  padding: 0;
  margin: 0;
  margin-bottom: 22px;
}

header h1 {
  float: left;
  width: 403px;
  height: 72px;
  margin-top: 0;
  background: transparent url("intro_bg.jpg") no-repeat left top; 
}

header h2 {
  float: left;
  width: 367px;
  height: 72px;
  margin: 0;
  background: transparent url("intro_bg2.jpg") no-repeat left top;
}

/* 隐藏 标题 */
header h1, header h2 {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}


/* summary css */
.summary {
  float: left;
  clear: both;
  width: 180px;
  padding: 10px;
  margin-top: -1.8em;
  border-top: 1px dashed #999;
  font-family:georgia, serif;
  font-size: 11px;
  line-height: 30px;
  color: #626257;
}

/* 首字母下沉 */
.summary p:first-child:first-letter,
.preamble p:nth-child(2):first-letter {
  padding-right: 5px;
  font-size: 3em;
  color: #811610;
}


/* preamble css */
.preamble {
  clear: both;
  width: 180px;
  padding: 10px;
  line-height: 30px;
  font-family:georgia, serif;
  font-size: 11px;
  color:#616157;
  z-index: 4;
}

.preamble h3 {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #811610;
  border-bottom: 1px solid #811610;
  font-size: 15px;
  line-height: 16px;
}


/* supporting css */
.supporting {
  position: absolute;
  top: 100px;
  width: 344px;
  height: auto;
  padding: 0 10px;
  margin-left: 200px;
  border: 1px solid #999;
  background: #f7f7f2;
  font-family:georgia, serif;
  font-size: 13px;
  box-shadow: 5px 0 5px #ccc;  
}

.explanation h3, .participation h3, 
.benefits h3, .requirements h3 {
  width: 300px;
  height: 15px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #999;
}

.explanation h3 {
  background: transparent url("sup_h3_a.gif") no-repeat;
}

.participation h3 {
  background: transparent url("sup_h3_b.gif") no-repeat;
}

.benefits h3 {
  background: transparent url("sup_h3_c.gif") no-repeat;
}

.requirements h3 {
  background: transparent url("sup_h3_d.gif") no-repeat;
}

.supporting h3 {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

footer {
  padding-bottom: 10px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
  font-family:verdana, arial, sans serif;
  font-size: 10px;
  text-align: center;
}

footer a:link, footer a:visited { 
	margin: 5px;
	font-weight: normal; 
}


/* sidebar css */
.sidebar {
  position: absolute;
  left: 575px;
  top: 100px;
  width: 200px;
  height: 100%;
  font-size: 12px;
}

.sidebar h3 {
  width: 180px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

.sidebar h3.select {
  margin-bottom: 10px;
  background: transparent url("linklist_a.gif") no-repeat left bottom;
}

.sidebar h3.archives {
  padding-top: 5px;
  border-top: 1px dashed #999;
  margin: 25px 10px 10px 0;
  background: transparent url("linklist_b.gif") no-repeat left bottom;
}

.sidebar h3.resources {
  padding-top: 5px;
  border-top: 1px dashed #999;
  margin: 25px 10px 10px 0;
  background: transparent url("linklist_c.gif") no-repeat left bottom;
}

.sidebar ul {
  padding: 0;
  margin: 0;
  color: #555;
}

.sidebar ul li {
  padding-top: 5px;
  margin-bottom: 5px;
  list-style: none;
  background: transparent;
}

.sidebar li a:link { 
	color: #555;
}

.sidebar li a:visited {
	color: #555;
}

.sidebar li a:hover, .sidebar li a:active {
	color:#811610;
}	

a.designer-name:link, a.designer-name:visited,
a.designer-name:hover, a.designer-name:active {
  font-weight: normal;
}

其中，supperting部分和sides部分使用了绝对定位。且它们均是以<body>为参考点，因为它们的父级没有使用定位属性。