凌云(mlinyun)

【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

CSS的浮动

目录

CSS的浮动
- 一、学习目标
- 二、文章内容
- - 2.1 结构伪类选择器
  - 2.2 伪元素
  - 2.3 标准流
  - 2.4 浮动
  - 2.5 清除浮动
  - 2.6 拓展（BFC）
- 三、综合案例
- - 3.1 小米模块案例
  - 3.2 网页导航案例

一、学习目标

能够使用结构伪类选择器在HTML中选元素
能够说出标准流元素的布局特点
能够说出浮动元素的特点
能够使用浮动完成小米模块布布局案例
能够说出清除浮动的目的，并能够使用清除浮动的方法

二、文章内容

2.1 结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
选择器：

n的注意点：
- n为0、1、2、3、4、5、6、……
- 通过n可以组成常见公式（如果是n公式，则n从0开始计算）
结构伪类选择器易错点
问题：在下列案例中，如果需要找到第一个a标签，如何去查找？

ul>li*8>a{我是第$个a标签} 中，如果需要找到第一个a标签，结构伪类选择器注意不要写错
错误： ul li a:first-child { css } 这样的写法会把所有的a标签都选择中
正确：ul li:first-child a { css } 这样只会选中第一个a标签

E:nth-child(n) { css } 的注意事项

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 需求：使用 nth-child() 给第一个 span 标签添加样式 */
        /* div span:nth-child(1) {这个是选不到第一个 span 标签的
        color: pink;
        } */

        div span:nth-child(2) {
            color: red;
        }

        /* 总结：nth-child(n) 选择的是父元素里面的第 n 个孩子，它不管里面的孩子是否是同一种类型 */
    style>
head>
<body>
    <div>
        <p>段落标签p>
        <span>span标签1span>
        <span>span标签2span>
        <span>span标签3span>
    div>
body>
html>

上面的问题可以使用 E:first-of-type { css } E:last-of-type { css }
E:nth-of-type(n) { css } E:nth-last-of-type(n) { css }来解决

结构伪类选择器就是选择第n个元素
nth-child 是从所有子级开始算的，可能是不同类型
nth-of-type 是指同一种类型的子级，比如 ul li:nth-of-type(2) 就是选择第二个li
关于 nth-child(n) 我们要知道 n 是从0开始算的，要记住常用的公式
如果是无序列表，我们肯定使用nth-child更多

2.2 伪元素

目标：能够使用伪元素在网页中创建内容

伪元素：一般页面中的非主体内容可以使用伪元素
区别
1. 元素：HTML设置的标签
2. 伪元素：由CSS模拟出来的标签效果
种类
注意点
1. 有一个必加的属性 content: ‘伪元素的内容’;
2. before在内容的前面，after在内容的后面
3. before和after创建一个元素，但是属于行内元素
4. 因为在DOM里面看不见刚才创建的元素，所以我们称为伪元素
5. 伪元素和标签选择器一样，权重为1

2.3 标准流

目标：能够认识标准流的默认排布方式及其特点

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素或行内块元素：从左往右，水平布局，一行可以显示多个，空间不够自动折行

2.4 浮动

目标：能够认识使用浮动的作用，了解浮动的特点

浮动的作用
- 早期的作用：图文环绕
- 现在的作用：网页布局
  场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
浮动的代码
- 属性名：float
- 属性值：
浮动的特点
- 浮动的元素会脱离标准流（简称：脱标），相当于漂浮到了空中，在标准流中不占位置
- 浮动的元素层级比标准流高出了半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动会受到上面元素边界的影响
- 浮动元素有特殊的显示效果：①一行可以显示多个 ②可以以设置宽高
- 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中
浮动的案例
- （案列）网页布局案例
  需求：使用浮动，完成设计图中布局效果
- （案例）小米模块案例
  需求：使用浮动，完成设计图中布局效果
- （案例）网页导航案例
  需求：使用浮动，完成设计图中布局效果
书写网页导航步骤：
(1) 清除默认的margin和padding
(2) 找到ul，去除小圆点
(3) 找到li标签，设置浮动让li一行中显示
(4) 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
- 方法一：给a标签设置 display : inline-block
- 方法二：给a标签设置 display : block
- 方法三：给a设置 float : left

2.5 清除浮动

目标：能够认识清除浮动的目的，并且能够使用清除浮动的方法

清除浮动的介绍
- 含义：清除浮动带来的影响
  - 影响：如果子元素浮动，此时子元素不能撑开标准流的块级父元素
- 原因：子元素浮动后脱标 → 不占位置
- 目的：需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法
清除浮动的方法 — ① 直接设置父元素高度
- 优点：简单粗暴，方便
- 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
清除浮动的方法 — ② 额外标签法
- 操作：
  - 在父元素的最后添加一个块级元素
  - 需要给添加的块级元素设置清除浮动的核心代码：clear: both;
  - 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
清除浮动的方法 — ③ 单伪元素清除法
- 操作：用伪元素替代了额外标签
```
/* ① ：基本写法 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* ② ：补充写法 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  /* 补充代码：在网页中看不到伪元素 */
  height: 0;
  visibility: hidden;
}
```
- 优点：项目中使用，直接给标签加类即可清除浮动
清除浮动的方法 — ④ 双伪元素清除法
- 作用：①清除浮动 ②解决外边距折叠的塌陷现象
- 操作：
```
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
```
- 优点：项目中使用，直接给标签加类即可清除浮动
清除浮动的方法 — ⑤ 给父元素设置overflow : hidden
- 操作：直接给父元素设置一个overflow: hidden;
- 优点：方便

2.6 拓展（BFC）

块格式化上下文（Block Formatting Context）：BFC
- 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域
创建BFC方式
1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内块元素是BFC盒子
4. overflow属性取值不为visible。如：auto、hidden…
5. ……
BFC盒子常见特点：
1. BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌
3. ……

三、综合案例

3.1 小米模块案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 去除掉标签默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
            margin: 100px auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }

        .right {
            float: right;
            width: 978px;
            height: 614px;
            /* background-color: yellow; */
        }

        .item {
            float: left;
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
            margin-right: 14px;
            margin-bottom: 14px;
        }

        /* 找到的是 第 4 和第 8个 4倍数 4n */
        .item:nth-child(4n) {
            /* background-color: red; */
            margin-right: 0;
        }

        /* 找到从第5个开始往后的所有个子元素 */
        .item:nth-child(n+5) {
            margin-bottom: 0;
        }
    style>
head>
<body>
    
    <div class="box">
        <div class="left">div>
        <div class="right">
            <div class="item">div>
            <div class="item">div>
            <div class="item">div>
            <div class="item">div>
            <div class="item">div>
            <div class="item">div>
            <div class="item">div>
            <div class="item">div>
        div>
    div>
body>
html>

3.2 网页导航案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 1、去除标签默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }

        /* 2、找到ul，去除小圆点 */
        ul {
            list-style: none;
        }

        /* 3、找到li标签，设置浮动 */
        ul li {
            float: left;
        }

        /* 4、找到a标签，设置宽高 */
        ul li a {
            /* a标签默认是行内元素，不能直接设置宽高 */
            /* 1、转换成行内块元素 */
            /* display: inline-block; */
            /* 2、转换成块级元素 */
            /* display: block; */
            /* 3、设置浮动 */
            float: left;
            width: 80px;
            height: 50px;
            background-color: #ffc0cb;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 16px;
        }

        ul li a:hover {
            background-color: #008000;
        }
    style>
head>
<body>
    <ul>
        <li><a href="#">新闻1a>li>
        <li><a href="#">新闻2a>li>
        <li><a href="#">新闻3a>li>
        <li><a href="#">新闻4a>li>
        <li><a href="#">新闻5a>li>
        <li><a href="#">新闻6a>li>
        <li><a href="#">新闻7a>li>
        <li><a href="#">新闻8a>li>
    ul>
body>
html>

你可能感兴趣的:(Web前端开发基础,前端,css,Web前端,html5)

android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android 自定义曲线图
个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
大前端-postcss安装使用指南黑夜照亮前行的路 postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些咕噜签名分发前端 javascript 开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
java实体中返回前端的double类型四舍五入（格式化）婲落ヽ紅顏誶 java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件在飞行-米龙 Django django python 后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
Web前端Html的表单任家伟前端 html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）王佳斌 +Thinkphp mysql 前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
react native 总结一切顺势而行 react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
【前端学习——js篇】7.函数缓存笔下无竹墨下有鱼前端学习前端学习 javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
Websocket服务监听收发消息 beiback Java 服务器问题 websocket 网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题 Java 服务器运维 netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java 计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
javascript实现SM2加密解密人生在勤，不索何获 javascript 前端 jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
前端埋点解决方案 zhu_zhu_xia 前端
一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
webpack快速基础风漫漫雨歇歇 webpack webpack 前端前端框架
文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件（plugin)2.建立项目，用于测试功能2.1安装webpack，2.2创建webpack配置文件,2.3配置package.json，运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav
如何提出令人爱回答的好问题？兮若耶
我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统
谈谈对前端性能监控的理解和实践 Layla_c web jave python 前端
一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业
mineadmin使用docker启动方式 qq_38812523 docker php 容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？智伴科技 git
版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
低代码与前端开发架构：重塑软件开发的未来快乐非自愿低代码架构前端
随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模
CSS color-mix() 函数蚂蚁上的大象前端的那些事 CSS css 前端
CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能，允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间，让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数？color-mix()是一个即将推出的CSS颜色函数，它能够根据指定的颜色模型（如RGB
DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动 01空间常见场景解决方案 css html
滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc
接口测试之测试原则、测试用例、测试流程...... 程序员老鹰测试工具功能测试测试用例测试覆盖率系统安全
一、接口的介绍软件测试中，常说的接口有两种：图形用户接口（GUI，人与程序的接口）、应用程序编程接口（API）。接口（API）是系统与系统之间，模块与模块之间或者服务与服务之间相互调用的入口。它的本质：其实就是一种约定，在开发前期，我们约定接口会接收什么数据；在处理完成后，它又会返回什么数据。开发岗位分为前端和后端，他们相互配合完成工作，会协商接口的定义方法。一般后端定义接口，前端调用接口。前后端
html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上猫研所 html5 websocket 手机
对接的网易云信微信IMSDK，在h5上能建立起连接，在手机端不行，截图是h5的链接，下面是app的日志：20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI
【前端】CommonJS和ES Module Lucky小维前端前端
区别语法差异：CommonJS：使用require()导入模块，使用module.exports或exports导出模块。ESModule：使用import导入模块，使用export导出模块。编译时vs运行时：CommonJS是在运行时加载模块，模块代码是动态执行的。ESModule是在编译时静态解析模块依赖关系，以便更好地进行优化和静态分析。异步加载：CommonJS不支持异步加载模块，只能同步
基于python+vue高校毕业生离校管理系统flask-django-php-nodejs QQ511008285 python vue.js flask django node.js php
课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题百思不得小李 JS实战记录 vue2实战记录 javascript 前端 vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境：2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
java解析APK 3213213333332132 java apk linux 解析APK
解析apk有两种方法 1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 2、利用相关jar包里的集成方法解析apk 这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 public class ApkUtil { /** * 日志对象 */ private static Logger
nginx自定义ip访问N种方法 ronin47 nginx 禁止ip访问
　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种：　　　一：把ip段放在redis里，写一段lua 二：利用geo传递变量，写一段
mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性 dcj3sjt126com mysql
timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下： 1. CURRENT_TIMESTAMP 当要向数据库执行insert操作时，如果有个timestamp字段属性设为 CURRENT_TIMESTAMP，则无论这
struts2+spring+hibernate分页显示 171815164 Hibernate
分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： public in
构建自己的Wrapper应用 g21121 rap
我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。首先，创建项目应用 &nb
[简单]工作记录_多线程相关 53873039oycg 多线程
最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求) 方案一使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回缺点测试发现必须3个接
调试jdk中的源码，查看jdk局部变量程序员是怎么炼成的 jdk 源码
转自：http://www.douban.com/note/211369821/ 学习jdk源码时使用-- 学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。可惜的是sun提供的jdk并不能查看运行中的局部变量
Oracle RAC Failover 详解 aijuans oracle
Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言，是感觉不到这种切换。 Oracle 10g RAC 的Failover 可以分为3种： 1. Client-Si
form表单提交数据编码方式及tomcat的接受编码方式 antonyup_2006 JavaScript tomcat 浏览器互联网 servlet
原帖地址：http://www.iteye.com/topic/266705 form有2中方法把数据提交给服务器，get和post,分别说下吧。（一）get提交 1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:
JS初学者必知的基础百合不是茶 js函数 js入门基础
JavaScript是网页的交互语言,实现网页的各种效果, JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的
iBatis的分页分析与详解 bijian1013 java ibatis
分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最
精通Oracle10编程SQL(15)使用对象类型 bijian1013 oracle 数据库 plsql
/* *使用对象类型 */ --建立和使用简单对象类型 --对象类型包括对象类型规范和对象类型体两部分。 --建立和使用不包含任何方法的对象类型 CREATE OR REPLACE TYPE person_typ1 as OBJECT( name varchar2(10),gender varchar2(4),birthdate date ); drop type p
【Linux命令二】文本处理命令awk bit1129 linux命令
awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。 awk命令用来做什么？ 1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 3.awk实际工
JAVA(ssh2框架)+Flex实现权限控制方案分析白糖_ java
目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。【SSH2权限系统的实现机制】权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使
angular.forEach boyitech AngularJS AngularJS API angular.forEach
angular.forEach 描述: 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)
java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树 bylijinnan 二叉排序树
import java.util.LinkedList; public class CreateBSTfromSortedArray { /** * 题目:给定一个排序数组，如何构造一个二叉排序树 * 递归 */ public static void main(String[] args) { int[] data = { 1, 2, 3, 4,
action执行2次 Chen.H JavaScript jsp XHTML css Webwork
xwork 写道 <action name="userTypeAction" class="com.ekangcount.website.system.view.action.UserTypeAction"> <result name="ssss" type="dispatcher">
[时空与能量]逆转时空需要消耗大量能源 comsci 能源
无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越..... 在进行时空穿梭的实验中,消耗超大规模的能源是必然
oracle的正则表达式(regular expression)详细介绍 daizj oracle 正则表达式
正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。正则表达式中常用到的元数据(metacharacter)如下： ^ 匹配字符串的开头位置。 $ 匹配支付传的结尾位置。 *
报表工具与报表性能的关系 datamachine 报表工具 birt 报表性能润乾报表
在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。一、报表处理的一般过程分析 1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。 2、
初一上学期难记忆单词背诵第一课 dcj3sjt126com word english
what 什么 your 你 name 名字 my 我的 am 是 one 一 two 二 three 三 four 四 five 五 class 班级，课 six 六 seven 七 eight 八 nince 九 ten 十 zero 零 how 怎样 old 老的 eleven 十一 twelve 十二 thirteen
我学过和准备学的各种技术 dcj3sjt126com 技术
语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html
struts2中token防止重复提交表单蕃薯耀重复提交表单 struts2中token
struts2中token防止重复提交表单 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月12日 11:52:32 星期日 ht
线性查找二维数组 hao3100590 二维数组
1.算法描述有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n) 2.使用到的相关知识：结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816） 3.使用数组名传递这个的不便之处很明显，一旦确定就是不能设置列值 //使
spring security 3中推荐使用BCrypt算法加密密码 jackyrong Spring Security
spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt Bcrpt中的salt可以是随机的，比如： int i = 0; while (i < 10) { String password = "1234
学习编程并不难,做到以下几点即可! lampcy java html 编程语言
不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发各种神奇的软件啦。 1、确定目标学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in) nannan408 right join
1.前言。如题。 2.代码 (1)单表查重复数据,根据a分组 SELECT m.a,m.b, INNER JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A GROUP BY a HAVING rank>1 )k ON m.a=k.a （2）多表查询，使用改为le
jQuery选择器小结 VS 节点查找（附css的一些东西） Everyday都不同 jquery css name选择器追加元素查找节点
最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：测试页面： <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen
关于EXT tntxia ext
ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术，由开发人员Jack
一个MIT计算机博士对数学的思考 xjnine Math
在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他