【日常学习】CSS + XML使用

最新推荐文章于 2024-07-29 13:25:32 发布

九离⠂

最新推荐文章于 2024-07-29 13:25:32 发布

阅读量845

点赞数

分类专栏： # java初学文章标签：后端日常学习

本文链接：https://blog.csdn.net/qq_43410878/article/details/123819535

版权

java初学专栏收录该内容

36 篇文章 0 订阅

订阅专栏

文章目录

- CSS + XML

CSS + XML

1. CSS

1.1 定位

相对
	相对于当前HTML标签所在上级标签为参考物进行的定义擦操作

绝对
	已body标签为作为参考物进行定义操作
	
固定
	定死了！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        .outer {
            background-color: green;
            /* 绝对定位 */
            position: absolute;
            top: 200px;
            left: 200px;
        }

        .inner {
            background-color: red;
            /* 相对定位 */
            position: relative;
            top: 100px;
            left: 100px;
        }

        .other {
            background-color: purple;
        }

        a {
            color: greenyellow;
            text-decoration: none;
            font: 50px 幼圆;
        }

        #gh {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: fixed;

            bottom: 50%;
            right: 0;
        }

        .tel {
            font-size: 25px;
            color: darkgreen;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner"></div>
</div>
<div class="other"></div>
<div class="other"></div>
<div id="gh"><a href="http://www.jiayuan.com">狗昊征婚 <br> <span class="tel">&nbsp;138后面随便编</span></a></div>
<p>路见不平一声吼，狗昊没有女朋友</p>
</body>
</html>

1.2 边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-边框</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /*
            solid 实线
            double 双实线
            dashed 虚线
            dotted 点虚线
             */
            border: 10px red solid;

            border-radius: 75px 50px 75px 50px;

            /*border-top-left-radius: 200px;*/
            /*border-top-right-radius: 50px;*/
            /*border-bottom-left-radius: 20px;*/
            /*border-bottom-right-radius: 100px;*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

1.3 盒子模型

1.3.1 概述

在这里插入图片描述

1.3.2 内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            border: 5px red solid;

            /*
            padding-left: 50px;
            padding-top: 100px;
            padding-right: 200px;
            padding-bottom: 250px;
             */
            /*
            一个数据 上下左右全是同一个数据
            两个数据 第一个数据上下，第二个左右
            三个数据 第一个数据上，第二个数据左右，第三个数据下
            四个数据 顺时针，上右下左
             */
            padding: 100px 50px 75px 20px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

1.3.3 外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6-外边距</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 5px red solid;

            /*
            当前元素和其他元素之间的距离

            margin-left: 20px;
            margin-top: 50px;
            margin-right: 100px;
            margin-bottom: 150px;
            */
            /*
           一个数据 上下左右全是同一个数据
           两个数据 第一个数据上下，第二个左右
           三个数据 第一个数据上，第二个数据左右，第三个数据下
           四个数据 顺时针，上右下左
            */
            margin: 100px 50px 150px 80px
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

2. XML

2.1 XML概述

Extensible Markup Language 
	可拓展标记语言

XML大量使用在开发中的配置文件中。
	例如: c3p0-config.xml中
XML还用在数据的传输接口中
	例如: news.163
还可以用于小型数据库，满足最基本的增删改查操作，low
XML自由度较高
	用户可以根据自己的需求来自定义标签名字，内容和属性。

学习XML文件的要求
	1. 能够读取基本的XML文件
	2. 了解XML文件的解析操作过程 DOM SAX
	3. 了解XML文件约束的重要性

2.2 XML文件案例

<?xml version="1.0"?>
<students>
    <student id="001" classId="JavaEE2005">
        <name>苟磊</name>
        <age>16</age>
        <gender>男</gender>
        <score>100</score>
        <addr>
            <province>河南省</province>
            <city>郑州市</city>
            <area>二七区</area>
        </addr>
    </student>
    <student id="002">
        <name>狗昊</name>
        <age>60</age>
        <gender>男</gender>
        <score>-5</score>
    </student>
    <student id="003">
        <name>明俊俊</name>
        <age>18</age>
        <gender>男</gender>
        <score>59</score>
    </student>
</students>

XML文件语法强制要求
	1. XML文件占用有且只允许有一个根节点 rootElement
	2. XML文件中自定义标签必须有对应的结尾标签，而且拼写不允许错误。
	3. XML文件标签属性自定义，要求为键值对形式，并且属性值使用""包含

2.3 XML文件结构分析

在这里插入图片描述

2.4 XML解析

DOM
	将整体XML文件直接加载到内存中，并且看作是一个对象。
	通过对象的方式进行操作处理。
		增删改查！！！
	推荐使用方式
		Dom4j 第三方Jar也是Spring框架中对于XML文件解析的内置方式。
		Xpath bt变态！！！ 

SAX
	读取一行XML文件数据，解析一行XML数据，一般用于手机端应用对应数据的解析过程
	对于内存占用较小，但是有且只能做读取解析操作。

package com.qfedu.a_xml;

import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

import java.util.Iterator;
import java.util.List;

public class Demo1 {
    public static void main(String[] args) throws DocumentException {
        /*
        创建SAXReader对象，也是XML解析核心对象
         */
        SAXReader saxReader = new SAXReader();
        /*
        加载对应XML文件，获取Document对象
         */
        Document read = saxReader.read(
                Demo1.class.getClassLoader().getResourceAsStream("student.xml"));

//        System.out.println(read);

        /*
        通过Document对象获取根节点
         */
        Element rootElement = read.getRootElement();
        System.out.println(rootElement);
//        System.out.println();

        /*
        根据指定的节点名字获取第一个对应名字的子节点
         */
        Element student1 = rootElement.element("student");
        System.out.println(student1);

        System.out.println();
        /*
        获取当前节点下所有子节点List集合
         */
        List elements = rootElement.elements();
        for (Object element : elements) {
//            System.out.println(element);
        }

        System.out.println();

        /*
        获取当前节点下所有子节点Iterator迭代器对象
         */
        Iterator iterator = rootElement.elementIterator();
//        while (iterator.hasNext()) {
//            System.out.println(iterator.next());
//        }

        List attributes = student1.attributes();
        for (Object attribute : attributes) {
            Attribute temp = (Attribute) attribute;
            /*
            直接获取属性节点，得到对应的数据
             */
            System.out.println(temp.getData());
        }

        /*
        获取属性节点数据
         */
        System.out.println(student1.attributeValue("id"));
        System.out.println(student1.attributeValue("classId"));

        Iterator iterator1 = student1.elementIterator();
        while (iterator1.hasNext()) {
            Element next = (Element) iterator1.next();
            System.out.println(next.getText());
        }
    }
}

九离⠂

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【日常学习】CSS + XML使用

CSS + XML1. CSS1.1 定位相对相对于当前HTML标签所在上级标签为参考物进行的定义擦操作绝对已body标签为作为参考物进行定义操作固定定死了！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3-定位</title> <style> div {
复制链接

扫一扫

专栏目录