一、CSS中伪类选择器
- 描述一个元素(html标签)经历的四个状态:
link:鼠标没有访问过
hover:鼠标经过的状态
active:激活状态:鼠标点击但是没有松开
visited:点击并且松开----已经访问过了
2.格式:
在css代码块中
选择器:状态{
书写样式代码
}
- 要显示这个循环效果:那么必须遵循下面的先后顺序
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style>
/*没有访问过的状态*/
a:link{
/*字体尺寸样式*/
font-size: 20px;
color: red;
/*文本修饰*/
text-decoration: none;
}
/*访问过的状态*/
a:visited{
font-size: 35px;
color: darkgrey;
}
/*鼠标悬停状态*/
a:hover{
font-size: 30px;
color: blue;
text-decoration: underline;
}
/*激活状态:点击但是没有松开*/
a:active{
font-size: 25px;
color: greenyellow;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a href="跳转.html">点击跳转</a>
</div>
</body>
</html>
二、常见CSS的样式属性
- CSS字体
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本样式</title>
<style>
body{
/*文本颜色:color*/
color: red;
/*行高:line-height*/
line-height: 50px;
/*letter-spacing:字符间距*/
letter-spacing: 10px;
/*text-align:设置文本内容对齐方式*/
text-align: center;
/*text-decoration 属性:设置文本的是否有下划线
overline:上划线
underLine:下划线
line-through:中划线
*/
text-decoration: line-through;
/*
word-spacing:单词间距
系统认为:两个字组成一个单词
*/
word-spacing: 10px;
}
</style>
</head>
<body>
今天 天气 不太 好!
</body>
</html>
- CSS文本
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS背景</title>
<style>
/*给body中设置相关的背景样式*/
body{
/*background-color:设置背景颜色*/
/* background-color: darkgrey;*/
/*background-image:将图像设置背景
如果这个图像尺寸大小不是当前系统默认的分辨率尺寸
这个图像就会重复复制,X轴和Y轴在同时复制
*/
/* background-image: url("img/mv.jpg");*/
/*
background-repeat:设置图像是否重复以及如何重复
默认值:repeat(x轴/y轴重复)
repeat-x:x轴重复
repeat-y:y轴重复
no-repeat: (不重复)推荐
*/
/* background-repeat: no-repeat;*/
/*
background-position:设置图像的起始位置
图像的位置 在浏览器中的显示位置
默认值:就是top left
*/
/*background-position: top center;*/
/*推荐:背景样式的简写属性
background:
background-color
background-position
background-repeat
background-image
*/
background: darkgrey top left no-repeat ;
}
</style>
</head>
<body>
<div id="formId">
<form>
<div>
<span>用户名</span>
<input type="text" placeholder="请您输入用户名">
</div>
<div>
<span>密码</span>
<input type="password" placeholder="请您输入密码">
</div>
</form>
</div>
</body>
</html>
- CSS边框(重点)
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS边框样式</title>
<style>
div{
/*CSS边框样式:有4个边
先去设置四个边的颜色:
*/
/*border-top-color: red;
border-left-color: greenyellow;
border-bottom-color: blue;
border-right-color: darkgreen;*/
/*
1)边框四个边的颜色,宽度,以及样式都有一个默认的方向:
上右下左
2)某一边没有设置颜色,宽度以及样式:会使用对边的颜色和宽度以及样式
颜色/宽度/样式的简写属性
*/
/*border-color: red ;*/
/*
再去设置四个边的宽度
*/
/*border-top-width: 10px;
border-left-width: 20px;
border-bottom-width: 30px;
border-right-width: 40px;*/
/* border-width: 1px ;*/
/*
要显示边框出来,必须要指定的边框的样式属性
border-style
solid:单实线
double:双实线
dashed:虚线
dotted:点
*/
/* border-top-style: solid;
border-left-style: double;
border-bottom-style: dashed;
border-right-style: dotted;*/
/* border-style: solid ;*/
/*border的简写属性
border-width
border-style
border-color
*/
border:2px solid black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
div1
</div>
</body>
</html>
- CSS浮动属性(重点)
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS浮动属性</title>
<style>
.c1{
border: 1px solid #000;
background-color: red;
width: 200px;
height: 200px ;
/*浮动属性:float
left:向左浮动,碰到外边框停止浮动
right:向右浮动...
*/
float: left;
}
.c2{
border: 1px solid #000;
background-color: greenyellow;
width: 200px;
height:200px ;
float: left;
}
.c3{
border: 1px solid #000;
background-color: blue;
width: 200px;
height: 200px ;
float: left;
}
/*.clear{
*/
/*不浮动属性
一般推荐:both:两边都不浮动
*/
/*
clear: both;
}
*/
</style>
</head>
<body>
<div class="c1">div1</div>
<div class="c2">div2</div>
<!--div1所在的块内容和div2所在的快内容在同一行上
div3不在属于同一行内容,div3单独下面罗列起来
那么这个时候会在div3和div2之间加入空的块标签,给class或者id属性,
设置他们之间不浮动
不浮动属性:
clear
:left:左不浮动
right:右不浮动
both:左右两边都不浮动
-->
<div class="clear"></div>
<div class="c3">div3</div>
</body>
</html>
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index首页</title>
<style>
.logo{
float: left;
}
.header{
float: left;
}
.login{
float: left;
}
.div1{
line-height: 50px;
}
.clear{
clear: both;
}
.daohang{
line-height: 50px;
background-color: black;
}
.c1{
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div>
<!--第一个div:logo内容-->
<div class="div1">
<div class="logo">
<img src="img/logo2.png"/>
</div>
<div class="header">
<img src="img/header.png">
</div>
<div class="login">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
<div class="clear"></div>
<!--导航条-->
<div class="daohang">
<a class="c1" href="#">首页</a>
<a class="c1" href="#">手机数码</a>
<a class="c1" href="#">电脑办公</a>
<a class="c1" href="#">其他</a>
</div>
</div>
</div>
</body>
</html>
三、盒子模型(万物皆盒子)
- 将div看成盒子:
盒子容量大小: width+height
盒子厚度:border
内边距:padding (内容和边框的距离)
外边距:margin(盒子和盒子之间的距离)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #000;
}
.c1{
background-color: red;
}
.c2{
background-color: green;
}
</style>
</head>
<body>
<div class="c1">div1</div>
<div class="c2">div2</div>
</body>
</html>
div+css:层级布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<!--
将form使用大的div包裹起来,设置边框样式
然后利用盒子的属性进行移动:将整个表单移动浏览器中间
-->
<style>
.form-class{
/*边框样式*/
border: 1px solid #000;
/*容量大小*/
width: 420px;
height: 250px;
/*设置外边距属性*/
margin: 210px 0 0 470px;
background-color: darkgray;
/* background-image: url("img/qq.jpg");
background-repeat: no-repeat;
background-position: top left;*/
}
/*给class="username"所在标签设置样式*/
.username-class{
/*设置外边距*/
margin: 40px 0 0 100px;
}
/*给class="password-class"设置样式*/
.password-class{
/*设置外边距*/
margin: 20px 0 0 100px;
}
/*给class="btn-class"设置样式*/
.btn-class{
margin: 20px 0 0 150px;
}
/*给id="btn_regist"设置外边距*/
#btn_regist{
margin-left: 30px;
}
.hobit-class{
margin: 20px 0 0 100px;
}
</style>
</head>
<body>
<h3>GET提交方式</h3>
<div class="form-class">
<!--提交表单-->
<form action="http://localhost:8080/day35_war_exploded/getData" method="get">
<div class="username-class">
用户名:<input type="text" name="username" placeholder="请输入用户名" />
</div>
<div class="password-class">
密  码:<input type="password" name="password" placeholder="请输入密码" />
</div>
<div class="hobit-class">
爱  好:<input type="checkbox" name="hobit" value="足球" />足球
<input type="checkbox" name="hobit" value="篮球" />篮球
<input type="checkbox" name="hobit" value="乒乓球" />乒乓球
</div>
<div class="btn-class">
<input type="submit" value="注册"> <input id="btn_regist" type="button" value="取消" />
</div>
</form>
</div>
<hr/>
<h3>Post提交方式</h3>
<div class="form-class">
<!--提交表单-->
<form action="http://localhost:8080/day35_war_exploded/getData" method="post">
<div class="username-class">
用户名:<input type="text" name="username" placeholder="请输入用户名" />
</div>
<div class="password-class">
密  码:<input type="password" name="password" placeholder="请输入密码" />
</div>
<div class="hobit-class">
爱  好:<input type="checkbox" name="hobit" value="足球" />足球
<input type="checkbox" name="hobit" value="篮球" />篮球
<input type="checkbox" name="hobit" value="乒乓球" />乒乓球
</div>
<div class="btn-class">
<input type="submit" value="注册"> <input id="btn_regist" type="button" value="取消" />
</div>
</form>
</div>
</body>
</html>
四、Servlet(针对服务端程序开发) :server applet
-
什么是Servlet? 是缩写
全称"server applet" :java服务连接器(使用java语言针对服务端程序的开发) -
如何定义一个Servlet呢?
1). 自定义一个类,继承HttpServlet,
重写HttpServlet里面doGet(),doPost方法
2). 配置servlet:在WEB-INF的web.xml文件中配置指定的servlet
在web.xml中配置:
//配置servlet基本配置
<servlet>
//配置servlet的名称
<servlet-name>MyFirstServlet</servlet-name>
//配置当前MyFirstServlet的全限定名称
<servlet-class>com.qf.web.MyFirstServlet</servlet-class>
</servlet>
//servlet的映射配置
<servlet-mapping>
<servlet-name>MyFirstServlet</servlet-name>
<url-pattern>/helloServlet</url-pattern>
</servlet-mapping>
3)在地址栏输入:
http://localhost:8080/day35_war_exploded/helloServlet
Servlet就是能够实现Servlet接口的普通类!
Web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--配置servlet基本配置-->
<servlet>
<!--配置servlet的名称-->
<servlet-name>MyFirstServlet</servlet-name>
<!--配置当前MyFirstServlet的全限定名称-->
<servlet-class>com.qf.web.MyFirstServlet</servlet-class>
</servlet>
<!--servlet的映射配置-->
<servlet-mapping>
<!--这个名称必须和servlet中的serlvet-name一致-->
<servlet-name>MyFirstServlet</servlet-name>
<!--映射路径-->
<url-pattern>/helloServlet</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>LifeDemo</servlet-name>
<servlet-class>com.qf.life.LifeDemo</servlet-class>
<!--配置servlet初始化时机
当tomcat服务器启动的时候,就创建当前类对象
数值越大,优先级越小,
1:最大优先级的
-->
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>LifeDemo</servlet-name>
<url-pattern>/life</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>GetFormData</servlet-name>
<servlet-class>com.qf.getData.GetFormData</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetFormData</servlet-name>
<url-pattern>/getData</url-pattern>
</servlet-mapping>
</web-app>
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class MyFirstServlet extends HttpServlet {
//一个执行get提交方式
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//服务器响应一个内容给浏览器
// response.getWriter().write("hello,this is my FisrtServlet!!");
//解决响应的中文乱码
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();//字符打印流
writer.write("这是我第一个Servlet!");
}
//一个执行的post提交方式
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
-
servlet的生命周期:
1). 对象只创建一次
2). 初始化也只初始化一次!3). 而service方法,被调用多次,里面覆盖的应该具体的doXXX()方式(根据不同的提交方式执行不同的doXXX) 4). 当前serlvet类对象什么时候创建?默认的时候,访问servlet的时候创建当前类的实例,而且是单例的,在内存中始终只有一个对象 5). 也可以通过在servlet配置中:<load-on-startup>1</load-on-startup>配置初始化时机,当前tomcat启动的时候创建当前类对象,以及进行初始化操作! 6). 开发者:开发服务端程序,定义的servlet 重写具体的doXXX()方法,而不是service方法!
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LifeDemo extends HttpServlet {
//构造方法
public LifeDemo(){
System.out.println("当前创建类该类对象...");
}
//初始化
@Override
public void init(ServletConfig config) throws ServletException {
//ServetCofnig:servlet的配置对象
//getServletName()---能获取web.xml文件中配置的servlet名称
System.out.println("当前这个servlet正在被初始化..."+config.getServletName());
}
//service
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("service方法被调用了...");
}
//销毁:当前正常关闭tomcat服务器,servlet就会被销毁
@Override
public void destroy() {
System.out.println("当前servlet被销毁掉...");
}
}
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Enumeration;
import java.util.Map;
import java.util.Set;
/* 覆盖doGet和doPost方法的时候,两个方法处理get方式和post方式
* 接收前台参数数据的方式都是通用的,所以只需要在doPost将doGet()复用即可!
*/
public class GetFormData extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决post提交方式的中文乱码
request.setCharacterEncoding("utf-8");
//解决相应的中文乱码
response.setContentType("text/html;charset=utf-8");
System.out.println("准备提交数据...");
//tomcat版本8.0以上 无须手动方式解决get提交方式乱码,tomcat8以上已经get优化了
//http://localhost:8080/day35_war_exploded/getData?username=张三&password=123456
//HttpServletRequest 它的父接口:ServletRequest的方法
//通用方法:获取前台参数
//public String getParameter(String name):通过name属性值获取它提交的内容
String username = request.getParameter("username");
String passowrd = request.getParameter("password");
System.out.println(username+"----"+passowrd);
System.out.println("---------------------------------");
//public java.util.Map<K, V> getParameterMap():
//结合 工具类:apache:封装 工具类 common-beanutils:
//BeanUtils.populate(map,实体对象)
/* Map<String, String[]> map = request.getParameterMap();
//遍历map
Set<String> keySet = map.keySet();
for(String key:keySet){
String[] value = map.get(key);
System.out.println(key+"---"+value);
}*/
//public java.util.Enumeration<E> getParameterNames() :获取的所有的参数名称的内容
//针对复选框:选多个值:默认获取的第一个值!
Enumeration<String> en= request.getParameterNames();
while(en.hasMoreElements()){
String name = en.nextElement();//参数名称
//public String getParameter(String name):通过name属性值获取它提交的内容
String value = request.getParameter(name);
System.out.println(name+"---"+value);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//覆盖一下doGet即可
doGet(request,response);
/*
//通用方法:获取前台参数
//public String getParameter(String name):通过name属性值获取它提交的内容
String username = request.getParameter("username");
String passowrd = request.getParameter("password");
System.out.println(username+"----"+passowrd);
System.out.println("---------------------------------");
//public java.util.Map<K, V> getParameterMap():
//结合 工具类:apache:封装 工具类 common-beanutils:
//BeanUtils.populate(map,实体对象)
*//* Map<String, String[]> map = request.getParameterMap();
//遍历map
Set<String> keySet = map.keySet();
for(String key:keySet){
String[] value = map.get(key);
System.out.println(key+"---"+value);
}*//*
//public java.util.Enumeration<E> getParameterNames() :获取的所有的参数名称的内容
//针对复选框:选多个值:默认获取的第一个值!
Enumeration<String> en= request.getParameterNames();
while(en.hasMoreElements()){
String name = en.nextElement();//参数名称
//public String getParameter(String name):通过name属性值获取它提交的内容
String value = request.getParameter(name);
System.out.println(name+"---"+value);
}*/
}
}