cgb2107-day08 旧城等待, 2021-09-11 03:36 282阅读 0赞 ### 文章目录 ### * * 一,模拟 服务器解析浏览器发来的数据 * 二,CSS选择器 * * \--1,概述 * \--2,简单选择器测试 * \--3,分组选择器 属性选择器 * 三,综合练习 * * \--0,盒子模型 * \--1,用户注册 * \--2,优化HTML / CSS,实现松耦合 * * 创建css文件 * 修改html文件 * 四,JavaScript * * \--1,概述 * \--2,入门案例 * \--3,测试 * 作业: * * \--1,利用HTML 和 CSS技术 完成制作小票 ## 一,模拟 服务器解析浏览器发来的数据 ## package cn.tedu.test2; public class TestUrl { public static void main(String[] args) { //1,接受用户发来的数据 String url = "http://127.0.0.1:8848/cgb2107/student.html?user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03"; //按照?切割字符串 String[] a = url.split("\\?"); //[http://127.0.0.1:8848/cgb2107/student.html, //user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03] //只获取数组里的第二部分 String data = a[1]; //继续切,用&切 String[] b = data.split("&"); //[user=jack,age=18,sex=1,hobby=1,hobby=2,hobby=3,xueli=2,day=2021-09-03] //循环b数组 for(String s : b){ //获取到每一组数据user=jack,age=18 String[] c = s.split("=");//把每组数据按照=切割 [age,18] String datas = c[1];//只取=后面的数据c[1] System.out.println(datas); } } } ## 二,CSS选择器 ## ### –1,概述 ### CSS提供的一种方式,可以方便的选中网页中的各种元素. 常用的选择器: 简单选择器(标签名,id,类) 分组选择器 属性选择器 ### –2,简单选择器测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 CSS的选择器</title> <style> /* 1.标签名选择器:按照标签的名字 选中元素 */ h1{ /* 给h1设置字的颜色 */ color: #00FFFF; } /* 2.类选择器:按照class属性的值 选中元素 先给元素加class属性 + 通过.获取class的值 */ .a{ /* 选中网页中class=a的元素 */ font-family: "黑体"; /* 字体 */ font-style: oblique; /* 字体倾斜 */ font-size: 30px; /* 字号 */ } .b{ /* 选中网页中class=b的元素 */ /* 文字阴影 水平阴影 垂直阴影 模糊程度 阴影颜色 */ text-shadow: 2px 2px 5px red; } /* 3. id选择器:按照id属性的值(唯一) 选中元素 先给元素加id属性 + 通过# 获取id的值 */ #div1{ opacity: 0.5;/* 设置不透明度,0~1,越小越透明 */ } </style> </head> <body> <div>我是div2</div> <div class="a">我是div3</div> <div id="div1">我是div4</div> <span>我是span1</span> <span class="b a">我是span2</span> <span>我是span3</span> <h1>我是h1</h1> <h1>我是h2</h1> <h1>我是h3</h1> </body> </html> ### –3,分组选择器 属性选择器 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS的 高级选择器</title> <style> /*1.分组选择器:选中一批元素分成一组,统一设置样式 */ div,span{ /* 把所有div和span设置字体颜色 */ color:red; /* 字的颜色 */ font-family: "微软雅黑"; /* 字体*/ font-size: 20px; /* 字号*/ background-color: #00FFFF; /* 背景色 */ } /* 2. 属性选择器: 通过标签的属性选中元素 */ a[href]{ /* 选中有href属性的a标签*/ color: #008000; /* 字的颜色*/ } /* 选中type=text的input设置背景色 */ input[type="text"]{ background-color: #008000; } .m{ color: red; } .n{ color: green; text-indent: 200px; /* 首行缩进*/ } </style> </head> <body> <p class="m n">123</p> <input type="button" value="按钮"/> <input type="text" /> <input type="number" /> <input type="password" /> <a href="#">点我一下1</a> <a>点我一下2</a> <a>点我一下3</a> <div>我是div1</div> <div>我是div2</div> <span>我是span1</span> <span>我是span1</span> </body> </html> ## 三,综合练习 ## ### –0,盒子模型 ### CSS把网页里的每个元素都当做一个盒子来看. 外边距: 盒子间的距离margin 内边距: 一个盒子里, 内容和边框的距离padding 宽width/高height/边框border: 一个盒子里的 <!--margin设置外边距--> <input type="radio" name="sex" value="1" style="margin-left:30px;"/>男2 <input type="radio" name="sex" value="1" style="margin-right:30px;"/>男3 <input type="radio" name="sex" value="1" style="margin-top:30px;"/>男4 <input type="radio" name="sex" value="1" style="margin-bottom:30px;"/>男5 <!--padding设置内边距padding-left左边距 padding-top上边距 padding-bottom下边距--> <input type="text" placeholder="你好0" style="padding:20px;"/> <input type="text" placeholder="你好1" style="padding-left:20px;"/> <input type="text" placeholder="你好2" style="padding-top:20px;"/> <input type="text" placeholder="你好3" style="padding-bottom:20px;"/> ### –1,用户注册 ### ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_18_color_FFFFFF_t_70_g_se_x_16] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 用户注册</title> <style> /* 1.修饰输入框 */ .a{ padding:10px;/* 内边距 */ width: 300px;/* 宽度 */ height:30px;/* 高度 */ font-size:20px;/* 文字大小 */ } /* 2.修饰提示文字 */ .b{ font-size:8px;/* 字号 */ color: #999999;/* 字的颜色 */ padding: 10px;/* 内边距 */ } /* 3.修饰 我已阅读 */ #c{ margin: 10px; /*外边距 */ text-indent:40px ;/* 首行缩进 */ font-size: 8px;/* 文字变小 */ } /* 4.修饰 立即注册按钮 */ input[type="submit"]{ width: 320px;/* 宽度 */ height: 50px;/* 高度 */ background-color: tomato;/* 背景色 */ border-color:tomato ;/* 边框颜色 */ color: white;/* 文字颜色 */ font-size: 25px;/* 字体大小 */ text-align: center;/* 文字居中 */ } /* 修饰用户注册居中 */ h2{ text-indent:100px;/* 文本缩进 */ } </style> </head> <body> <form method="post" action="#"> <table> <tr> <td> <h2>用户注册</h2> </td> </tr> <tr> <td> <input class="a" type="text" placeholder="用户名" name="user"/> </td> </tr> <tr> <td class="b" >支持中文、字母、数字、“-”、“_”的组合,4-20个字符</td> </tr> <tr> <td> <input class="a" type="password" placeholder="设置密码" name="pwd"/> </td> </tr> <tr> <td class="b" >建议使用数字、字母和符号两种以上的组合,6-20个字符</td> </tr> <tr> <td> <input class="a" type="password" placeholder="确认密码" name="repwd"/> </td> </tr> <tr> <td class="b" >两次密码输入不一致</td> </tr> <tr> <td> <input class="a" type="text" placeholder="验证手机" name="tel"/> 或 <a href="#">验证邮箱</a> </td> </tr> <tr> <td> <input type="checkbox" id="c"/> 我已阅读并同意 <a href="#">《京淘用户注册协议》</a> </td> </tr> <tr> <td> <input type="submit" value="立即注册"/> </td> </tr> </table> </form> </body> </html> ### –2,优化HTML / CSS,实现松耦合 ### ![在这里插入图片描述][88e40ad094c94d3792a6f70db740c999.png] #### 创建css文件 #### /* 1.修饰输入框 */ .a{ padding:10px;/* 内边距 */ width: 300px;/* 宽度 */ height:30px;/* 高度 */ font-size:20px;/* 文字大小 */ } /* 2.修饰提示文字 */ .b{ font-size:8px;/* 字号 */ color: #999999;/* 字的颜色 */ padding: 10px;/* 内边距 */ } /* 3.修饰 我已阅读 */ #c{ margin: 10px; /*外边距 */ text-indent:40px ;/* 首行缩进 */ font-size: 8px;/* 文字变小 */ } /* 4.修饰 立即注册按钮 */ input[type="submit"]{ width: 320px;/* 宽度 */ height: 50px;/* 高度 */ background-color: tomato;/* 背景色 */ border-color:tomato ;/* 边框颜色 */ color: white;/* 文字颜色 */ font-size: 25px;/* 字体大小 */ text-align: center;/* 文字居中 */ } /* 修饰用户注册居中 */ h2{ text-indent:100px;/* 文本缩进 */ } #### 修改html文件 #### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 用户注册</title> <!-- 引入外部的css文件 href属性用来指定文件的位置 rel属性用来指定文件的类型 --> <link href="1.css" rel="stylesheet"/> </head> <body> <form method="post" action="#"> <table> <tr> <td> <h2>用户注册</h2> </td> </tr> <tr> <td> <input class="a" type="text" placeholder="用户名" name="user"/> </td> </tr> <tr> <td class="b" >支持中文、字母、数字、“-”、“_”的组合,4-20个字符</td> </tr> <tr> <td> <input class="a" type="password" placeholder="设置密码" name="pwd"/> </td> </tr> <tr> <td class="b" >建议使用数字、字母和符号两种以上的组合,6-20个字符</td> </tr> <tr> <td> <input class="a" type="password" placeholder="确认密码" name="repwd"/> </td> </tr> <tr> <td class="b" >两次密码输入不一致</td> </tr> <tr> <td> <input class="a" type="text" placeholder="验证手机" name="tel"/> 或 <a href="#">验证邮箱</a> </td> </tr> <tr> <td> <input type="checkbox" id="c"/> 我已阅读并同意 <a href="#">《京淘用户注册协议》</a> </td> </tr> <tr> <td> <input type="submit" value="立即注册"/> </td> </tr> </table> </form> </body> </html> ## 四,JavaScript ## ### –1,概述 ### 是弱类型的语言, 是基于对象和事件驱动的脚本语言 基于对象: JS和java一样,也有对象的概念,也提供了一些内置的对象,也可以自定义对象 事件驱动: JS里有很多的事件, 当事件被触发时才执行JS代码. 常用的事件:鼠标滑过/单击/双击/鼠标悬停 脚本语言: JS是一个弱类型,被浏览器执行的语言. 只要有浏览器的地方都可以执行JS 好处: 是直译式的语言,增强了用户和浏览器之间的交互性. 使用位置: 1,行内JS: 只能作用在一行 2,内部JS: 通常在head标签里,使用script标签,把JS的代码包起来 3,外部JS: 松耦合,单独创建一个js文件,可以被引入到各种网页中 ### –2,入门案例 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JavaScript</title> <!-- 2.内部js --> <script> alert('我来了') </script> </head> <body> <!-- 1.行内JS --> <!-- 单击事件,div时弹出100 --> <div onclick="alert(100)">我是div1</div> <!-- 双击事件,div时弹出你好 --> <div ondblclick="alert('你好')">我是div2</div> <!-- 鼠标进入事件,div时弹出200 --> <div onmouseenter="alert(200)">我是div3</div> </body> </html> ### –3,测试 ### <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 JavaScript</title> <!-- 2.内部js --> <script> //JS的数据类型:number string null boolean undefined alert(2.4+3.6); //number类型的运算,会自动类型转换 alert('hello js'); //string类型 alert("hello js"); //string类型 alert(true); //boolean类型 alert(false); //boolean类型 alert(null); //null类型 </script> </head> <body> <!-- 1.行内JS --> <!-- 单击事件,div时弹出100 --> <div onclick="alert(100);">我是div1</div> <!-- 双击事件,div时弹出你好 --> <div ondblclick="alert('你好');">我是div2</div> <!-- 鼠标进入事件,div时弹出200 --> <div onmouseenter="alert(200);">我是div3</div> </body> </html> ## 作业: ## ### –1,利用HTML 和 CSS技术 完成制作小票 ### ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16] [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20210911/51dcb93b710e47c5b8408b45d156bb9b.png [88e40ad094c94d3792a6f70db740c999.png]: /images/20210911/6c044089604b44549bb85be63287c7d8.png [watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2dibHB4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20210911/7d85b0c897574e438cecd62b39ebf13c.png
相关 cgb2107-day08 文章目录 一,模拟 服务器解析浏览器发来的数据 二,CSS选择器 \--1,概述 \--2,简单选择器 旧城等待,/ 2021年09月11日 03:36/ 0 赞/ 283 阅读
相关 CGB2107-DAY08总结复习 DAY08总结复习 面向对象之多态 1. 前提:继承+重写 2. 口诀1:父类引用指向子类对象 解释:父类类型的引用类型变量保存的是子类类型的对象的地址 柔光的暖阳◎/ 2021年09月09日 09:26/ 0 赞/ 233 阅读
还没有评论,来说两句吧...