学习PHP第二天HELLO HTML

PHP学习0~60 专栏收录该内容
4 篇文章 0 订阅

一、复习

1.DOCTYPE 标签

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的
文档类型定义DTD)来解析文档。

2. CSS 选择器 

<style>

    div{

    }

</style>

3. id 选择器

    #idName{

    }

    <div id="idName"></div>

4. 类选择器

   .className{

    }

    <div id="idName"></div>


二、内联 与 块

div 独占一行

属性设置

display: none;

display: block;


绿水字体格式,内联,行内,块控制

<!-- 2003内联——行内——块状.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		div{
			margin: auto;
		}


		/* 绿水字体控制,内联,块,字体格式 */
		#yonge{
			width: 200px;
			height: 200px;

			border: 1px solid gray;
			float: left;
		}

		#lvshui{
			color: green;
			text-shadow: 1px 1px 1px red;
		}

		#yonge1{
			width: 200px;
			height: 200px;

			border: 1px solid gray;
			float: left;
		}

		#lvshui1{
			color: green;
			text-shadow: 1px 1px 1px red;

			display: block;
			width: 20px;
			height: 20px;
			border: 1px solid red;
		}

		#yonge2{
			width: 200px;
			height: 200px;

			border: 1px solid gray;
			float: left;
		}

		#lvshui2{
			font-size: 40px;
			color: green;
			text-shadow: 1px 1px 1px red;
			border: 1px solid red;
		}

	</style>
</head>
<body>

<div id="yonge">
	鹅鹅鹅<br>
	曲项向天歌<br>
	白毛浮<span id="lvshui">绿水</span><br>
	红掌拨清波<br>
</div>

<div id="yonge1">
	鹅鹅鹅<br>
	曲项向天歌<br>
	白毛浮<span id="lvshui1">绿水</span><br>
	红掌拨清波<br>
</div>
<div id="yonge2">
	鹅鹅鹅<br>
	曲项向天歌<br>
	白毛浮<span id="lvshui2">绿水</span><br>
	红掌拨清波<br>
</div>

</body>
</html>

<!-- /* div 独占一行 */ -->
<!--

	块状:block
	行内:inline





 -->

效果图:


三、 border-radius边框圆角画太极图

这是操作练习

<!-- 2001画太极图.html -->


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2001画太极图</title>

	<style type="text/css">

		div{
			float: left;
		}

		#TaiJiTu{
			width: 100px;
			height: 100px;
			border: 2px solid blue;

			border-radius: 50px 40px 50px 30px;
		}


		#t0{
			width: 100px;
			height: 100px;
			background: white;

			border: 100px solid black;
			border-radius: 150px;
		}

		#t1{
			width: 100px;
			height: 100px;
			background: black;
			border: 1px solid white;
			border-radius: 150px;
		}

		#t2{
			width: 300px;
			height: 600px;

			border: 1px solid black;
			border-left: 300px solid black;

			border-radius: 300px;

			clear: left;
		}

		#t3{
			width: 300px;
			height: 600px;

			border: 1px solid black;
			border-left: 300px solid black;

			border-radius: 300px;
		}


		#t3::before{
			content: '';
			display: block;

			width: 100px;
			height: 100px;
			background: white;

			border: 100px solid black;
			border-radius: 150px;

			margin-left: -150px;
		}


		#t3::after{
			content: '';
			display: block;

			width: 100px;
			height: 100px;
			background: black;

			border: 100px solid white;
			border-radius: 150px;

			margin-left: -150px;
		}

	</style>

</head>
<body>
	<div id="TaiJiTu"></div>
	<div id="t0"></div>
	<div id="t1"></div>
	<div id="t2"></div>
	<div id="t3"></div>
</body>
</html>

效果图:


四、相对定位和绝对定位

1. 相对定位:相对自己移动,不影响其他元素

2. 绝对定位:相对父元素的位置,相对其他元素最后加载,重叠放置

3. position: static;
    position: relative; 相对定位
     position: absolute; 绝对定位
     position: fixed;


<!-- 2002相对定位和绝对定位.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2002相对定位和绝对定位.html</title>

	<style type="text/css">
		div{
			width: 300px;
			height: 100px;
		}

		#t1{
			background: red;

			/*margin-top: 50px;*/

			position: relative;
			top: 50px;
			left: 100px;
			/* 相对定位:相对自己移动,不影响其他元素 */
			/*
			position: static;
			position: relative; 相对定位
			position: absolute; 绝对定位
			position: fixed;
			*/

			border: 1px solid blue;
		}

		#t2{
			background: pink;
		}

		#t3{
			background: blue;
		}


		#common{
			width: 600px;
			height: 500px;
			background: orange;
		}

		#t11{
			background: red;

			position: absolute;/* 绝对定位:相对父元素的位置,相对其他元素最后加载,重叠放置 */
			top: 450px;
			left: 30px;
			z-index: 1;/* 层叠层次,数字越大,越在上层 */


			border: 1px solid blue;
		}

		#t22{
			background: pink;

			position: absolute;
			top: 470px;
			left: 50px;

			border: 1px solid black;
		}

		#t33{
			background: blue;
			position: absolute;
			top: 490px;
			left: 70px;

			border: 1px solid yellow;
		}
	</style>

</head>
<body>
	<h3>相对定位</h2><hr>
	<div id="t1"></div>
	<div id="t2"></div>
	<div id="t3"></div>
	<h3>绝对定位</h3><hr>
	<div id="common"></div>
	<div id="t11">01绝对定位:通过改变 z-index:1 提高了层叠层次。比默认的都高!</div>
	<div id="t22">02绝对定位</div>
	<div id="t33">03绝对定位</div>
</body>
</html>

           

效果图:



每日总结:

1.应该早点睡觉,白天困一点没有效率,还不如早点睡养好明天的精神

2.实际进度和自己预想的相差太多,调整一下

3.死磕,从容。


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值