CSS案例

最新推荐文章于 2024-11-02 10:32:21 发布
最新推荐文章于 2024-11-02 10:32:21 发布
阅读量128 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ho622/article/details/105370819
版权

DAY1

案例1 01.CSS的语法.html

<!DOCTYPE html>
<html>
<head>
	<meta charset ="utf-8">
	<title>Doucment</title>
	<style>
 		 p{
   			color:red;
  			}
  		h2{
   			color:blue;
  			}
 	</style>
</head>
	<p>CSS从入门到精通</p >
 	<h2>主讲：hector</h2>
<body>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r7dhRZkl-1586255360830)(.\images\案例1.png)]

案例2 02.CSS应用样式.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/* 1.内部样式 */
		p{
			color:red;
		}
	</style>
	<!-- 外部样式  link标签链接样式文件 -->
	 <link rel="stylesheet" type="text/css" href="hello.css"> 
	 <!-- 外部样式 @import导入样式文件 -->
	<style>
		@import "hello.css"； 
		/* @import url(style/hello.css); */
	</style>
</head>
<body>
	<p>welcome to css!</p>
	<p>欢迎来到css课堂！</p>
	<!-- 2.行内样式 -->
	<h2 style="color:blue">WEB前端工程师</h2>
	<h2>JAVA开发工程师</h2>

	<div>嘿嘿</div>
	<div>哈哈</div>
	
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNvLwM7h-1586255360831)(.\images\案例2.png)]

案例3 03.CSS基础选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.标签选择器 */
		p{
			color:red;
			font-size:20px;
		}
		h2{
			color:yellow;
		}
		/* 2.类选择器 */
		.hello{
			background:#cccccc;
		}
		.world{
			font-weight:bold;
		}
		#heihei{
			color:blue;
		}
	</style>
</head>
<body>
	<!-- 给p标签中的内容设置样式 -->
	<p>welcome to css!</p>
	<p>hello world!</p>
	<h2>WEB前端开发</h2>
	<h3>JAVA开发</h3>
	<hr>

	<!-- 我只想修改第一个p标签 -->
	<p class="hello">welcome to css!</p>
	<p>hello world!</p>
	<h2>WEB前端开发</h2>
	<h3>JAVA开发</h3>
	<!-- 只要应用了hello这个类选择器就生效 -->
	<div class="hello">主讲</div>
	<!-- div既要有背景颜色，也要加粗 -->
	<div class="hello world">主讲</div>
	<span>CSS从入门到精通！</span>
	<hr>

	<h1 id="heihei">嘿嘿</h1>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEMoZCMo-1586255360831)(.\images\案例3.png)]

案例4 04.复杂选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/* 1.标签选择器与类选择器结合起来---复合选择器 */
		h1.aaa{
			color:red;
		}
	/* 2.标签选择器和ID选择器结合起来---复合选择器*/
	p#bbb{
		color:blue;
	}
	/* 2.组合选择器 */
		/* 分开书写 */
		h1,p,div,span,.ccc{
			font-size:30px;
		}
		
		div{
			background:#cccccc;
		}
		span{
			font-size:30px;
		}
		.ccc{
			font-weight:bold;
		}
		/* 3.嵌套选择器 */
		div>p{
			color:green;
			text-decoration: underline;
		}
		/* 对div内部的类选择器进行修饰 */
		div h3.ddd{
			color:pink;
		}
	</style>
</head>
<body>
	<!--  -->
	<h1 class="aaa">welcome</h1>
	<h4 class="aaa">css</h4>
	<h1>hello</h1>
	<hr>
	<!-- 1.需求，修改ID为bbb的p标签 -->
	<p id="bbb">world</p>
	<p>html</p>
	<h2 id="bbb">WEB开发</h2>
	<hr>
	<!-- 2.需求，将h1，pdiv，span中内容的字号设置为30像素 -->
	<h1>hello</h1>
	<p>html</p>
	<div>WEB开发</div>
	<span class="ccc">JAVA开发</span>
	<hr>
	<!--  3.需求，设置div内部的p标签样式-->
	<div>
		<p>div内部的p标签</p>
		<h3>div内部的h3标签</h3>
	</div>
	<hr>

	<div>
		<h2>
			<p>div内部的h2标签内部的p标签</p>
		</h2>
	</div>
	<hr>
	<!--需求修饰div内部的h3 -->
	<div>
		<p>div内部的p标签</p>
		<h3 class="ddd">div内部的h3</h3>
		<p class="ddd">ppp</p>
	</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zsFOnprr-1586255360831)(.\images\案例4.png)]

案例5 05.伪选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/* 	a:link{
			font-size:12px;
			color:black;
			text-decoration: none;
		}
		a:visited{
			font-size:15px;
			color:red;
		}
		a:hover{
			font-size:20px;
			color:red;
		}
		a:active{
			font-size:40px;
			color:green;
		} */
		a:link,a:visited{
			font-size:13px;
			color:#666666;
			text-decoration: underline;
		}
		a:hover,a:active{
			color:#ff7300;
			text-decoration: underline;
		}
		/* 普通标签，也可以使用伪类选择器 */
		p:hover{
			cloor:red;
		}
		p:zctive{
			color:blue;
		}
	</style>
</head>
<body>
	<a href="02.CSS应用样式.html">IT教育，高教培训</a>
	<p>CSS从入门到精通</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eW84473u-1586255360832)(.\images\案例5.png)]

案例6 06.伪元素选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p:first-letter{
			color:red;
			font-size:30px;
		}
		p:first-line{
			background:yellow;
		}
		p:before{
			content:"嘿嘿";
		}
		p:after{
			content:"哈哈";
		}
	</style>
</head>
<body>
	<p>hello world</p>
	<hr>

	<p>
		hello world <br>
		welcome to css!
	</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nyYBMAIM-1586255360832)(.\images\案例6.png)]

案例7 07.选择器的优先级.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <link rel="stylesheet" href="world.css"> -->
	<style>
		div{
			font-size:20px;
			color:red;
		}
		.hello{
			font-weight:bold;
			color:blue!important;
		}
		#world{
			text-decoration: underline;
			color:green;
		}
		p{
			color:red!important;
		}
	</style>
	<link rel="stylesheet" href="world.css"> 
</head>
<body>
	<div class="hello" id="world" style="color:pink;">CSS从入门到精通</div>
	<p>主讲：hector</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fja5AgE6-1586255360833)(.\images\案例7.png)]

案例8 08.字体相关的属性.html

<!DOCTYPE html>
<html>
<head>
	<meta charset ="utf-8">
	<title>Doucment</title>
	<style>
		div{
			font-size:39px;
		}
 		p{
 			/* font-size:20px; */
 			/* font-size:80%; */
 			font-size:2em;
 		}
 		span{
 			font-size:1em;
 		}
 		span.hello{
 			/* font-size:80%; */
 			font-size:2em;
 		}
 		body{
 			font-size:62.5%;
 		}
 		#ddd{
 			font-size:3em;
 		}
 		ul li{
 			/* font-size:30px;
 			font-weight:500;
 			font-family:华文行楷，黑体，宋体;
 			font-style:normal; */
 			font:normal normal 20px 黑体，楷体，宋体;
 		}
 	</style>
</head>
<body>
	<p>
		CSS从入门到精通!
	 	<span>主讲：高教培训</span>
	 </p>
	 <span id="ddd">主讲:hector</span>
	 <hr>
	 <div>
	 	我的DIV
	 	<p>
	 		CSS从入门到精通!
	 		<span>主讲：高教培训</span>
	 	</p>
	 </div>
	 <hr>

	 <span class="hello">主讲：高教培训</span>
	 <hr>

	 <ul>
	 	<li>嘿嘿</li>
	 </ul>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cyXZcVZO-1586255360834)(.\images\案例8.png)]

案例9 09.文本相关的属性.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			/* background-color:#0F0; */
			/* background-color:rgb(0,255, 0); */
			/* background-color:rgba(0, 255, 0, 0.5); */
			background-color:#54d2c9;
			line-height:50px;
			text-align:center;
		}
		img{
			vertical-align:middle;
		}
		div{
			text-indent:30px;
		}
		span{
			text-decoration: underline;
			text-transform:capitalize;
			letter-spacing:3px;
			word-spacing:8px;
		}
		h3{
			width:300px;
			height:200px;
			background-color:#CCCCCC;
			white-space:nowrap;
			overflow:hidden;
		}
	</style>
</head>
<body>
	<p>welcome to CSS!</p>
	<p>welcome to CSS!</p>
	<p>welcome to CSS!</p>
	<p>welcome to CSS!</p>
	<hr>

	<img src="../images/qq.jpg" alt="">
	HTML和CSS很简单
	<hr>

	<div>&npsp;&nbsp;&npsp;&nbsp;welcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to css</div>
	<div>welcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to css</div>
	<hr>
	<span>hello word!</span>
	<hr>

	<h3>welcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to csswelcome to css</h3>
	
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HjXBhWE-1586255360834)(.\images\案例9.png)]

DAY2

案例1 01.背景属性.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/* 	div{
			color:red;
			background-color:#cccccc 
			background-color:transparent;
			background-image:url(../images/heihei.gif);
			background-repeat:no-repeat;
			background-position:right top;
			height:1000px;
			background-attachment:fixed; 
			background:red url(../../images/heihei.gif)repeat-x 50px  100px; 
		}  */
		/* .cart{ 
			width:30px;
			height:30px;
			background-color:CCC;
			background-image:url(../../images/icon.gif);
			background-color:transparent;
			background-position:-160px -30px;
		} */
	</style>
	<link rel="stylesheet" herf="css/style.css">
</head>
<body>
	<div>
		<p>welcome to CSSwelcome to CSSwelcome to CSS</p>
		<p>welcome to CSSwelcome to CSSwelcome to CSS</p>
		<p>welcome to CSSwelcome to CSSwelcome to CSS</p>
		<p>welcome to: CSSwelcome to CSSwelcome to CSS</p>
	</div>
	<hr>

	<p class="cart"></p>
	购物车
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i2LMUjWM-1586255360835)(.\images\day2\案例1.png)]

div{
	color:red;
	/* background-color:#cccccc */
	/* background-color:transparent; */
	/*background-image:url(../../images/heihei.gif);
	background-repeat:no-repeat;
	background-position:center;*/
	background:red url(../../images/qq.jpg) repeat-x 30px 100px;
} 
.cart{
	width:30px;
	height:30px;
	background-color:#CCC;
	background-image:url(../../images/icon.gif);
	background-color:transparent;
	background-position:-160px -30px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pAwkOalt-1586255360836)(.\images\day2\案例1.1.png)]

案例2 02.列表属性.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* li{
			list-style-type:disc;
		} */
		.first{
			list-style-type:decimal;
		}
		.second{
			/* list-style-type:square; */
			list-style-image:url(../../images/male.gif);
		}
		.third{
			list-style-type:circle;
			list-style-position:inside;
		}
		.forth{
			list-style:square url(../../images/female.gif) inside; 
			list-style:none;
		}
		.nav{
			list-style:none;
			/* float:left; */
		}
		.nav li{
			list-style:none;
			float:left;
			width:50px;
		}
	</style>
</head>
<body>
	<ul>
		<li class="first">hello</li>
		<li class="second">hello</li>
		<li class="third">hello</li>
		<li class="forth">hello</li>
		
	</ul>
	<hr>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HYK1EcTu-1586255360836)(.\images\day2\案例2.png)]

案例3 03.表格属性.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	table{
		width:500px;
		border:1px solid red;
		border-collapse:separate;
		}
		td{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<!-- table>(tr>td{td$}*4)*5 -->
	<table cellpadding="0" cellspacing="0" >
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
		</tr>
	</table>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TFoG6CPv-1586255360837)(.\images\day2\案例3.png)]

案例4 04.盒子模型.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			width:250px;
			background:#ccc;
		}
		.first{
			/* border-top-color:red;
			border-top-width:1px;
			border-top-style:solid;
			border-right-color:blue;
			border-right-width:2px;
			border-right-style: dashed;
			border-bottom-color:green;
			border-bottom-width:4px; */
			/* border-top:1px  solid  red ;
			border-bottom:2px dashed blue; */
			/* border-color:red yellow blue green;
			border-width:1px 2px 4px 6px;
			border-style:solid dashed dotted double; */
			border:1px dotted red ;
		}
		.second{
				/* padding-top:15px;
				padding-left:10px;
				padding-bottom:20px;
				padding-right:30px; */
				/* padding:1px 2px 6px 4px; */
				
				padding:5px;
			}
	</style>
</head>
<body>
	<p class="first">welcome to html</p>
	<p class="second">welcome to css</p>
	<p class="third">welcome to java</p>
</body>
</html>

right-width:2px;
border-right-style: dashed;
border-bottom-color:green;
border-bottom-width:4px; /
/ border-top:1px solid red ;
border-bottom:2px dashed blue; /
/ border-color:red yellow blue green;
border-width:1px 2px 4px 6px;
border-style:solid dashed dotted double; /
border:1px dotted red ;
}
.second{
/ padding-top:15px;
padding-left:10px;
padding-bottom:20px;
padding-right:30px; /
/ padding:1px 2px 6px 4px; */

			padding:5px;
		}
</style>

welcome to html

welcome to css

welcome to java

```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rytlCQeI-1586255360837)(.\images\day2\案例4.png)]

Ao622
关注
htm+css案例之活动通知
qq_43696174的博客
04-07 1311
<head> <meta charset="UTF-8"> <title></title> <link href="css/normalize.css"> <style> @font-face { font-family: 'FZj'; src: url('css/FZJZJW.ttf'); } .body { width: 1400px; height: 650px; ..
CSS案例3
02-14
CSS案例3
HTML+CSS之CSS案例大全
weixin_62575733的博客
05-07 1095
CSS 1.体验css语法规范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
HTML+CSS案例大全之HTML
weixin_62575733的博客
05-07 1235
作者本人做的笔记，大家偶尔可以复习一下。
27 个 CSS 案例演示和 DEMO
前端开发博客
10-16 1万+
大家好，我是 漫步，在写CSS一些案例时，我们经常会遇到熟悉的场景，如果能够直接套用DEMO，那样子就会快很多了，来看看下文。本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
css案例1——一级菜单、二级菜单、三级菜单、四级菜单
努力、拼搏、奋进
05-17 9607
纯css实现二级菜单、三级菜单、四级菜单，代码易理解，上手操作快。
好看的css样式案例网站
jieyucx的博客
11-28 1135
比如说我们要这个案例的代码点击get code就可以了右侧有完整的示例代码。
css案例（一）遮罩层
xtcbql的博客
10-01 1899
css案例：遮罩层
【前端技术】HTML与CSS案例分析：探索网页设计的无限可能
软件测试知识输出
05-11 1208
本文将通过三个有趣的HTML与CSS效果案例，深入分析其实现原理和技术细节，让读者能够更直观地了解HTML与CSS的强大功能，并从中获得学习和启发。随着技术的不断发展，HTML与CSS的功能也将越来越强大，未来的网页设计将更加丰富多彩、互动性强。作为网页设计师和开发者，我们应该不断学习和探索HTML与CSS的新技术和新特性，为用户带来更好的网页体验。动态悬停效果是一种常见的网页交互效果，当用户将鼠标悬停在某个元素上时，该元素会发生一些动态变化，如放大、变色或旋转等。规则，它用于定义动画在不同时间点的样式。
HTML+CSS项目案例
qq_52108058的博客
11-30 4087
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
学成在线首页 CSS案例
07-26
【CSS案例解析】 在"学成在线首页 CSS案例"中，我们主要探讨的是如何利用CSS（层叠样式表）技术来美化和布局一个网站的首页。CSS是网页设计中的核心部分，它允许我们将表现（样式）与内容（HTML）分离，使页面结构...
个人网页html+css案例.rar
04-07
【个人网页html+css案例.rar】是一个压缩包文件，包含了创建简单个人主页的HTML和CSS代码，以及相关的素材图片。这个资源特别适用于教学演示、学习练习，或是作为学生考试项目的基础素材。对于初学者来说，这是一个...
CSS.rar_CSS案例_ｗｅｂ
09-14
这份名为"CSS.rar"的压缩包文件包含了丰富的WEB开发资料，特别是关于CSS的案例，旨在帮助开发者深入学习和实践CSS。 首先，让我们来探讨一下CSS的基础知识。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、...
经典CSS案例_前端开发_实战案例-炉石传说官方网站纯CSS.rar
10-28
在“经典CSS案例”中，我们看到了如何使用CSS伪类如`:hover`来响应鼠标的滑过事件。`:hover`伪类在鼠标指针位于元素上方时触发，可以用来改变元素的样式，例如更改背景色、边框或者添加动画效果，为用户带来更丰富的...
【前端基础】CSS进阶
qq_41413652的博客
11-01 899
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
前端学习Day10 CSS盒子属性（附练习版）
最新发布
As977_的博客
11-02 503
medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。⚠️：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute。在web页面中，“盒子”的结构包括厚度、边距、填充等元素，引申到CSS中，就是border、margin和padding。对于任何盒子，都可以分别设定4条边的padding、border和maegin，实现各种各样的排版效果。length 由浮点数字和单位标识符组成的长度值，不允许负值。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 789
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS例子: 横向排列的格子
11-01 382
【代码】CSS例子: 横向排列的格子。
WEB开发CSS案例集锦与详细介绍
资源摘要信息:"本资源为WEB开发的学习资料，主题涵盖了CSS相关的案例展示与解析。文件包含具体的web页面设计实例，详细解释了CSS（Cascading Style Sheets，层叠样式表）在网页设计中的应用。该资源通过实例演示如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值