Web开发基础学习笔记整理（9）

最新推荐文章于 2024-04-03 16:37:19 发布

Mo*◑

最新推荐文章于 2024-04-03 16:37:19 发布

阅读量234

点赞数 1

分类专栏： # Web开发基础文章标签： css js html javascript 列表

本文链接：https://blog.csdn.net/qq_44458489/article/details/105115085

版权

Web开发基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS中的伪样式

其它标记可以使用的伪样式：
其它标记:hover{ } 鼠标悬停状态的伪样式
其它标记:active{ } 鼠标正被点击状态的伪样式

CSS中对列表样式的修改

1）去掉列表项中前缀符号 list-style:none;
2）替换列表项中前缀符号 – 伪样式写法

  li:before{
      content:”内容”;    给列表项替换的新前缀符号
  }

3）在列表项后面加符号 – 伪样式

  li:after{
      content:”内容”;
  }

JavaScript

什么是JavaScript?

JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法。（变量、运算符、分支结构、循环结构、数组…）
一种网页编程技术，一般用来向HTML页面添加交互行为。

JavaScript的写法

1）事件定义方法（内联方法） == CSS中的内联样式类似
在定义事件的时候直接写入JS代码

  <input  onclick=”alert(‘hello’);”/>

2）嵌入式写法 == CSS中内部写法类似
将js代码写在<script>标记中，<script>标记写在<head>标记中
3）文件调用式写法 == CSS中的外部写法类似
①将js代码写在一个文件中，该文件必须以.js结尾；
②在HTML页面中，使用<script>标记引入.js结尾的文件。

代码部分：

part1：

<html>
	<head>
		<title>其他标记伪样式</title>
		<!-- 内部样式的写法 -->
		<style>
			div{
				width:100px;
				height:100px;
				background-color:gray;
			}
			/* 当鼠标悬停在div区域上 */
			div:hover{
				background-color:red;
			}
			/* 鼠标再div区域上点击鼠标 */
			div:active{
				width:50px;
				height:50px;
				background-color:blue;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果图：

初始状态：

在这里插入图片描述

鼠标悬停：

在这里插入图片描述

鼠标点击：

在这里插入图片描述

part2：

<html>
	<head>
		<title>列表样式</title>
		<!-- 内部样式写法 -->
		<style>
			li{
				list-style:none; /* 取消列表项的前缀符号 */
			}
			/* 在列表项的前面替换新的前缀符号 */
			li:before{
				content:"#";
				color:red;
			}
			/* 在列表项后面加符号 */
			li:after{
				content:"$";
				color:blue;
			}
		</style>
	</head>
	<body>
		<!-- 有序列表 ol + li -->
		<ol>
			<li>星期一</li>
			<li>星期二</li>
			<li>星期三</li>
			<li>星期四</li>
		</ol>
	</body>
</html>

效果图：

在这里插入图片描述

part3：

<html>
	<head>
		<title>js事件定义方式（内联方式）</title>
	</head>
	<body>
		<!-- 普通按钮 +js代码onclick -->
		<input type="button" name="btn" value="点我" onclick="alert('hello');"/>
	</body>
</html>

效果图：

在这里插入图片描述

part4：

<html>
	<head>
		<title>js嵌入式写法</title>
		<!-- scipt标记用于写js代码 -->
		<script>
			function test(){
				alert("hello");
			}
			function f1(){
				alert("你好");
			}
		</script>
	</head>
	<body>
		<input type="button" name="btn" value="点我" onclick="f1()"/>
	</body>
</html>

效果图：

在这里插入图片描述

part5：

function m1(){
	alert("今天是星期四");
}
function m2(){
	alert("今天是3月26日");
}
function m3(){
	alert("今天天气阴天");
}

<html>
	<head>
		<title>js文件调用式写法</title>
		<!-- 引入外部以.js结尾的文件 -->
		<script src="mytest.js"></script>
	</head>
	<body>
		<input type="button" name="btn" value="点你" onclick="m1()"/>
	</body>
</html>

效果图：

在这里插入图片描述

若想了解更多可点击本处

Mo*◑

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web开发基础学习笔记整理（9）

CSS中的伪样式其它标记可以使用的伪样式：其它标记:hover{ } 鼠标悬停状态的伪样式其它标记:active{ } 鼠标正被点击状态的伪样式CSS中对列表样式的修改1）去掉列表项中前缀符号 list-style:none;2）替换列表项中前缀符号 – 伪样式写法 li:before{ content:”内容”; 给列表项替换的新前...
复制链接

扫一扫

专栏目录