CSS设计美丽之百合花（小作品）

最新推荐文章于 2022-01-21 00:12:56 发布
最新推荐文章于 2022-01-21 00:12:56 发布
阅读量741 收藏 3
点赞数
分类专栏： css设计之美
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h15882065951/article/details/72527663
版权

这次的小作品选用了百合花图片作为文档top的背景图。


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



作品效果：




代码框架结构：

<!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样式部分：



/* basic elements */
body, html, div {
  padding: 0;
  margin: 0;
}

body {
  font: 8pt/16pt 仿宋, geneva, arial, sans serif;
  color: #000;
  background: url("../images/1bg.gif") repeat-y;
}

ul li {
  list-style: none;
}

a:visited {
  color: #672;
}

a:hover {
  color: #ABBC47;
}

a {
  color: #230;
}


/* page-wrapper div*/
.page-wrapper {
  width: 760px;
  padding: 0;
  margin: 0;
  border-top: 1px solid #230;
  border-right: 1px solid #230;
  background: transparent url("../images/topbg.gif") repeat-x;
}


/* intro div */
/*----------------------------*/
.intro {
  width: 760px;
  margin-top: 20px;
  background: transparent url("../images/lsh.gif") no-repeat 687px 231px;
}

/* header div */
header {
  position: absolute;
  left: 0;
  width: 355px;
  height: 201px;
}

header h1 {
  float: left;
  width: 355px;
  height: 201px;
  margin-top: 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap; 
  background: transparent url("../images/centerpiece.jpg") no-repeat;
}

header h2 {
  display: none;
}


/* summary div */
.summary {
  width: 332px;
  height: 200px;
  border-right: 1px solid #ABBC47;
  border-top: 1px solid #ABBC47;
  margin: 0 0 0 355px;
  background: #ABBC47 url("../images/quicksumbg.gif");
}

/* footer of summary*/
footer {
  position: absolute;
  left: 0;
  top: 230px;
  width: 340px;
  margin: 0 30px 0 400px;
  font-size: 10px;
  text-align: right;
}

.summary  p:last-child a, 
footer a {
  color: #fff;
}


.summary p:first-child {
  padding: 100px 30px 2px 30px;
  font: bold 11px/14px 仿宋;
  color: #fff;
  
}

.summary p:last-child {
  position: absolute;
  left: 0;
  top: 230px;
  margin: 0 30px;
  font-size: 10px;
  color: #fff;
}


/* preamble div */
.preamble {
  width: 344px;
  padding: 40px 30px 30px 30px;
  border-right: 1px solid #ddd;
  margin: 30px 0 0 355px;
  text-align: left;
  background: transparent url("../images/endsection.gif") no-repeat bottom;
}

.preamble p:nth-child(2) {
  width: 270px;
}

.preamble h3 {
  width: 270px;
  height: 36px;
  border-bottom: 1px solid #ddd;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: transparent url("../images/h3preamble.gif") no-repeat bottom;
}


/* supporting css */
.supporting {
  width: 344px;
  padding: 50px 30px 30px 30px;
  border-right: 1px solid #ddd;
  margin: 0 0 0 355px;
  text-align: left;
}

.explanation, .benefits,
 .participation, .requirements {
  padding: 0 0 20px 0;
  margin-bottom: 20px;
  text-align: left;
  background: transparent url("../images/endsection.gif") no-repeat bottom;
}

.supporting h3 {
  width: 343px;
  height: 36px;
  border-bottom: 1px solid #ddd;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.explanation h3 {
  background: transparent url("../images/h3explanation.gif") no-repeat left bottom;
}

 .benefits h3 {
  background: transparent url("../images/h3benefits.gif") no-repeat left bottom;
   
}
 
 .participation h3 {
  background: transparent url("../images/h3participation.gif") no-repeat left bottom;
   
} 
 
 .requirements h3 {
  background: transparent url("../images/h3requirements.gif") no-repeat left bottom;
   
}


/* sidebar css */
.sidebar {
  position: absolute;
  left: 0;
  top: 252px;
  width: 195px;
  padding: 50px 30px 0 130px;
  border-right: 1px solid #ddd;
  background: transparent url("../images/lsh.gif") no-repeat;
}

.sidebar .wrapper {
  padding: 0;
  overflow: hidden;
}

.sidebar h3 {
  width: 200px;
  height: 36px;
  border-bottom: 1px solid #ddd;
    margin: 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

h3.select {
  background: transparent url("../images/h3select.gif") no-repeat left bottom;  
}

h3.archives {
  background: transparent url("../images/h3archives.gif") no-repeat left bottom;
  
}

h3.resources {
  background: transparent url("../images/h3resources.gif") no-repeat left bottom;
  
}

.design-selection ul {
  padding: 10px;
  margin: 10px 0 0 0;
}


.design-selection ul li {
  display: block;
  min-height: 40px;
  padding: 5px 0 5px 25px;
  margin: 5px 0;
  border-bottom: 1px solid #eee;
  background: transparent url("../images/bullet.gif") no-repeat 0 7px;
}

.design-selection li a {
  display: block;
  font-weight: bold;
  white-space: nowrap;
}

.design-selection li a.designer-name {
  display: inline;
  text-decoration: none;
  font-weight: normal;
}

.design-archives ul,
.zen-resources ul {
  padding: 10px;
  margin: 0 0 0 10px;
}

.design-archives ul li,
.zen-resources ul li {
  display: block;
  padding: 0 0 0 25px;
  margin: 0;
  background: transparent url("../images/bullet2.gif") no-repeat 2px 7px;
}






隐藏标题，并用背景图片代替标题：

width: 150px;
height: 10px;
text-indexnt: 100%;
overflow: hidden;
white-space: nowrap;
background: transparent url("") no-repeat left bottom;



在实际开发中，为了使HTML文档能适应更多的CSS样式表，建议将图片等放置于CSS样式表中。HTML文档中只保留纯文本


「已注销」
关注
专栏目录
HTML+CSS简单漫画网页设计成品 蜡笔小新3页 大学生个人HTML网页制作作品
QQ_____365392777的博客
08-16 2万+
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
用HTML+CSS做一个漂亮简单的花店网页【免费的学生网页设计成品】
html精品源码
08-09 6611
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
百合花html网站模板
04-02
百合花html网站模板
情人节，教大家使用css画出一朵玫瑰花。
weixin_30445169的博客
02-14 770
情人节到了，给大家来一朵高端的玫瑰花。 在网上看到的一个canvas实现的玫瑰花，效果很好，但是代码被压缩过，也没有注释，看的云里雾里的。 今天我教大脚用CSS来实现一朵玫瑰花。 先看效果 首先我们画出一个花瓣 1、画出一个长方形div，背景色设置成渐变色。 2、给四个角使用圆角，底部50%，顶部35% 然后使用css的3D属性 3D属性的详细请自行百度，这里不...
作品集
aiwanghuan5017的博客
03-26 178
作品集作品集邮箱爬虫博客游戏，pythonhtmlcss作品集1. 软件课设--邮箱管理软件demogithub源代码2. 豆瓣爬虫--爬取前250名电影信息github源代码3. 个人博客--powerd by flaskgithub源代码4. 天气预报查询github源代码5. 多人聊天室github源代码6. 图片瀑布流网站demogithub源代码7. 图片墙demogith...
75佳精美的 CSS 网页设计作品欣赏（系列一）
weixin_33778544的博客
09-14 364
　　互联网高速发展中，每天都有成千上万的新网站诞生。最早的网站是没有样式的，后来引入了 CSS 用来格式化结构化的网页内容，用于精确的控制网页的布局和外观。然而因为浏览器兼容性问题，要使用 CSS 制作出高质量的网站不容易。今天开始推出系列文章和大家分享75佳精美的 CSS 网页设计作品，一起欣赏。 1. Never Mind the Bullets 2. Bright Bulb Stud...
css作品集
qq_32265719的博客
06-28 343
垂直和居中 /*绝对定位的左右居中*/ boxCenter3{ width: 200px; height: 100px; border: 1px solid black; margin: 0 auto; position: absolute; left: 0; right: 0; } /*浮动元素的上下左右居中*/ .boxCenter2{ width: 200px; height: 100px; borde
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
html+css网页设计源码(简洁)
12-25
在简洁的网页设计源码中，CSS 可能包括了对背景颜色、文字样式、边距、填充、定位、响应式设计等方面的设置，确保了页面在不同设备上的一致性显示。 前端开发是将这些 HTML 和 CSS 代码集成到浏览器中，使用户能够...
HTML+CSS网页设计与布局从入门到精通
03-18
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
html+CSS 网页作品
02-24
简单的网页制作，运用html和css技术搭建的，可以在ie9以上版本运行。
CSS3花朵绽放动态图
04-29
CSS3花朵绽放动态图，鼠标经过花朵，花朵盛开动画效果，可以自行修改花朵的颜色
鲜花主页css网页模板
12-13
鲜花主页css网页模板 艺术 鲜花 网页 时尚 粉红 HTML CSS 模板下载
c++求百合花数
10-22
就是可自己求出百合花数，求1000以内的 想求更多可自己修改
用css做（花的绽放）
leiyanhongfhc的博客
08-24 1339
花的绽放         .header {         width: 800px;         height: 800px;         margin: 0 auto;         position: relative;         }      .header div {       height: 300px;       width: 300px;
30个让人印象深刻的CSS网站布局作品
weixin_34381687的博客
11-21 164
　　如今，CSS不再只是用来边边角角的修饰页面内容，网页设计师们通过合理的运用，可以把CSS的潜能发挥得淋漓尽致，一个很普通的页面在CSS的作用下能够脱胎换骨，呈现出让人惊讶的效果。今天这篇文章就收集了30个让人印象深刻的CSS网站布局作品，一起欣赏。 Pigspotter Rangus Niksone Frontend2011 Sawyer Hollenshead ...
HTML+CSS作品展示（学成在线网）
weixin_42541725的博客
01-21 1796
HTML+CSS作品展示（学成在线网）
CSS设计美丽之绝对定位（absolute）的使用（小作品）
但愿人长久 千里共婵娟
05-14 1002
绝对定位在实战中的运用。
经典网页设计：25个华丽的 CSS 网站作品案例
weixin_34402090的博客
06-13 1017
　　CSS 是网页设计师和网页开发人员最喜欢的技术之一，因为它有大量新特性、新元素和新技术。创建一个基本的布局可能并不需要很多的时间或精力。但是，如果你想让您的设计脱颖而出，那么就真的需要花费一番功夫。今天，我向大家分享25个屡获殊荣的 CSS 网站设计案例。 您可能感兴趣的相关文章 10套精美的免费网站后台管理系统模板 35个立体动感的视差滚动效果网站作品 10个精美的 HTML...
CSS3马蹄莲百合花图案绘制技巧
资源摘要信息:"本资源为一个使用纯CSS3技术绘制马蹄莲百合花图案效果的源码压缩包。CSS3作为当前网页设计中的主流样式表语言，提供了强大的图形绘制能力，允许开发者在不依赖图像或JavaScript的情况下，通过CSS属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值