Web-day08-CSS+JS

最新推荐文章于 2024-07-16 17:18:30 发布

奈斯。-

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量94

点赞数

分类专栏：第二阶段文章标签： css js

本文链接：https://blog.csdn.net/weixin_58678891/article/details/118555174

版权

第二阶段专栏收录该内容

17 篇文章 2 订阅

订阅专栏

模拟服务器解析浏览器发来的数据

package cn.tedu.test3;

import java.util.Arrays;

//模拟 服务器解析浏览器发来的数据----springmvc框架
//http://127.0.0.1:8848/cgb2105/html4.html? username=1&pwd=2&repwd=2&nick=3&mail=4%401.cn&sex=0&like=1&like=2&city=2&head=&code=brpn
public class Test1 {
    public static void main(String[] args) {
        String a = "http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2&nick=3&mail=4%401.cn&sex=0&like=1&like=2&city=2&head= &code=brpn";
        String[] a1 = a.split("\\?")[1].split("&");
        //        1，按照？切割字符串，得到a数组
//        2,重点解析数组里的第二部分a[1]   user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
//        3,按照&切割字符串，得到b数组

        //System.out.println(Arrays.toString(a1));

        for(String str: a1){
            //        5,再按照=切 [user,1]   [age,2]
            String s = str.split("=")[1];
            System.out.println(s);
        }
        //jdbc入库
    }
}

CSS选择器
/*分组选择器：把多种选择器中的元素分成一组，统一设置样式 /
/ 属性选择器：根据标签的不同属性选择元素 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试css的高级选择器</title>
		<style type="text/css">
			/*分组选择器：把多种选择器中的元素分成一组，统一设置样式  */
			/* 属性选择器：根据标签的不同属性选择元素 */
			input[type ="button"]{
				background-color: brown;
			}
			.a ,div,#s1{
				font-size: 30px; color: darkblue;
			}
		</style>
	</head>
	<body>
		<div> 我是div1</div><!-- 加class标记 -->
		<div> 我是div2</div>
		<div class="a"> 我是div3</div>
		<span id = "s1"> hello</span>
		<span class = "a"> hello</span>
		<span> hello</span>
		
		<input type = "button" value="重置" >
		<input type = "button" value="重置" >
		<input class="a" type = "submit" value="提交">
	</body>
</html>

在这里插入图片描述
HTML和CSS综合练习

	<head>
		<meta charset="utf-8">
		<title>学生信息管理系统MIS</title>
			<!-- link连接外部文件
			rel 固定写法，指定的文件类型，href 指定文件路径 -->
			<link rel = "stylesheet" href ="t.css"/>
	</head>

CSS提取到同目录下，新建"t.css"

			.a{
				width:200px;
				height: 30px;
			}
			input[type ="text"]{
				height: 30px;
			}
			input[type ="password"]{
				height: 30px;
			}
			input[type ="button"]{
				background-color: fuchsia;
				color: #FFF8DC;
			}
			input[type ="submit"]{
				height:25px ;
				width: 45px;
				background-color: #1E90FF;
				border: 2px solid #FF8C00 ;
				color: #FFF8DC;
			}

css的盒子模型

css把网页中的每个元素看做是一个盒子。
margin：外边距，是指盒子和盒子之间的距离
padding：内边距，是盒子里的内容和边距的距离
width/height：内容的宽度.高度
border：边框
在这里插入图片描述
练习图片利用css和html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
					<!-- link连接外部文件
					rel 固定写法，指定的文件类型，href 指定文件路径 -->
		<link rel = "stylesheet" href ="jingdong.css" />
	<body><!--method指定数据提交方式 ，action ="#指定提交路径" -->
		<form method="post" action ="#指定路径" >
			<table>
				<tr>
					<td><h2 align="center">用户注册</h2></td>
				</tr>
				<tr>
					<td><input type ="text" placeholder="用户名" name="name" class="a"/></td>
				</tr>
				<tr>
					<td class="b">支持中文、字母，“+”，“—”的组合</td>
				</tr>
				<tr>
					<td><input type="password" placeholder="设置密码" name="pwd" class="a"/></td>
				</tr>
				<tr>
					<td class="b">建议使用数字、字母和符号两种以上的组合</td>
				</tr>
				<tr>
					<td><input type="password" placeholder="确认密码" name="repwd" class="a"/></td>
				</tr>
				<tr>
					<td class="b">两次密码</td>
				</tr>
				<tr>
					<td><input type="text" placeholder="验证手机" name="jym" class="a"/></td>
				</tr>
					<td id="m"><input type="checkbox"/>我已阅读并同意 
					<a href = "https://www.baidu.com" target = "_blank" >《京东用户注册协议》</a></td>
				</tr>
				<tr>
					<td><input type ="submit" value="立即注册"  name="name"/></td>
				</tr>
			</table>
		</form>
	</body>
</html>

CSS代码

/* 输入框 */
.a{/* class选择器 */
	width: 300px;
	height: 30px;
	padding: 10px;/* 内边距 */
	margin: 10px;/* 外边距 */
	font-size: 20px;
}
.b{/* class选择器 */
	font-size: 10px;/* 字体大小 */
	color: gainsboro;
	padding-left: 25px;/* 左边距 */
}
#m{/* id选择器 */
	padding-left:25px ;
}
input[type="submit"]{
	background-color: darkred;
	color: white;
	
	height:40px;
	width: 320px;
	font-size: 20px;
	margin-left: 10px;
	margin-top: 10px;
	/* border: 1px solid red ; */
}

JS动态网页

javascript
静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。
网页和后端交互
在这里插入图片描述
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。
特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

测试
onclick是单击
ondblclick是双击
onmouseenter鼠标进入
onmouseleave鼠标划出

		alert弹出框      
		prompt输入框      
		confirm确认框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* js是弱类型的语言， 没有严格意义上的数据类型，包括：number string boolean
			null unidefid*/
			var a=25
			alert(a%10);//取余 5
			alert(a/10);//除法2.5
			//++  --
			var h=10;
			alert(++h);
			h=h++;
			alert(h)//+
			//==  ===
			alert(1>0?a:h)
			var s="sfs"
			s=10-0.3;
			s=9.6-3.6
			s="er"+"zi"+"大儿子"
			alert(s);
			function  fn(){//调取fn（）,才会触发
				alert(100);
/* 				confirm();
				prompt("请输入年龄：") */
				}
			//变量交换
			var d=2;
			var e="edaw";
			var t;
			t=d;
			d=e;
			e=t;
			alert(d+e)
		</script>
	</head>
	<body>
		<!-- js就想让网页动起来 写法1:行内js -->
		<!-- js是基于对象的事件驱动的驱动的脚本语言
		 事件驱动是指：给网页的不同元素，添加了各种触发方式-->
		<a href = "#" οnclick= "alert(10)" >单击单匡</a>
		<a href = "#" οnclick= "fn()" >单击单匡</a>
		<a href = "#" οnclick= "prompt()" >单击输入框</a>
		<a href = "#" οnclick= "confirm()" >单击确认框</a>
		<a href = "#" οndblclick= "alert(10)" >双击弹框</a>
<!-- 		<a href = "#" οnmοuseenter= "alert(10)" >鼠标划入弹框</a>
		<a href = "#" οnmοuseleave= "alert(10)" >鼠标划出弹框</a> -->
	
	</body>
</html>

奈斯。-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web-day08-CSS+JS

模拟服务器解析浏览器发来的数据package cn.tedu.test3;import java.util.Arrays;//模拟服务器解析浏览器发来的数据----springmvc框架//http://127.0.0.1:8848/cgb2105/html4.html? username=1&pwd=2&repwd=2&nick=3&mail=4%401.cn&sex=0&like=1&like=2&city=2&h
复制链接

扫一扫