Java学习日志Day35_CSS中伪类选择器_常见CSS的样式属性_盒子模型_Servlet

于 2021-06-16 21:16:21 发布
阅读量136 收藏
点赞数
分类专栏： 学习 文章标签： java css tomcat
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/igfff/article/details/117966686
版权

一、CSS中伪类选择器

  1. 描述一个元素(html标签)经历的四个状态:
    link:鼠标没有访问过
    hover:鼠标经过的状态
    active:激活状态:鼠标点击但是没有松开
    visited:点击并且松开----已经访问过了

2.格式：

 在css代码块中
            选择器:状态{
                书写样式代码
            }
  1. 要显示这个循环效果:那么必须遵循下面的先后顺序
    提示：在 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的样式属性

  1. 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>
  1. 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>
  1. 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>
  1. 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>

三、盒子模型(万物皆盒子)

盒子模型

  1. 将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">
            密&ensp;&nbsp;码:<input  type="password" name="password" placeholder="请输入密码" />
        </div>
        <div class="hobit-class">
            爱&ensp;&nbsp;好:<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">
            密&ensp;&nbsp;码:<input  type="password" name="password" placeholder="请输入密码" />
        </div>
        <div class="hobit-class">
            爱&ensp;&nbsp;好:<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

  1. 什么是Servlet? 是缩写
    全称"server applet" :java服务连接器(使用java语言针对服务端程序的开发)

  2. 如何定义一个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接口的普通类!
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);
    }
}

  1. 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);
        }*/
    }
}
igfff
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

igfff

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值