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>