学习PHP第二天HELLO HTML

最新推荐文章于 2024-08-03 23:03:36 发布
最新推荐文章于 2024-08-03 23:03:36 发布
阅读量306 收藏
点赞数
分类专栏： PHP学习0~60 文章标签： PHP html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuyu391/article/details/55057687
版权

一、复习

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.死磕，从容。


asktang_yu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php学习教程——十天学会php
01-09
**第二天：PHP基本语法** - 变量的声明与使用 - 数据类型：字符串、整型、浮点型、布尔型、数组、对象等 - 运算符：算术、比较、逻辑、位运算符 - 控制流程：条件语句（if, if...else, switch）、循环（for, while, ...
通过该内容的学习，十天即可学会PHP
02-02
第二天：PHP变量和数据类型 1. 变量：学习如何声明和使用PHP变量，理解其弱类型特性。 2. 数据类型：了解PHP支持的基本数据类型，如整型、浮点型、字符串、布尔型、数组和NULL。 第三天：流程控制 1. 条件语句：...
十天学会PHP教程
02-14
第二天：变量与数据类型 - 变量：学习如何声明和使用变量，了解PHP的变量命名规则。 - 数据类型：包括整型、浮点型、字符串、布尔型、数组和NULL，理解它们的特性和用法。 第三天：运算符与控制结构 - 运算符：学习...
学会 PHP 十天教程
10-15
### 第二天：PHP基本语法 第二天将深入学习PHP的基本语法，包括变量的声明、数据类型（如字符串、整型、浮点型、布尔型、数组和NULL）以及操作符（算术、比较、逻辑等）。此外，还会介绍流程控制结构，如条件语句...
php基础语法知识笔记
05-20
#### 第二天课程内容 **1. PHP变量类型** PHP支持七种基本变量类型： - 整型（integer） - 浮点型（float/double） - 字符串（string） - 布尔型（boolean） - 数组（array） - 对象（object） - 空...
【网页前端设计HTML】超链接
weixin_53597021的博客
08-03 662
超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。
HTML 专业词汇与语法规则
m0_74012211的博客
08-03 167
HTML 专业词汇与语法规则
【Dash】使用 HTML 和 CSS 创建图表
u010528690的博客
08-03 744
【代码】【Dash】使用 HTML 和 CSS 创建图表。
4个自定义倒计时
lulei5153的博客
08-03 151
【代码】4个自定义倒计时。
【Dash】HTML 和 CSS 的作用
u010528690的博客
08-03 723
超文本标记语音，提供一套标签（组件），用于定义网页上的内容结构和意义。例如标签表示一个段落， 到 表示不同级别的标题。
Web开发-html篇-上
Broken_x的博客
08-03 539
html基础篇上
前端 HTML 概述
m0_74012211的博客
08-03 125
前端 HTML 概述
HTML 基础结构
m0_74012211的博客
08-03 257
HTML 基础结构
敦煌文化主题页面 HTML,CSS,Javascript 源码分享
m0_61603704的博客
08-03 222
项目亮点：加入了大量的CSS动画效果，以及JS交互效果，水平适合初学者以及大学生，包含登录注册页。使用技术：HTML，CSS，JavaScript。
【小技巧】CSS如何实现文字溢出显示省略号
qq_65034569的博客
08-03 124
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
纯css的loading效果
最新发布
m0_59508634的博客
08-03 182
但通过vuex存储变量，sass进行全局css定义也可以实现，但仅仅适用于小项目使用量不大的情况。但需要注意的是没有办法实现全局注册，因为直接定义一个标签的话在sass里面可能会出现一些问题。其实在日常生活中我们可以采用纯css的组件方式实现loading 的效果。项目的借用的话可以借助状态变量使用v-show来实现在需要的时候进行显示。元素被绝对定位在其父元素的中心，并且其内部的文本大小和对行间距（在之前的文章里面实现loading组件的封装。）是响应式的，基于视口宽度（），该伪元素通过CSS动画（
css中使用data中的变量
weixin_45580774的博客
08-03 119
一、定义变量 data() { return { myColor:"#2a9efb", }; }, 二、在templete中激活 <template> <div class="chat-message" :style="{'--myColor':myColor}"> 你好 </div> </template> 三、在css中使用 .chat-message { background: var(--myColor);
css实现文字根据条件渐变
m0_59508634的博客
08-03 164
body。
CSS 的工作原理
07-25 1335
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
一步一步学习iOS6编程：HelloWorld详解
"《iOS6中文(Hello World 第四版)》是一本由EntLib.com团队编写的教程，旨在引导初学者逐步学习iOS6编程。书中以‘Hello, World!’为起点，通过实际操作和解释，帮助读者掌握iOS应用开发的基础。EntLib.com团队同时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值