云诗卡达
云诗卡达

pink-移动web开发之流式布局

pink-移动web开发之流式布局_第1张图片

改变行高只是改变上下间距的大小，

pink-移动web开发之流式布局_第2张图片

pink-移动web开发之流式布局_第3张图片

目标：

  1. 知道移动WEB的开发现状
  2. 写出标准的viewport
  3. 使用移动WEB的调试方法
  4. 说出移动端常见的布局方案
  5. 描述流式分布
  6. 独立完成京东移动端首页

1. 移动端基础

pink-移动web开发之流式布局_第4张图片

pink-移动web开发之流式布局_第5张图片

pink-移动web开发之流式布局_第6张图片

pink-移动web开发之流式布局_第7张图片

pink-移动web开发之流式布局_第8张图片

pink-移动web开发之流式布局_第9张图片

2. 视口

pink-移动web开发之流式布局_第10张图片

pink-移动web开发之流式布局_第11张图片

pink-移动web开发之流式布局_第12张图片

pink-移动web开发之流式布局_第13张图片

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

pink-移动web开发之流式布局_第14张图片

3. 二倍图

二倍精灵图做法

  • 先缩小一倍精灵图
  • 量logo尺寸和坐标
  • css中background-size缩小一倍 ：114px auto ; (原来宽度是228)
  • 设置background-position为量出来的坐标点

pink-移动web开发之流式布局_第15张图片

pink-移动web开发之流式布局_第16张图片

image-20210626210727255

pink-移动web开发之流式布局_第17张图片

pink-移动web开发之流式布局_第18张图片

pink-移动web开发之流式布局_第19张图片

pink-移动web开发之流式布局_第20张图片

2014以上版本ps才能安装

4. 移动端开发选择

pink-移动web开发之流式布局_第21张图片

pink-移动web开发之流式布局_第22张图片

pink-移动web开发之流式布局_第23张图片

pink-移动web开发之流式布局_第24张图片

5. 移动端技术解决方案

pink-移动web开发之流式布局_第25张图片

pink-移动web开发之流式布局_第26张图片

pink-移动web开发之流式布局_第27张图片

pink-移动web开发之流式布局_第28张图片

6. 移动端常见布局

pink-移动web开发之流式布局_第29张图片

流式布局

pink-移动web开发之流式布局_第30张图片

pink-移动web开发之流式布局_第31张图片

image-20210626222258345

pink-移动web开发之流式布局_第32张图片

pink-移动web开发之流式布局_第33张图片

image-20210626223213191

pink-移动web开发之流式布局_第34张图片

pink-移动web开发之流式布局_第35张图片

flex布局

使用flex 布局后容器和item都会变成块级元素

   <style>
        a {
            display: flex;
            text-decoration: none;
            width: 100px;
            height: 100px;
            background-color: aqua;
            justify-content: space-around;
            align-items: center;
        }
        span {
            width: 20px;
            height: 20px;
            background-color: blueviolet;
        }
    style>
head>
<body>
    <a href="">
        <span>1span>
        <span>1span>
    a>
body>
pink-移动web开发之流式布局_第36张图片 pink-移动web开发之流式布局_第37张图片

pink-移动web开发之流式布局_第38张图片

image-20210627132154027

pink-移动web开发之流式布局_第39张图片

pink-移动web开发之流式布局_第40张图片

pink-移动web开发之流式布局_第41张图片

pink-移动web开发之流式布局_第42张图片

pink-移动web开发之流式布局_第43张图片

image-20210627140352508

pink-移动web开发之流式布局_第44张图片

image-20210627141001997

pink-移动web开发之流式布局_第45张图片

pink-移动web开发之流式布局_第46张图片

pink-移动web开发之流式布局_第47张图片

pink-移动web开发之流式布局_第48张图片

pink-移动web开发之流式布局_第49张图片

pink-移动web开发之流式布局_第50张图片

可以用百分比20%

pink-移动web开发之流式布局_第51张图片

案例

pink-移动web开发之流式布局_第52张图片

pink-移动web开发之流式布局_第53张图片

image-20210627160057506

pink-移动web开发之流式布局_第54张图片

pink-移动web开发之流式布局_第55张图片

//二倍图
.search::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;

rem+媒体查询适配布局

pink-移动web开发之流式布局_第56张图片

pink-移动web开发之流式布局_第57张图片

pink-移动web开发之流式布局_第58张图片

pink-移动web开发之流式布局_第59张图片

image-20210627233724640

image-20210627235059176

pink-移动web开发之流式布局_第60张图片

image-20210628100003825

pink-移动web开发之流式布局_第61张图片

pink-移动web开发之流式布局_第62张图片

image-20210628103054229

 @media screen and (max-width: 539px)  {
            body {
                background-color: blue;
            }
        }
        @media screen and (min-width: 540px) and (max-width: 969px ) {//可以省略（max-width:969px）效果一样
            body {
                background-color: pink;
            }
        }
        @media screen and (min-width: 970px) {
            body {
                background-color: saddlebrown;
            }
        }

pink-移动web开发之流式布局_第63张图片

小于用max-width,大于用min-width

pink-移动web开发之流式布局_第64张图片

pink-移动web开发之流式布局_第65张图片

pink-移动web开发之流式布局_第66张图片

pink-移动web开发之流式布局_第67张图片

image-20210628123415289

pink-移动web开发之流式布局_第68张图片

pink-移动web开发之流式布局_第69张图片

pink-移动web开发之流式布局_第70张图片

pink-移动web开发之流式布局_第71张图片

pink-移动web开发之流式布局_第72张图片

pink-移动web开发之流式布局_第73张图片

pink-移动web开发之流式布局_第74张图片

pink-移动web开发之流式布局_第75张图片

pink-移动web开发之流式布局_第76张图片

pink-移动web开发之流式布局_第77张图片 pink-移动web开发之流式布局_第78张图片

pink-移动web开发之流式布局_第79张图片

pink-移动web开发之流式布局_第80张图片

pink-移动web开发之流式布局_第81张图片 pink-移动web开发之流式布局_第82张图片

pink-移动web开发之流式布局_第83张图片

pink-移动web开发之流式布局_第84张图片

image-20210628154550482

image-20210628154837090

pink-移动web开发之流式布局_第85张图片

pink-移动web开发之流式布局_第86张图片

pink-移动web开发之流式布局_第87张图片

pink-移动web开发之流式布局_第88张图片

1.rem+less+媒体查询

pink-移动web开发之流式布局_第89张图片

pink-移动web开发之流式布局_第90张图片

我们要做的效果是，在大分辨率的设备下，图片文字显示大一点，小分辨率的设备图片文字显示小一点

  • 页面中的图片、文字不能用绝对单位px写死！，rem是相对单位,相对于根元素html的font-size大小，我们可以在不同的分辨率下改变html的font-size大小就可以实现、文字图片根设备适配的效果了。
  • 那么根元素的font-size要去如何根据分辨率去改变呢？这就要用到媒体查询@media了，
  • 要实现从320分辨率的设备到750px的设备图片文字等比例缩放大小，根元素的font-size不能乱写，要按比例！
  • 例如2px的设备的font-size我们设为1，那么4px的设备的font-size我们就要设为2，320像素的设备/15份=21.33 750像素的设备就也要 / 15 = 50px，所以750px的设备font-size为50px,这样就可以实现等比例！ 当然这个除的分数随便你！
  • 在一张750px的设计稿下量的div的宽度为100px，那我们应该怎么去写呢
  • 首先，等比例的不同分辨率320px和750px的font-size我们已经设好了 分别为 21.33px和50px
  • 根据设计稿，要在750像素的情况下，div要宽高为100px,
  • div的宽高要用rem做单位为了适配
  • 那么在750px的分辨率下 div的宽高要多少rem才能等于100px呢？
  • 就用750分辨率下的html的font-size来运算 100px / 50px = 2 所以div的宽高可以是 2rem
  • 在不同分辨率下，媒体查询改变对应font-size, div的宽高也等比例缩放了

pink-移动web开发之流式布局_第91张图片

pink-移动web开发之流式布局_第92张图片

pink-移动web开发之流式布局_第93张图片

注意html {font-size:50px}要写在最前面，写后面会被层叠掉

pc端也可以访问移动端的网站

pink-移动web开发之流式布局_第94张图片

pink-移动web开发之流式布局_第95张图片

pink-移动web开发之流式布局_第96张图片

pink-移动web开发之流式布局_第97张图片

// 搜索模块
.search-content {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: (88rem / @baseFont);
    width: 15rem;
    background-color: #FFC001;
}

2.flexible.js +rem

pink-移动web开发之流式布局_第98张图片

pink-移动web开发之流式布局_第99张图片

pink-移动web开发之流式布局_第100张图片

image-20210628233819741

pink-移动web开发之流式布局_第101张图片

pink-移动web开发之流式布局_第102张图片

使用时，当屏幕大于750px,font-size还是会跟随屏幕来放大

pink-移动web开发之流式布局_第103张图片

现在还是不行，还是超过750px

pink-移动web开发之流式布局_第104张图片

样式被覆盖了

pink-移动web开发之流式布局_第105张图片

解决方法：提高权重

pink-移动web开发之流式布局_第106张图片

响应式布局

一套页面可以适配三种设备手机、PC、ipad

pink-移动web开发之流式布局_第107张图片

pink-移动web开发之流式布局_第108张图片

pink-移动web开发之流式布局_第109张图片

pink-移动web开发之流式布局_第110张图片

pink-移动web开发之流式布局_第111张图片

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 超小屏幕下 小于 768 布局容器的宽度为 100% */
        @media screen and (max-width:767px ){
            .container {
                width: 100%;
            }
        }
        /* 小屏幕下 大于等于768 布局容器改为 750 px */
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }
        /* 中等屏幕 大于992px 布局容器设置为 970px */
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }
        /* 大屏幕 大于1200px 布局容器宽度设置为1170px */
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
        .container ul li {
            float: left;
            width: 11.11%;
            height: 30px;
            list-style: none;
            text-align: center;
            background-color: green;
        }
        @media screen and (max-width:767px) {
            .container ul li {
                width: 33.33%;
            }
        }
    style>
head>
<body>
    <div class="container">
        <ul>
            <li>导航栏li>
            <li>导航栏li>
            <li>导航栏li>
            <li>导航栏li>
            <li>导航栏li>
            <li>导航栏li>
            <li>导航栏li>
            <li>导航栏li>
            <li>导航栏li>
        ul>
    div>

pink-移动web开发之流式布局_第112张图片

pink-移动web开发之流式布局_第113张图片

image-20210630155900775

pink-移动web开发之流式布局_第114张图片

pink-移动web开发之流式布局_第115张图片

pink-移动web开发之流式布局_第116张图片

image-20210630162750290

pink-移动web开发之流式布局_第117张图片

pink-移动web开发之流式布局_第118张图片

pink-移动web开发之流式布局_第119张图片

pink-移动web开发之流式布局_第120张图片

pink-移动web开发之流式布局_第121张图片

pink-移动web开发之流式布局_第122张图片

pink-移动web开发之流式布局_第123张图片

image-20210630213559314

pink-移动web开发之流式布局_第124张图片

pink-移动web开发之流式布局_第125张图片

pink-移动web开发之流式布局_第126张图片

pink-移动web开发之流式布局_第127张图片

移动端布局总结

pink-移动web开发之流式布局_第128张图片

vw vh移动端布局

pink-移动web开发之流式布局_第129张图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s4u5KZUC-1628409911062)(C:\Users\KAN\AppData\Roaming\Typora\typora-user-images\image-20210701211031565.png)]

pink-移动web开发之流式布局_第130张图片

pink-移动web开发之流式布局_第131张图片

pink-移动web开发之流式布局_第132张图片

pink-移动web开发之流式布局_第133张图片

pink-移动web开发之流式布局_第134张图片
pink-移动web开发之流式布局_第135张图片

你可能感兴趣的:(前端学习笔记,html,css,css3,web)

  • rrweb 集成方案 @井九 java
    ️总体架构概览️前端录制SDK封装1.安装依赖npminstallrrweblz-string2.封装录制逻辑（rrweb-recorder.ts）import{record}from'rrweb';import{compressToUTF16}from'lz-string';letevents:any[]=[];exportfunctionstartRecording(sessionId:str
  • 【合集】Qt Widgets Designer 手册（中译版） LSssT. QtWidgetsDesigner手册【中译版】qt开发语言
    官网链接：https://doc.qt.io/qt-6/qtdesigner-manual.htmlQtWidgetsDesigner手册QtWidgetsDesigner是使用QtWidgets设计和构建图形用户界面（GUI）的Qt工具。有关使用QtQuick的用户界面设计，请参阅QtDesignStudio。您可以采用所见即所得（W-Y-S-I-W-Y-G,whatyouseeiswhatyo
  • HTTP 协议深入理解 大曰编程 java面试http网络协议网络
    在Web服务与API设计中，HTTP协议是客户端与服务器通信的基石。本文从协议演进、核心机制、缓存策略、安全特性及面试高频问题五个维度，系统解析HTTP的底层原理与工程实践。一、HTTP协议演进与版本差异1.1版本特性对比版本发布年份核心改进局限性HTTP1.01996基础请求-响应模型，支持GETPOSTHEAD方法无持久连接，每次请求需建立TCP连接HTTP1.11999持久连接（Connec
  • 音视频会议服务搭建(设计方案)-01 卜锦元 音视频webrtcgolang流媒体websocket音视频
    前言最近在做音视频会议系统服务搭建的工作任务，因为内容过多，我会逐篇分享相关的设计方案、开发思路、编程语言、使用的组件集合等等。如果你也有大型音视频会议系统搭建架构的需求，希望这些可以对你有所帮助。EchoMeet音视频会议系统架构设计项目概述EchoMeet是基于WebRTC技术的企业级音视频会议解决方案，采用三层音视频架构和Go+Node.js双后端微服务设计，实现了高并发、低延迟、可扩展的视
  • 我的所有的浏览器被hao123 挟持了，终极解决方案
    参考https://www.cnblogs.com/BensonLaur/p/13731310.html解决最近我给我的老电脑安装系统在我这台电脑做了启动盘，之后我的每个浏览器点开就是hao123的主页，而后我用了360和腾讯杀毒我发现都不好使于是乎，我研究了一下我的浏览器启动执行命令chrome://version/。我发现在在执行命令行中多了一句这样的代码.于是乎我判断我的浏览器真的被挟持了。
  • 解锁数据潜能——亮数据Web数据集，精准、全面、即时 程序猿追 其他领域嵌入式效率性能优化科技计算机外设
    解锁数据潜能——亮数据Web数据集，精准、全面、即时在数据驱动的时代，获取高质量的网络数据成为许多企业与研究机构的核心需求。亮数据推出的Web数据集产品，试图通过技术手段解决传统数据采集中的痛点，为使用者提供更高效的数据支持方案。该数据集的核心优势体现在三个维度：数据精准度、覆盖全面性和更新即时性。在精准度方面，通过动态IP网络与智能解析算法的结合，有效降低了传统爬虫常遇到的反爬干扰，使获取的数据
  • 打造一个可维护、可复用的前端权限控制方案（含完整Demo） web
    摘要在现代Web应用中，权限控制已经不再是“后端的事”。随着前后端分离、单页应用（SPA）流行，前端权限控制逐渐成为用户体验和系统安全的双重关键。如果只靠后端控制，前端体验太差；如果只靠前端控制，那就等于裸奔。怎么权衡？怎么落地？这就是本文要探讨的重点。引言你是否遇到过：不同用户登录后看到的菜单不同、某些按钮灰了点不了、访问一些页面会自动跳转403页面？这都来自于“前端权限控制”的精细化设计。现在
  • Web 服务器架构选择深度解析 后端
    在Web服务与API设计中，服务器架构的选择直接决定系统的可扩展性、维护成本与性能上限。本文从架构演进脉络出发，系统解析单体架构、微服务、服务网格、Serverless等主流架构的核心特性、适用场景及Java技术栈实现。一、架构演进与核心分类1.1架构演进脉络1.2核心架构对比表架构类型核心特点典型技术栈（Java）部署复杂度扩展性单体架构所有功能模块打包为单一应用，共享数据库SpringBoot
  • 如何在VUE中播放RTSP 实时视频，延迟要小于300毫秒？
    近期研究在VUE中播放RTSP实时视频，客户要求延迟低于300毫秒，并且要求支持多路同时播放，支持H.265格式视频，比较了下目前市场上常见的几种方案，以供大家参考！一、海康威视官方WEB解决方案：海康威视官方提供了两种WEB解决方案，即无插件方案和有插件方案。1.无插件方案实际采用的是服务器转码推流的方式，因为需要转码两次，导致延迟比较高，多路播放或者播放高清视频容易卡顿或者花屏，无法满足客户需
  • 基于Vue.js的图书管理系统前端界面设计的javascript逻辑部分
    前文，我们实现了一个使用Vue3构建的图书管理系统的html部分，接下来我们看一下JavaScript逻辑部分。html部分以及整个系统的完整代码可以查看我的文章：基于Vue.js的图书管理系统前端界面设计-CSDN博客一、Vue3简介Vue3是渐进式JavaScript框架Vue.js的第三个主要版本，它延续了Vue易于上手、灵活性高和高效的特点，并在性能、可维护性和开发体验上进行了显著提升。（
  • 服务导向架构：SOA深入指南与实践 夏勇兴
    本文还有配套的精品资源，点击获取简介：服务导向架构（SOA）是一种面向服务的分布式系统设计方法论。本书深入剖析了SOA的核心概念、设计原则、实现技术和面临的挑战。涵盖服务、接口、注册、通信协议和治理机制，同时讨论了设计时需遵循的松耦合、自治性、可重用、互操作性和业务驱动原则。实现技术包含Web服务、ESB、消息队列、微服务架构、API管理和服务编排等。本书也探索了SOA带来的灵活性、集成性、重用性
  • 阿里云一句话语音识别
    前端：阿里云语音识别应用（一句话语音识别）{{isRecording?'停止录音':'开始录音'}}识别结果:{{recognitionResult}}WebSocket状态:{{websocketStatus}}使用的音频格式:{{usedMimeType}}import{ref,onMounted,onUnmounted}from'vue'//状态管理constisRecording=ref(
  • 基于Rust编写数独、deepseek调用、Mis系统 KENYCHEN奉孝 Rustrust开发语言后端
    Rust是开发人员最流行的语言之一，因为它具有开源、快速、可靠和高性能的特点。在Rust中构建新的API时，重要的是要考虑Web框架对前端和后端开发的优缺点。在本文中，我们将讨论什么是Web框架，并探索Rust生态系统中用于前端和后端开发的各种Web框架，排名不分先后。让我们开始吧。Rust编写Web版本得数独游戏开发环境配置确保安装Rust工具链和Cargo包管理器，推荐使用rustup安装最新
  • FaaS（功能即服务） KENYCHEN奉孝 自动化测试
    FaaS简介—一种云计算服务，使云应用程序开发人员可以更轻松地运行和管理微服务应用程序。什么是FaaS（功能即服务）？FaaS（功能即服务）是一种云计算服务，它允许您执行代码以响应事件，而无需通常与构建和启动微服务应用程序相关的复杂基础设施。在Internet上托管软件应用程序通常需要配置和管理虚拟或物理服务器以及管理操作系统和Web服务器托管进程。使用FaaS，物理硬件、虚拟机操作系统和Web服
  • vue文本插值 翻滚吧键盘 vuevue.jsjavascriptecmascript
    好的，我们来详细讲解Vue中最基础的数据展示方式：文本插值和在其内部使用的JavaScript表达式。1.文本插值(TextInterpolation)知识点:文本插值是Vue中最基本的数据绑定形式。它使用“Mustache”语法（双大括号{{}}）将数据直接渲染到HTML的文本内容中。核心作用:将Vue实例中setup函数返回的数据，动态地显示在页面的指定位置。响应式:当大括号内所依赖的数据发生
  • Springboot实现后台图片上传
    文章目录整体流程概览后端实现细节1.文件上传控制器(`UploadController.java`)2.静态资源服务控制器(`StaticResourceController.java`)演示总结本文将深入探讨一个标准的Web应用后台管理系统中，图片上传功能的完整实现流程。我们将从前端用户交互开始，一直到后端的文件处理、存储和最终的URL返回。整体流程概览图片上传功能的核心流程可以分为以下几个步骤
  • Django ઈ一笑ഒ django
    1.Django和Tornado的关系Django是一个高级PythonWeb框架，它鼓励快速开发和干净、实用的设计。Django遵循MVC（模型-视图-控制器）设计模式的一个变种，称为MTV（模型-模板-视图）。Django框架提供了大量的“开箱即用”功能，包括：ORM（对象关系映射），让数据库操作变得简单。丰富的模板系统，用于快速生成动态网页。强大的表单系统，简化用户输入和验证过程。认证系统、
  • 进阶向:Django入门,从零开始构建一个Web应用 nightunderblackcat Python进阶djangopython后端
    一、Django是什么？想象你建房子需要砖头、水泥、设计图...Django就是Python的Web框架工具箱，它帮你准备好了：数据库管理用户登录系统网页模板引擎安全防护（防黑客攻击）你只需专注"盖房子"（业务逻辑），不用从烧砖开始！二、环境准备（5分钟搞定）安装Python官网下载Python3.8+：python.org安装时勾选AddPythontoPATH安装Django打开命令行（Win
  • Vue3 首款 3D 数字孪生编辑器 ❀͜͡傀儡师 3d编辑器
    对于多数前端开发者而言，用ThreeJS打造炫酷的数字孪生场景并不容易，需掌握大量专业知识。现在这个基于Vue3、ThreeJS和NaiveUI的数字孪生开发框架——Astral3DEditor正式开源，为Web3D开发带来新转机。Astral3DEditor的在这里插入图片描述1.优势功能丰富：支持多种3D模型格式，可导入导出多类型模型，方便资源整合。它还提供插件系统，可扩展更多功能。同时，支持
  • OpenBayes 一周速览丨OmniGen2「双轨架构」实现文本/图像分工协作，效果直逼GPT-4O
    公共资源速递4个公共数据集：ReasonMed医学推理数据集Miriad-5.8M医学问答数据集WebClick网页理解基准数据集OCRBench文本识别基准数据集2个公共模型：MiniCPM4-8BKimi-Dev-72B-GGUF9个公共教程：深度估计*23D生成*3图像生成与处理*4访问官网立即使用：openbayes.com公共数据集ReasonMed医学推理数据集ReasonMed数据集
  • JavaScript性能优化实战：表格控件高效开发指南 javascript
    引言在现代Web应用开发中，电子表格功能已成为数据分析、报表展示等场景的核心需求。SpreadJS作为一款高性能的纯前端电子表格控件，能够完美兼容Excel文件格式，支持百万级数据量和复杂公式计算。然而随着数据规模的增长和业务逻辑的复杂化，性能优化成为开发者必须面对的挑战。本文将深入剖析几种SpreadJS性能优化技巧，通过实际案例和代码演示，帮助开发者构建响应迅速、用户体验优异的电子表格应用。正
  • 前端--深入理解HTTP协议 菜鸡想成为大佬 前端前端http网络协议
    HTTP协议简介HTTP（HyperTextTransferProtocol，超文本传输协议）是一个应用层协议，用于在客户端（通常是浏览器）和服务器之间传输超文本数据（如HTML、CSS、JavaScript等）。它是万维网（WorldWideWeb）的核心协议，通过HTTP，用户能够在浏览器中访问网站。HTTP的特点无状态：HTTP协议是无状态协议，即服务器不会自动保存每次请求之间的上下文信息。
  • 原生html页面弹窗_JavaScript 弹窗 weixin_39598584 原生html页面弹窗
    JavaScript弹窗可以在JavaScript中创建三种消息框：警告框、确认框、提示框。警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法window.alert("sometext");window.alert()方法可以不带上window对象，直接使用alert()方法。实例functionmyFunction(){alert("你好，
  • 原生html页面弹窗_html 页面弹窗 weixin_39609483 原生html页面弹窗
    第一种：alertalert("hello!")第二种：window.confirm()A:弹出窗口returntrue;}else{//alert("取消");returnfalse;}第三种：promptprompt方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框vartheResponse=window.prompt("欢迎？","请在此输入您的姓名。");页面代码测试fun
  • html5 原生 弹窗,HTML5 Popmotion.js实现的弹窗控件 weixin_39564527 html5原生弹窗
    JavaScript语言：JaveScriptBabelCoffeeScript确定const{css,transform,chain,delay,tween,easing,parallel}=window.popmotion;const{interpolate}=transform;lettrigger;letisClosing=false;//SelectDOMconstmodalTrigge
  • [ 渗透测试面试篇 ] 渗透测试面试题大集合(详解)（4-2）XSS注入相关面试题 寒蝉听雨[原ID_PowerShell] 面试总结渗透测试自学篇渗透测试面试分享渗透测试升职加薪网络安全XSS注入面试题网络安全面试题1024程序员节
    博主介绍‍博主介绍：大家好，我是_PowerShell，很高兴认识大家~✨主攻领域：【渗透领域】【数据通信】【通讯安全】【web安全】【面试分析】点赞➕评论➕收藏==养成习惯（一键三连）欢迎关注一起学习一起讨论⭐️一起进步文末有彩蛋作者水平有限，欢迎各位大佬指点，相互学习进步！渗透方向的岗位，涉及到的知识点是很广泛的。这里我总结了整个一系列的面试题，可能没有覆盖到全部的知识面，但是应该是比较全面的
  • py每日spider案例之某website之古籍搜索 我不是程序员~~~~ 爬虫项目实战py
    importrequestsheaders={"accept":"application/json,text/plain,*/*","accept-language":"zh-CN,zh;q=0.9","cache-control":"no-cache","cont
  • 玄机-linux实战-挖矿 无中生章 linux运维服务器
    玄机-linux实战-挖矿一，前言应急响应工程师在内网服务器发现有台主机cpu占用过高，猜测可能是中了挖矿病毒，请溯源分析，提交对应的报告给应急小组虚拟机账号密码rootwebsecyjxyweb端口为8081二，介绍1、黑客的IP是？flag格式：flag{黑客的ip地址}，如：flag{127.0.0.1}2、黑客攻陷网站的具体时间是？flag格式：flag{年-月-日时:分:秒}，如：fla
  • Python爬虫网安-beautiful soup+示例
    目录beautifulsoup:解析器：节点选择器：嵌套选择：关联选择：子节点：子孙节点：父节点：祖先节点：兄弟节点：上一个兄弟节点：下一个兄弟节点：后面所有的兄弟节点：前面所有的兄弟节点：方法选择器：CSS选择器：beautifulsoup:bs4用于解析htmlandxml文档解析器：html.parser、lxml解析器和XML的内置解析器文档遍历：跟xpath差不多，也是整理成树形结构搜索
  • vue路由，本地存储，刷新页面（学习心得） 2301_78876497 vue.js前端javascript
    简介：在使用vue单独做一个网站时，会使用到路由和本地存储，这次主要介绍我在学习路由和本地存储使用到的一种方法。路由：vue里面的路由类似于html内的a标签，使用前需要导入路由的包；这个一般使用了路由后会自动导入的，可以去main.js内查看是否有router的包导入。那么使用路由可以有三种方法:第一种：使用name+params的方法，这里的name是index.js内路由的namethis.
  • windows下源码安装golang 616050468 golang安装golang环境windows
             系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系
  • redis批量删除带空格的key bylijinnan redis
    redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
  • oracle正则表达式的用法 0624chenhong oracle正则表达式
      方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
  • 2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
    2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
  • jquery内部链式调用机理 换个号韩国红果果 JavaScriptjquery
    只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
  • 你订酒店时的每一次点击 背后都是NoSQL和云计算 蓝儿唯美 NoSQL
    全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
  • java笔记1 a-john java
    1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性：     3.1 万物皆为对象。    
  • C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一） aijuans C/C++求职面试必备考点
            找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
  • 程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
          编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好，但是就不代
  • Activity的四种启动模式 百合不是茶 android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
    android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo
  • Spring中@Autowired标签与@Resource标签的区别 bijian1013 javaspring@Resource@Autowired@Qualifier
    Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo
  • Changes Between SOAP 1.1 and SOAP 1.2 sunjing ChangesEnableSOAP 1.1SOAP 1.2
    JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL
  • 【Hadoop二】Hadoop常用命令 bit1129 hadoop
    以Hadoop运行Hadoop自带的wordcount为例，   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级
  • java异常处理（初级） 白糖_ javaDAOspring虚拟机Ajax
    从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
  • 记录整理-工作问题 braveCS 工作
    1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
  • org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
    刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
  • 读书笔记-4 chengxuyuancsdn 读书笔记
    1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个， 学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
  • [物理与电子]半导体教材的一个小问题 comsci 问题
          各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个
  • Flashback Database --闪回数据库 daizj oracle闪回数据库
    Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
  • 简单排序:插入排序 dieslrae 插入排序
    public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
  • C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
    # include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
  • centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
    方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
  • 线程池(Executors) shuizhaosi888 线程池
    在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub
  • openstack 快速安装笔记 haoningabc openstack
    前提是要配置好yum源 版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
  • 从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
    1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 专门在
  • 如何让那个一个div可以拖动 lingfeng520240 html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
  • 第10章 高级事件（中） onestopweb 事件
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • 计算两个经纬度之间的距离 roadrunners 计算纬度LBS经度距离
    要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
  • 最具争议的10个Java话题 tomcat_oracle java
    1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。 　 　2、Java 9 即将到来 　　 Oracle早在8月份就发布
  • zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
    题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他