0
点赞
收藏
分享

微信扫一扫

css第三天学习代码

JamFF 2022-04-01 阅读 62
css3

文章目录

1.盒子边框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			/*边框的宽度 实际开发中都是跟 px 单位*/
			/*border-width: 5px;*/
			/*实线的*/
			/*border-style: solid;*/
			/*虚线的  dashed  大师的 说话都很虚*/
			/*border-style: dashed;*/
			/*点线*/
			/*border-style: dotted;*/
			/*border-color: pink;*/
			/*边框的综合性写法*/
			/*边框粗细 边框 样式  边框颜色*/
			border: 5px dotted  pink;
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

2.分别指定边框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 400px;
			/*上边框写法*/
			border-top: 2px solid red;
			border-left: 1px solid green;
			border-right: 1px solid blue;
			border-bottom: 1px solid pink;
		}
		input {
			/*border-top: none;
			border-left: none;
			border-right: none;
			border-bottom: 1px dashed red;*/
			/*四个边框都去掉 先写大的，后写小的*/
			border: none;
			border-bottom: 1px dashed red;

		}
	</style>
</head>
<body>
	<div> </div>
	用户名: <input type="text" > <br>
	密码: <input type="text" >
</body>
</html>

3.内边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内边距</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/*左内边距*/
			/*padding-left: 10px;
			padding-top: 30px;*/
			/*padding 简写 复合写法*/
			/*padding: 20px; 上下左右 都是 20 内边距*/
			/*padding: 10px 20px; 上下10  左右 20 内边距*/
			/*padding: 10px 20px 30px; 上 10  左右 20  下 30 内边距*/
			/*padding: 10px 20px 30px 40px;  上10 右 20  下 30 左 40 顺时针*/

		}
	</style>
</head>
<body>
	<div> 王者农药 </div>
</body>
</html>

4.课堂一练

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*1. 要求盒子有一个左边内边距是 5像素*/
		div {
			padding-left: 5px;
		}



		2. 要求简写的形式写出  一个盒子上下是 25像素   左右是15像素。

		div {
			padding: 25px 15px;
		}

		3. 要求简写的形式写出 一个盒子  上内边距是 12像素  下内边距是 0  左内边距是 25像素  右内边距是 10像素
		div {
			padding: 12px 10px 0 25px;
		}
		
	</style>
</head>
<body>
	
</body>
</html>

5.新浪导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新浪导航栏案例</title>
	<style>
	/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
		.nav {
			height: 41px;
			background-color: #FCFCFC;
			/*上边框*/
			border-top: 3px solid #FF8500;
			/*下边框*/
			border-bottom: 1px solid #EDEEF0;
		}
		.nav a {
			/*转换为行内块*/
			display: inline-block;
			height: 41px;
			line-height: 41px;
			color: #4C4C4C;
			/*代表 上下是 0  左右是 20 内边距*/
			padding: 0 20px;
			/*background-color: pink;*/
			text-decoration: none;
			font-size: 12px;
		}
		.nav a:hover {
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">博客</a>
		<a href="#">微博</a>
		<a href="#">关注我</a>
	</div>
</body>
</html>

6.计算盒子实际大小

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算盒子实际的大小</title>
	<style>
		div {
			width: 180px;
			height: 200px;
			background-color: pink;
			/*添加10px 内边距 左右 上下*/
			padding: 10px;
			/*盒子的实际大小 =  内容宽度 高度 +  内边距 +  边框*/
			      /*           =   200  +  20  +  0
			                 =   220  */
             /*解决的方法：
                内边距一定要给的， 我们只能改变 内容宽度 width 让他减去 多出来的内边距就可以了*/
                /*200 - 20  =  180 */
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

7.padding不会影响盒子大小的情况

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		p {	
			/*width: 200px;*/
			height: 30px;
			background-color: purple;
			padding-left: 30px;
			/*特殊情况， 如果这个盒子啊，没有宽度 则padding 不会撑开盒子*/
		}
	</style>
</head>
<body>
	<div> 
		<p>哒哒哒</p>
	</div>
</body>
</html>

8.margin外边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			padding: 20px;
			/*外边距*/
			/*margin-left: 100px;
			margin-top: 50px;*/
			margin: 100px 20px 0 10px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

9.块级盒子居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 600px;
			height: 400px;
			background-color: pink;
			/*让块级盒子居中对齐水平 1. 必须有宽度 2. 左右外边距设置为auto*/
			/*1. margin-left: auto;
			margin-right: auto;*/
			/*2. margin: auto;*/
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

10.文字居中和盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 600px;
			height: 300px;
			background-color: pink;
			/*块级盒子水平居中*/
			margin: 50px auto;
			/*盒子里面的文字 行内元素 、行内块居中对齐水平居中*/
			text-align: center;
		}
	</style>
</head>
<body>
	<div> 稳住 <strong>我们能赢</strong> <input type="text"> </div>
</body>
</html>

11.插入背景和插入图片的区别

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.pic,
		.bg {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			/*padding: 30px;*/
		}
		.pic img {
			margin: 30px;
		}
		.bg {
			background: url(images/3.jpg) no-repeat;
			background-position: 30px 30px;
			/*padding: 30px;*/
		}
	</style>
</head>
<body>
	<div class="pic">
		<img src="images/3.jpg" alt="">
	</div>
	<div class="bg">
		
	</div>
</body>
</html>

12.清除元素的默认内外间距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	  /*这是一个神奇的代码  我们以后写css 第一句话*/
	  * {
	  	margin: 0;
	  	padding: 0;
	  }
	  span {
	  	 margin: 30px;
	  }
	</style>
</head>
<body>
	一个问题
	<p>又是一个问题</p>
	<span>  行内元素 尽量只设置左右内外边距， 不要设置上下内外边距。</span>
</body>
</html>

13.外边距合并-上下外边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top,
		.bottom {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.top {
			margin-bottom: 100px;
		}
		.bottom {
			background-color: purple;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>

15.嵌套关系外边距合并

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top,
		.bottom {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.top {
			margin-bottom: 100px;
		}
		.bottom {
			background-color: purple;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>

16.圆角矩形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;

			/*border-radius: 100px;*/
			border-radius: 50%;
		}
		p {
			width: 100px;
			height: 20px;
			background-color: red;
			font-size: 12px;
			color: #fff;
			text-align: center;
			line-height: 20px;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<div> </div>
	<p> 特价 免费送 </p>
</body>
</html>

17.盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 50px auto;
			/*box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；*/
			box-shadow: 0 15px 30px rgba(0,0,0,.3);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

18.综合案例-新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表综合案例</title>
	<style>
	  /*这句话必须要写， 不要忘却了*/
		* {
			margin: 0;
			padding: 0;
		}
		/*取消列表样式*/
		li {
			list-style: none;
		}
	   .box {
	   		width: 298px;
	   		height: 198px;
	   		border: 1px solid #ccc;
	   		/*块级盒子水平居中*/
	   		margin: 100px auto;
	   		/*如果一个盒子给了一个padding值，会撑大盒子*/
	   		padding: 15px;
	   		background: url(images/line.jpg);
	   }
	   .box h2 {
	   	 	font-size: 18px;
	   	 	padding: 5px 0;
	   	 	/*底边框思密达*/
	   	 	border-bottom: 1px solid #ccc;
	   	 	margin-bottom: 10px;
	   }
	   .box ul li {
	   		height: 30px;
	   		line-height: 30px;
	   		/*background-color: pink;*/
	   		border-bottom: 1px dashed #ccc;
	   		background: url(images/arr.jpg) no-repeat 5px center;
	   		/*因为这个li 没有宽度 所以padding 不会撑开盒子*/
	   		padding-left: 20px;
	   		
	   }
	   .box ul li a {
	   		color: #333;
	   		font-size: 12px;
	   		text-decoration: none;
	   		/*margin-left: 20px;*/
	   		/*padding-left: 20px;*/
	   }
	   .box ul li a:hover {
	   		text-decoration: underline;
	   }
	</style>
</head>
<body>
	<div class="box">
		<!-- 标题盒子 -->
		<h2>最新文章/New Articles</h2>
	    <!-- 列表盒子 -->
	    <ul>
	    	<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
	    	<li><a href="#">体验javascript的魅力</a></li>
	    	<li><a href="#">jquery世界来临</a></li>
	    	<li><a href="#">网页设计师的梦想</a></li>
	    	<li><a href="#">jquery中的链式编程是什么</a></li>
	    </ul>
	</div>
</body>
</html>
举报

相关推荐

css学习的第三天

css3

第三天，接触CSS

csshtml前端

第三天学习

学习csshtml

学习第三天

倍增跑路货车运输对应原理相关速度编程语言

java学习第三天

java开发语言后端

Qt学习第三天

QPainterQPixmap文件操作读写文件C/C++编程语言yyds干货盘点

打卡学习第三天

c#

javaScript学习第三天

javascript

jQuery学习第三天

学习jqueryjavascript

寒假学习第三天

p2plinqc#
0 条评论