CSS案例

最新推荐文章于 2024-08-29 14:32:34 发布

Ao622

最新推荐文章于 2024-08-29 14:32:34 发布

阅读量225

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ho622/article/details/105664770

版权

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-9JS7XhWS-1587465067039)(.\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-4JrCbbh0-1587465067041)(.\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-NR1wvDCx-1587465067042)(.\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-kp7Rgyjf-1587465067042)(.\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-zgw3sH4K-1587465067043)(.\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-OcUsWdBC-1587465067043)(.\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-P9vBIJnD-1587465067044)(.\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-IvWfFF9t-1587465067045)(.\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-V5A0JtnH-1587465067046)(.\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-HvFTUzJ3-1587465067046)(.\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-moK3ahIz-1587465067046)(.\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-S8N9AS1u-1587465067047)(.\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-U8FuyKQn-1587465067048)(.\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>

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

案例5 05.盒子属性的默认值.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    /* body默认margin不为0 */
		boday{
			margin:0;
			padding:0;
		}
		/* p默认margin不为0 */
		p{
			margin:0;
		}
	    /* ul默认margin不为0 */
		ul{
			list-style:none;
			margin:0;
			padding:0;
		}
		body,ul,ol,dl,li,p,h1,h2,h3,h4,form{
			margin:0;
			padding:0;
		}
	</style>
</head>
<body>
	welcome to css
	<p>hello world</p>
	<ul>
		<li>hello1</li>
		<li>hello2</li>
		<li>hello3</li>
	</ul>
</body>
</html>

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

案例6 06.外边距的合并.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width:50px;
		height:50px;
		background:#ccc;
	}
	.div1{
		margin-bottom:20px;
	}
	.div2{
		margin-top:30px;
	}
	.div3{
		width:100px;
		height:100px;
		background: blue;
		margin-top:20px;
		/* border:1px soild red; */
	}
	.div4{
		margin-top:10px;
	}
	p{
		margin:20px 0;
	}
	</style>
</head>
<body>
	<div class="div1">div1</div>
	<div class="div2">div2</div>
	<hr>

	<div class="div3">
		<div class="div4"></div>
	</div>
	<hr>

	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<p>p4</p>
	<p>p5</p>
	<p>p6</p>
	<p>p7</p>

</body>
</html>

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

案例7 07.定位方式.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#container{
		width:800px;
		border:1px solid #000;
		position:relative;
	}
	.div1,.div2,.div3,.div4{
		width:100px;
		height:50px;
	}
	.div1{
		background:red;
		/* 默认为station */
		/* position:static; */
		position:relative;
		top:20px;
		left:50px;
		z-index:-5;
	}
	.div2{
		background:blue;
		position:absolute;
		left:100px;
		bottom:50px;
		z-index:-8;
	}
	.div3{
		background:green;
		position:fixed;
		bottom:50px;
		left:100px;
	}
	.div4{
		background:cyan;

	}
	</style>
</head>
<body>
	<div id="container">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
		<div class="div4">div4</div>
	</div>
</body>
</html>

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

案例8 08.浮动和清除.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#container{
		/* width:800px; */
		border:1px solid #000;
	}
	.div1,.div2,.div3,.div4{
		width:300px;
		height:50px;
	}
	.div1{
		background:red;
		float:left;
	}
	.div2{
		background:blue;
		float:left;
		clear:left;
	}
	.div3{
		background:green;
		float:left;
	}
	.div4{
		background:cyan;
		float:left;

	}
	.clr{
		clear:both;
	}
	</style>
</head>
<body>
	<div id="container">
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		<div class="div3">div3</div>
		<div class="div4">div4</div>
		<div class="clr"></div>
	</div>
	wellcme to CSS
</body>

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

案例9 09.练习.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			margin:0;
			padding:0;
		}
		#container{
			width:960px;
			margin:0 auto;
			border:2px solid #0f0;

		}
		.div1,.div2,.div3,.div4{
			width:200px;
			height:180px;
			float:left;
			margin:5px;
			border:5px outset #ff7300;
			padding:10px;
		}
		#container img{
			width:100%;
			height:100%;
		}
		#container .clr{
			clear:both;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="div1"><img src="../../images/adv1.jpg" alt=""> </div>
		<div class="div2"><img src="../../images/adv2.jpg" alt=""> </div>
		<div class="div3"><img src="../../images/adv3.jpg" alt=""> </div>
		<div class="div4"><img src="../../images/adv4.jpg" alt=""> </div>
		<div class="clr"></div>
	</div>
	<p>welcome to CSS</p>javascript
</body>
</html>

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

DAY3

案例1 01.元素的显示和隐藏.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.div1{
			width:100px;
			height:100px;
			background:blue;
			/* display:none; */
			display:inline;
		}
		span{
			width:100px;
			height:100px;
			background:yellow;
			/* display:block; */
			/* 将行级元素转换为块级元素进行显示，独占一行进行显示 */
			/* 我想对行级元素设置宽和高，但我还想让行级不要独占一行 */
			/* 方法1：设置浮动； */
			/* float:left; */
			/* 方法2：display:inline-block */
			display:inline-block;
		}
		i{
			display:inline-block;
			width:100px;
			height:100px;
			background:red;
		}
		p{
			width:50px;
			height:50px;
			background:red;
		}
		.p1{
			/* display:none; */
			visibility:hidden;
		}
		#login{
			display:inline-block;
			width:100px;
			text-decoration: none;
			background:rgb(255, 0, 0.7);
			color:#fff;
			text-align:center;
			border-radius:8px;

		}
		#login:hover{
			background:rgb(255, 0, 0.5);
		}
	</style>
</head>
<body>
	<div class="div1">div1</div>
	<span>span1</span>
	<i>哈哈</i>
	<hr>

	<p class="p1">p1</p>
	<p class="p2">p2</p>
	<hr>
	<a href="javascript:alert('哈哈哈')" id="login">登&nbsp;&nbsp;&nbsp;&nbsp;陆</a>
</body>
</html>

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

案例2 02.轮廓属性.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	span{
		border:2px solid red;
		/* outline-width:4px;
		outline-color:blue;
		outline-style:dashed; */
		outline:4px green dashed;
	}
	.usrname{
		border:1px solid red;
		outline:none;/* 用户名文本框框不设置轮廓 */
		padding-left:3px;
		width:80px;
	}
	.email{
		border:0;
		outline:0;
		border-bottom:1px solid #000;

	}
	.submit{
		border:0;
		padding:5px;
		width:100px;
	}
	.mydiy{
		width: 100px;
		height: 50px;
	}
	.mydiv{
		width: 100px;
		height: 50px;
		background-color:#ccc;
		border:2px solid red;

	}
	</style>
</head>
<body>
	<span>welcome to css</span>
	<hr>
	用户名：<input type="text" class="usrname">
	<hr>
	<a href="#">CSS</a>
	<hr>

	邮箱：<input type="text" class="email">
	<input type="submit" value="提交" class="btnsubmit">
	<hr>

	<div class="mydiv">div</div>
</body>
</html>

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

案例3 03.其他相关.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			border:1px solid red;
			min-width:500px;
		}
		div{
			border:1px solid  blue;
			width: 300px;
			height: 80px;
			overflow:auto;
		}
		span{
			cursor:pointer;
		}heeloworld
	</style>
</head>
<body>
	<p>
		welcome to css welcome to css welcome to css welcome to css 
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
	</p>
	<hr>
	<div>
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
		welcome to css welcome to css welcome to css welcome to css
	</div>
	<hr>
	<span>光标的形状</span>
</body>
</html>

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

案例4 04.表格布局.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.hello{
		width:80%;
		border:1px solid #ccc;
		border-spacing:0;
		border-collapse:separate;
	}
	.hello th,.hello td{
		border:1px solid #ccc;
		padding:5px;
	}
	</style>
</head>
<body>
	<table class="hello" cellspacing="0">
		<thead>
			<tr>
				<th>th1</th>
				<th>th2</th>
				<th>th3</th>
				<th>th4</th>
			</tr>
		</thead>
		<tbody>
			<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>
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

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

案例5 05.简单布局1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style1.css">
</head>
<body>
	<div id="container">
		<header class="header">
			header
		</header>
		<article class="main">
			main
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

@charset "utf-8";
body{    
	padding:0;    
	margin:0; 
} 
#container{    
	width: 980px;  
	border:1px solid #ccc;  
	margin:0 auto; 
} 
#container .header{  
	width: 100%;   
	height: 80px;  
	background:red;
}
#container .main{
	  width: 100%;    
	  height: 600px;   
	  background:blue;   
	  /* margin-top:10px; */  
	  margin:10px 0; 
} 
#container .footer{   
	width: 100%;  
	height: 120px;  
	background:green;  
	/* margin-top:10px; */ 
}

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

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

案例6 06.简单布局2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style2.css">
</head>
<body>
	<div id="container">
		<header class="header">
			header
		</header>
		<article class="wrapper">
			<!-- <aside>
				left side
			</aside> -->
			<section class="main">
				main
			</section>
			<aside>
				right aside
			</aside>
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

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

@charset "utf-8";
body{
	padding:0;
	margin:0;
}
#container{
	width: 980px;
	border:1px solid red;
	margin:0 auto;
}
#container .header{
	width: 100%;
	height:80px;
	background:red;
}
#container .wrapper{
	width:100%;
	height:600px;
	background:blue;
	margin:10px 0;
}
#container .wrapper aside{
	background:pink;
	width: 200px;
	height: 400px;
	float:left;
}
#container .wrapper .main{
	background:cyan;
	width:770px;
	height:600px;
	float:left;
	/* margin:0 10px; */
	margin-right:10px;
}
#container .footer{
	width:100%;
	height:120px;
	background:green;
}

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

案例7 07.圣杯布局1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style3.css">
</head>
<body>
	<article id="wrapper">
			<section class="main">
				main
			</section>
			<aside class="left">
				left aside
			</aside> 
		
			<aside class="right">
				right aside
			</aside>
	</article>
</body>
</html>

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

@charset "utf-8";
/* 父容器
	1.溢出隐藏
	2.设置容器的内边距padding，用来空出位置放置左右两个侧边栏
 */
#wrapper{
	overflow:hidden; /* 超出部分隐藏 */
	/* 实现左侧边栏和右侧边栏 */
	padding:0 200px;  /* 左右分别空出200px用于放置左、右侧 */边栏
	min-width:300px;
	border:1px solid #ccc;
}
/*
	主体：
	1.宽度自适应
	2.设置浮动布局

 */ 

#wrapper .main{
	width:100%;
	height: 300px;
	background:green;
	float:left;
}

#wrapper aside{
	width: 190px;
	height: 300px;
	background:blue;
	float:left;
	position:relative;
}
#wrapper .left{
	margin-left:-100%;
	left:-200px;

}
#wrapper .right{
	margin-left:-190px;
	left:200px;
	right:-200px;
}

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

案例8 08.圣杯布局2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style4.css">
</head>
<body>
	<div id="container">
		<header class="header">
			header
		</header>
		<article class="wrapper">
			<section class="main">
				main
			</section>
			<aside class="left">
				left
			</aside>
			<aside class="right">
				right
			</aside>
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

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

@charset "utf-8";

body{
	margin:0;
	padding:0;

}
#container{
	margin:0 auto;
}
#container .header{
	width:100%;
	height:80px;
	background:red;
}
#container .wrapper{
	overflow:hidden;
	padding:0 200px;
	min-width:300px;
	margin:10px 0;
}
#container .main{
	width:100%;
	height:400px;
	background:blue;
	float:left;
}
#container aside{
	float:left;
	width:190px;
	height:300px;
	background:cyan;
	position:relative;
}
#container .left{
	margin-left:-100%;
	left:-200px;
}
#container .right{
	margin-left:-190px;
	left:200px;

}
#container .footer{
	width:100%;
	height:150px;
	background:green;
}

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

案例9 09.双飞翼布局.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style5.css">
</head>
<body>
	<div id="container">
		<header class="header">
			header
		</header>
		<article class="wrapper">
			<section class="main">
				<div class="main-wrapper">
					main
				</div>
			</section>
			<aside class="left">
				left aside
			</aside>
			<aside class="right">
				right aside
			</aside>
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

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

@charset "utf-8";
body{
	margin:0;
	padding:0;
}
#container{
	margin:0 auto;
}
#container .header{
	width:100%;
	height:80px;
	background:red;
}
#container .wrapper{
	overflow:hidden;
	min-width:300px;
	margin:10px 0;

}
#container .main{
	width:100%;
	float:left;
}
#container .main-wrapper{
	background:pink;
	height: 400px;
	margin:0 200px;
}
#container aside{
	float:left;
	width:190px;
	height:300px;
	background:cyan;

}
#container .left{
	margin-left:-100%;
}
#container .right{
	margin-right:-190px;
}
#container .footer{
	width: 100%;
	height: 150px;
	background:green;
}

float:left;
width:190px;
height:300px;
background:cyan;
position:relative;

}
#container .left{
margin-left:-100%;
left:-200px;
}
#container .right{
margin-left:-190px;
left:200px;

}
#container .footer{
width:100%;
height:150px;
background:green;
}


[外链图片转存中...(img-nkg0q95P-1587465067058)]

#### 案例9 09.双飞翼布局.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style5.css">
</head>
<body>
	<div id="container">
		<header class="header">
			header
		</header>
		<article class="wrapper">
			<section class="main">
				<div class="main-wrapper">
					main
				</div>
			</section>
			<aside class="left">
				left aside
			</aside>
			<aside class="right">
				right aside
			</aside>
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

[外链图片转存中…(img-SKDqwDNZ-1587465067059)]

@charset "utf-8";
body{
	margin:0;
	padding:0;
}
#container{
	margin:0 auto;
}
#container .header{
	width:100%;
	height:80px;
	background:red;
}
#container .wrapper{
	overflow:hidden;
	min-width:300px;
	margin:10px 0;

}
#container .main{
	width:100%;
	float:left;
}
#container .main-wrapper{
	background:pink;
	height: 400px;
	margin:0 200px;
}
#container aside{
	float:left;
	width:190px;
	height:300px;
	background:cyan;

}
#container .left{
	margin-left:-100%;
}
#container .right{
	margin-right:-190px;
}
#container .footer{
	width: 100%;
	height: 150px;
	background:green;
}

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

Ao622

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS案例

DAY1案例1 01.CSS的语法.html<!DOCTYPE html><html><head> <meta charset ="utf-8"> <title>Doucment</title> <style> p{ color:red; } h2{ ...
复制链接

扫一扫