库库好困
库库好困

前端移动Web第一天：流式布局-京东首页案例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <link rel="stylesheet" href="CSS/normalize.css">
    
    <link rel="stylesheet" href="CSS/index.css">
    <title>京东首页title>

head>
<body>
    
    <header class="app">
        <ul>
            <li>
                <img src="images/close.png" alt="">
            li>
            <li>
                <img src="images/logo.png" alt="">
            li>
            <li>打开京东APP，购物更轻松li>
            <li>立即打开li>
        ul>
    header>

    
    <div class="search-wrap">
        <div class="search-btn">div>
        <div class="search">
            <div class="jd-icon">div>
            <div class="sou">div>
        div>
        <div class="search-login">登录div>
    div>

    
    <div class="main-content">div>
    
    <div class="slider">
        <img src="upload/banner.dpg" alt="">
    div>

    
    <div class="brand">
        <div>
            <a href="#">
                <img src="upload/pic11.dpg" alt="">
            a>
        div>
        <div>
            <a href="#">
                <img src="upload/pic22.dpg" alt="">
            a>
        div>
        <div>
            <a href="#">
                <img src="upload/pic33.dpg" alt="">
            a>
        div>
    div>
    
    <nav> 
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京东超市span>
        a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市span>
        a>
    nav>

    
    <div class="news">
        <a href="#">
            <img src="upload/new1.dpg" alt="">
        a>
        <a href="#">
            <img src="upload/new2.dpg" alt="">
        a>
        <a href="#">
            <img src="upload/new3.dpg" alt="">
        a>
    div>
body>
html>

body {
     
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    color: #666;
    /* 苹果字体： */
    font-family: -apple-system, Arial, Helvetica, sans-serif;
    background-color: #ccc;
}
a {
     
    color: #666;
    text-decoration: none;
}
/* 图片去除空白缝隙： */
img {
     
    vertical-align: top;
}

/* 头部：  */
ul {
     
    margin: 0;
    padding: 0;
    list-style: none;
}
.app {
     
    height: 45px;
}
.app ul li {
     
    float: left;
    height: 45px;
    background-color: #333333;
    text-align: center;
    line-height: 45px;
    color: #fff;
}
.app ul li:nth-child(1) {
     
    width: 8%;
}
.app ul li:nth-child(1) img {
     
    width: 10px;
}
.app ul li:nth-child(2) {
     
    width: 10%;
}
.app ul li:nth-child(2) img {
     
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3) {
     
    width: 57%;
}
.app ul li:nth-child(4) {
     
    width: 25%;
    background-color: #F63515;
}


/* 搜索框： */
.search-wrap {
     
    position: fixed;
    width: 100%;
    height: 44px;
    /* 解决外边距合并问题： */
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;
}
.search-btn {
     
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before {
     
    content: "";
    /* 因为是行内元素，所以必须加： */
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search {
     
    position: relative;
    margin: 0 50px;
    height: 30px;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 7px;
}
.search-login {
     
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
}
.jd-icon {
     
    width: 20px; 
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
    background-size: 20px 15px;
}
.jd-icon::after {
     
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
    position: absolute;
    right: -8px;
    top: 0;
}
.sou {
     
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images/jd-sprites@2x.png) no-repeat -81px 0;
    background-size: 200px auto;
}


/* 滑动图： */
.slider img {
     
    width: 100%;
}

/* 品牌日： */
.brand {
     
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div {
     
    float: left;
    width: 33.33%;
}
.brand div img {
     
    width: 100%;
}

/* nav部分： */
nav {
     
    overflow: hidden;
    padding-top: 5px;
}
nav a {
     
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
     
    width: 40px;
    margin: 10px 0;
}
nav a span {
     
    display: block;
}


/* 新闻模块： */
.news {
     
    overflow: hidden;
    margin-top: 20px;
}
.news img {
     
    width: 100%;
}
.news a {
     
    float: left;
    box-sizing: border-box;
}
.news a:nth-child(1) {
     
    width: 50%;
}
.news a:nth-child(2),
.news a:nth-child(3) {
     
    width: 25%;
    border-left: 1px solid #ccc;
}

前端移动Web第一天：流式布局-京东首页案例_第1张图片

第二种：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东购物title>
    <link rel="icon" href="favicon.ico" />
    <link rel="stylesheet" href="CSS/index.css">
head>
<body>
    
    <header class="header">
        <a href="#"><img src="images/close.png" alt="">a>
        <a href="#"><img src="images/logo.png" alt="">a>
        <a href="#">打开京东APP，购物更轻松a>
        <a href="#">立即打开a>
    header>
    
    <div class="search">
        <a href="#" class="search-l">
            <img src="images/s-btn.png" alt="">
        a>
        <div class="search-c">div>
        <a href="#" class="search-r">登录a>
    div>
    
    <div class="banner">
        <a href="#">
            <img src="upload/banner.dpg" alt="">
        a>
    div>
    
    <div class="brand">
        <a href="#"><img src="upload/pic11.dpg" alt="">a>
        <a href="#"><img src="upload/pic22.dpg" alt="">a>
        <a href="#"><img src="upload/pic33.dpg" alt="">a>
    div>
    
    <div class="nav">
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
        <a href="#"><img src="upload/nav1.webp" alt="">京东超市a>
    div>
    
    <div class="sale">
        <a href="#"><img src="upload/new1.dpg" alt="">a>
        <a href="#"><img src="upload/new2.dpg" alt="">a>
        <a href="#"><img src="upload/new3.dpg" alt="">a>
    div>
    
    <div class="footer">
        <a href="#"><img src="images/index-icon.png" alt="">a>
        <a href="#"><img src="images/sort-icon.png" alt="">a>
        <a href="#"><img src="images/618-icon.png" alt="">a>
        <a href="#"><img src="images/cart-icon.png" alt="">a>
        <a href="#"><img src="images/center-icon.png" alt="">a>
    div>
body>
html>

*{
     
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a{
     
    text-decoration: none;
    color: #666;
}

/* 公共样式初始化 */
body{
     
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
}


/* 头部区域 */
.header{
     
    overflow: hidden;
    height: 44px;
    background-color: black;
}
.header a{
     
    float: left;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 16px;
}
.header a:nth-child(1){
     
    width: 8%;
}
.header a:nth-child(1) img{
     
    width: 10px;
    height: 10px;
}
.header a:nth-child(2){
     
    width: 10%;
}
.header a:nth-child(2) img{
     
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.header a:nth-child(3){
     
    width: 57%;
}
.header a:nth-child(4){
     
    width: 25%;
    background-color: red;
}


/* 搜索框区域 */
.search{
     
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    height: 45px;
    background-color: orange;
    position: fixed;
}
.search a{
     
    width: 40px;
    height: 45px;
    background-color: pink;
    position: absolute;
    top: 0;
    line-height: 45px;
    text-align: center;
    color: #fff;
}
.search .search-l{
     
    left: 0;
}
.search .search-l img{
     
    width: 20px;
    height: 16px;
}
.search .search-c{
     
    height: 30px;
    background-color: #fff;
    margin: 0 45px;
    border-radius: 15px;
    margin-top: 7px;
}
.search .search-r{
     
    right: 0;
}


/* 大banner区域 */
.banner a img{
     
    width: 100%;
}


/* 小banner区域 */
.brand{
     
    width: 100%;
    overflow: hidden;
}
.brand a{
     
    width: 33.33%;
    float: left;
}
.brand a img{
     
    width: 100%;
}


/* 导航栏区域 */
.nav{
     
    overflow: hidden;
    background-color: #ccc;
    padding-top: 10px;
    margin-bottom: 10px;
}
.nav a{
     
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: 10px;
}
.nav a img{
     
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto;
}


/* 每日抽奖区域 */
.sale{
     
    width: 100%;
    overflow: hidden;
}
.sale a{
     
    float: left;
    width: 25%;
}
.sale a:nth-child(1){
     
    width: 50%;
}
.sale a:nth-child(2){
     
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.sale a img{
     
    width: 100%;
}


/* 底部导航栏 */
.footer{
     
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    position: fixed;
    height: 50px;
    background-color: orange;
    bottom: 0px;
}
.footer a{
     
    float: left;
    width: 20%;
    text-align: center;
    padding-top: 5px;
}
.footer a img{
     
    width: 57px;
    height: 44px;
}

前端移动Web第一天：流式布局-京东首页案例_第2张图片

你可能感兴趣的:(一：移动WEB学习（看视频）,css,html)

  • 按照时间排序的分布式游标分页 像云~ 记录分布式
    背景最近有这么一个需求，就是在分页查询的时候，需要返回最近的pagesize条记录，即按照时间倒序的近pagesize条记录。有两个问题：一个就是这些记录来自于不同的存储位置，不能通过一次查询统一排序取数据，而需要分开查询读入，再汇总统一排序另一个就是在进行分页的时候，要保证当前页数据与上一页的连贯性，有点类似刷短视频的瀑布流。即分页查询是统一的，而数据存储是分布式的。方案由于是在高并发的场景下，
  • 多线程保证并发顺序执行的细节&3个线程轮流打印1-10 像云~ 求职javajvm面试
    多线程保证并发顺序执行的细节背景  一个公共类存储互斥资源(3方法，分别打印1，2，3)，基于同一个该类实例，创建三个并发线程t1，t2，t3，t1调用实例的printFirst()方法打印1，t2调用实例的printSecond()方法打印2，t3调用实例的printThird()方法打印3，如何保证三个并发线程顺序执行成功打印出1，2，3呢？实现  这个问题思路很简单，在JUC当中属于入门级别
  • 程序员别再用GitHub了！这个国产神器让你的开发效率原地起飞 后端
    去年这个时候，我还在为团队协作的代码管理头疼不已。直到某天凌晨三点，盯着满屏的Git指令的我突然发现，自己居然把feature分支合并到了生产环境——这个要命的失误让我在茶水间被同事调侃了整整三个月。就在我准备写辞职信的时候，一个偶然的机会让我遇到了DeepSeek，这个国产开发神器彻底改变了我的职业生涯。你可能很难想象，现在我的团队每天要处理200多个合并请求，但再也没出现过那次凌晨三点的事故。
  • 颜色一次性 wyz_666666 c++
    今天实在想不出做什么了，翻了翻小游戏，看到了原创的颜色一次性于是，就想到何不做这个呢???废话不多说，上代码！！！！！#include#includeusingnamespacestd;intmain(){cout>yanse;if(yanse==1){cout<<"跳转中......"<
  • windows下使用vscode+cline插件体验MCP，体验使用AI控制浏览器，踩坑记录（至少让你节省3个小时弯路版）（喂饭级别） 几道之旅 人工智能智能体及数字员工windowsvscodeide人工智能
    为什么网上天天说MCP，你这儿却一点动静都没有？1️⃣人家很早之前就用上了制定标准的Claudedesktop，这玩意儿在咱这儿用不了。对策：使用vscode+cline+deepseek（或其它同级别国产大模型deepseek-V3其实有时比R1效果还好）2️⃣人家也Claude，但人家能用Cursor，咱太穷了，用不了。对策：使用vscode+cline+deepseek（或其它同级别国产大模
  • 深入学习 DNS 域名解析 dns解析
    一、前言在平时工作中相信大家都离不开DNS解析，因为DNS解析是互联网访问的第一步，无论是使用笔记本浏览器访问网络还是打开手机APP的时候，访问网络资源的第一步必然要经过DNS解析流程。二、DNS是什么DNS（域名系统DomainNameSystem），它是一个记录域名和Ip地址相互映射的一个系统，是互联网的“电话簿”，负责将人类可读的域名（如example.com）转换为机器可识别的IP地址（如
  • 项目管理软件的十大核心功能，一文解读！ 项目管理
    一、项目管理软件必备的十大功能任务管理任务管理是项目管理的基石。以一个新产品发布项目为例，你可以为每个阶段创建独立任务，如市场调研、产品设计、开发和测试，并为团队成员分配责任。甘特图甘特图是在视觉上查看项目进度的最佳工具之一。通过条形图的方式来显示项目时间安排，使项目经理可以清晰地看到任务的起始和结束日期。例如，当计划一个产品发布周期时，甘特图可以帮助确定各项任务的进展，并有助于提前识别和解决潜在
  • 如何在MySQL中创建定时任务？ 数据库mysql
    在mysql中我们可以可以通过事件调度器(EventScheduler)，让MySQL定时为我们执行一些任务。例如：在MySQL中实现每天凌晨0点定时清空指定的test表，并在一个月后自动停止该定时任务。以下是完整步骤：步骤1：启用MySQL事件调度器默认情况下事件调度器可能关闭，需手动启用：--临时启用（重启失效）SETGLOBALevent_scheduler=ON;--永久启用（修改配置文件
  • 使用sqlite创建数据库 @云初 sqlite数据库database
    使用sqlite创建数据库#sqlite3.exe数据库名.dbSQLiteversion3.36.02021-06-1818:36:39Enter".help"forusagehints.sqlite>在sqlite里面创建一张表并添加数据#.databases#.tables#createtableperson(idint,namevarchar(20),addressvarchar(20))
  • OpenTiny技术直播讲师招募：与开源同行，点亮技术影响力！ 前端组件化低代码开源
    OpenTiny企业级前端开发解决方案，正在寻找热爱分享的技术达人！加入我们的直播讲师团，与众多开发者一起分享你的经验，推动技术普惠，同时打造个人技术影响力！报名链接：https://www.wjx.cn/vm/tw7FOgC.aspx#
  • Websoft9 开源软件实操平台：快速积累企业级软件技能，深入理解真实业务场景 开源创业
    引言：打破“纸上谈兵”的实训困境当前高校技术教育普遍面临一个矛盾：学生对开源工具的理论知识掌握充分，但在真实业务场景中常因环境配置复杂、工具链割裂而难以落地。例如，部署一套完整的电商系统需协调数据库、服务器、安全策略等多环节，传统虚拟机环境难以模拟企业级复杂度。Websoft9作为开源软件自动化部署工具，通过预集成200+企业级应用模板（如GitLab、Odoo、Jenkins）和全流程管理能力，
  • Python自动化运维开发系列—CICD项目 weixin_46240874
    导语都忘记是什么时候知道python的了，我是搞linux运维的，早先只是知道搞运维必须会shell,要做一些运维自动化的工作，比如实现一些定时备份数据啊、批量执行某个操作啊、写写监控脚本什么的。后来发现工作量大的时候shell开始变慢，实现某个功能使用shell感觉力不从心，听人说python能实现shell能做的一切功能，而且开发效率高，速度快，慢慢的就认识了python,多多少少看点简单的东
  • 企业数据存储的几种方式对比 存储
    在当今信息化时代，企业常见的数据存储方式包括本地存储、云存储、网络附加存储（NAS）、对象存储等，它们在安全性、扩展性与成本方面各有优势。其中，云存储凭借高弹性、低维护成本等特点备受青睐。它利用网络将数据托管于远程服务器，企业无需自建机房，也能快速扩容并进行全球化部署，极大降低了初期投入成本。这种方式实现了随用随付、自动备份，为众多中小型企业提供了便捷且经济的选择。一、本地存储本地存储是指企业将数
  • 前端架构 —— 脚手架的本地调试方法 mask-li 前端
    脚手架本地link标准流程链接本地脚手架：cdyour-cli-dirnpmlink在当前node全局依赖中创建一个脚手架并且指向文件目录，而且会创建一个可执行文件链接本地库文件：cdyour-lib-dirnpmlinkcdyour-cli-dirnpmlinkyour-lib取消链接本地库文件：cdyour-lib-dirnpmunlinkcdyour-cli-dirnpmunlinkyour
  • 深度革命：ResNet 如何用 “残差连接“ 颠覆深度学习 安意诚Matrix 机器学习笔记深度学习人工智能
    一文快速了解ResNet创新点在深度学习的历史长河中，2015年或许是最具突破性的一年。这一年，微软亚洲研究院的何恺明团队带着名为ResNet（残差网络）的模型横空出世，在ImageNet图像分类竞赛中以3.57%的错误率夺冠，将人类视觉的识别误差（约5.1%）远远甩在身后。更令人震撼的是，ResNet将神经网络的深度推至152层，彻底打破了"深层网络无法训练"的魔咒。这场革命的核心，正是一个简单
  • 乐观锁与悲观锁的 MyBatis-Plus 实现 drebander mybatis-plusmybatis
    在高并发场景下，数据库的并发控制是确保数据一致性的关键。乐观锁和悲观锁是两种常见的并发控制机制，它们分别适用于不同的场景。MyBatis-Plus提供了对乐观锁的支持，使得开发者可以轻松实现并发控制。本文将详细介绍乐观锁与悲观锁的概念、MyBatis-Plus如何实现乐观锁、实现乐观锁的场景，以及如何使用@Version注解进行版本控制。1.乐观锁与悲观锁的概念1.1乐观锁（OptimisticL
  • 扩展 MyBatis-Plus 支持的查询条件 drebander mybatis-plus数据库mybatispythonMybatis-Plus
    MyBatis-Plus是一个强大的MyBatis增强工具，提供了丰富的查询条件构造器和便捷的CRUD操作。然而，在实际开发中，我们可能会遇到一些复杂的查询需求，需要扩展MyBatis-Plus的功能。本文将详细介绍如何扩展MyBatis-Plus支持的查询条件，包括自定义SQL查询、Lambda查询与条件构造器扩展、动态查询条件的实现，以及扩展自定义查询方法与接口。1.自定义SQL查询1.1使用
  • 【css酷炫效果】纯CSS实现动态云雾效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra
  • 【css酷炫效果】纯CSS实现流动岩浆纹理效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi
  • 【css酷炫效果】实现鱼群游动动态效果 冰夏之夜影 web前端css前端
    【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f
  • 智能形状匹配技术全解析：从经典算法到深度学习与神经形态计算【超级详细版】 AI筑梦师 计算机视觉算法深度学习人工智能机器学习计算机视觉python
    智能形状匹配技术全解析：从经典算法到深度学习与神经形态计算1.引言1.1研究背景在计算机视觉、模式识别、医学影像分析和自动驾驶等领域，形状匹配是核心任务之一。然而，现实世界的形状往往存在可变性（Variability），主要体现在以下几个方面：形变（Deformation）：物体可能由于柔性材料、外力作用或生物运动发生非刚性形变。尺度变化（ScaleVariation）：目标形状在不同场景下可能大
  • 每日实战：python爬虫之网页跳转-以某博为例 代码CC python爬虫python爬虫pandas开发语言
    一、项目背景与核心需求通过逆向分析微博热榜接口，实现实时热搜数据抓取，重点解决：话题跳转链接参数缺失问题页面数据清洗规范化处理多维度数据采集存储二、网页跳转爬虫实现原理2.1跳转链接生成逻辑原始热搜词→"雷军刚知道柯洁定了SU7Ultra"处理流程：1.添加话题标识→#雷军刚知道柯洁定了SU7Ultra#2.URL编码→%23雷军刚知道柯洁定了SU7Ultra%233.添加搜索参数→&t=31生成
  • mysql8.4.4+keepalived高可用部署 平山海D mysql
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、安装mysql（两节点都安装）二、安装keepalived（两节点都安装）三、修改mysql配置四、修改keepalived配置五、验证备注前言内网环境下，mysql8.4.4+keepalived高可用部署，仅作备份记录一、安装mysql（两节点都安装）从mysql官网离线下载mysql-8.4.4-1.el8.x8
  • 飞书自定义机器人消息接入指南 师小师 飞书机器人
    操作流程第一步邀请自定义机器人入群：进入你的目标群组，打开会话设置，找到群机器人，并点击添加机器人，选择自定义机器人加入群聊。为机器人输入一个合适的名字和描述，也可以为机器人设置一个合适的头像，然后点击下一步。第二部：配置webhook获取该机器人的webhook地址，格式如下：https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxxxxxxxxx
  • 使用 Vue 2.x + Element UI 搭建后台管理系统详解 不知名靓仔 vue.jsui前端
    引言Vue.js是一个非常流行的前端框架，而ElementUI是基于Vue2.x的一套完整的UI组件库，非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用Vue2.x和ElementUI来搭建一个后台管理系统，包括项目初始化、路由配置、状态管理、权限验证等关键步骤。vue2后台管理项目源码合集下载地址见最下方1.环境准备确保你的开发环境中已安装Node.js和npm。接下来，我们将使用V
  • Vue.js + Element UI 实战：手把手教你实现评论关键词过滤功能，新手必学！》 《前端开发必备技能：Vue 2 + Element UI 实现评论敏感词过滤，完整代码分享》 《新手友 南北极之间 vue.jsui前端敏感词关键词敏感词过滤
    效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：[email protected]以下是基于Vue2和ElementUI的评论关键词过滤功能实现，使用CDN引入Vue和ElementUI，方便在浏览器中直接预览。在线预览：Vue2+ElementUI实现评论关键词过滤功能目录需求场景技术选型实现步骤引入Vue2和ElementUI创建评论界面实现关键
  • Qt多媒体模块QMediaPlayer qq_19605587 qt开发语言
    Qt项目中.pro文件，.h文件和.cpp文件各自的作用：.pro文件：这是Qt项目文件，它包含了项目需要的所有信息，例如项目中包含哪些源文件、需要哪些库以及项目的其他配置信息等。可以把它理解为项目的配置和说明文件。.h文件：这是头文件，也叫做头文件。它们包含了类的声明和一些你希望在多个源文件中共享的函数、变量的声明。在这些头文件中，常常包括一些#define指令（用于定义常量）和其他类型的配置信
  • 华为OD E卷 #28 API集群负载统计 时光回响 华为OD机试E卷华为od
    题目某个产品的RESTfulAPI集合部署在服务器集群的多个节点上，近期对客户端访问日志进行了采集，需要统计各个API的访问频次，根据热点信息在服务器节点之间做负载均衡，现在需要实现热点信息统计查询功能。RESTfulAPI是由多个层级构成，层级之间使用/连接，如/A/B/C/D这个地址，A属于第一级，B属于第二级，C属于第三级，D属于第四级。现在负载均衡模块需要知道给定层级上某个名字出现的频次，
  • 华为OD E卷 #29 剩余银饰的重量 时光回响 华为OD机试E卷华为od
    题目有N块二手市场收集的银饰，每块银饰的重量都是正整数，收集到的银饰会被熔化用于打造新的饰品。每一回合，从中选出三块最重的银饰，然后一起熔掉。假设银饰的重量分别为x、y和z，且x≤y≤z。那么熔掉的可能结果如下：如果x==y==z，那么三块银饰都会被完全熔掉；如果x==y且y!=z，会剩余重量为z-y的银块无法被熔掉；如果x!=y且y==z，会剩余重量为y-x的银块无法被熔掉；如果x!=y且y!=
  • 华为OD E卷 #30 围棋的气 时光回响 华为OD机试E卷华为od链表算法
    题目题目描述围棋棋盘由纵横各19条线垂直相交组成，棋盘上一共19x19=361个交点，对弈双方一方执白棋，一方执黑棋，落子时只能将棋子置于交点上。“气”是围棋中很重要的一个概念，某个棋子有几口气，是指其上下左右方向四个相邻的交叉点中，有几个交叉点没有棋子，由此可知：1、在棋盘的边缘上的棋子最多有3口气（黑1），在棋盘角点的棋子最多有2口气（黑2），其他情况最多有4口气（白1）2、所有同色棋子的气之
  • 开发者关心的那些事 圣子足道 ios游戏编程apple支付
    我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用
  • 负载均衡器技术Nginx和F5的优缺点对比 bijian1013 nginxF5
            对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高
  • LeetCode[Math] - #9 Palindrome Number Cwind javaAlgorithm题解LeetCodeMath
    原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如
  • 画图板的基本实现 15700786134 画图板
     要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示
  • linux的ps命令 被触发 linux
    Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行
  • Android 音乐播放器 下一曲 连续跳几首歌 肆无忌惮_ android
    最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H
  • java导出txt文件的例子 知了ing javaservlet
    代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu
  • Scala stack试玩, 提高第三方依赖下载速度 矮蛋蛋 scalasbt
    原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r
  • phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。 alleni123 linuxspider
    1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil
  • JAVA IO FileInputStream和FileOutputStream，字节流的打包输出 百合不是茶 java核心思想JAVA IO操作字节流
    在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream
  • Spring基础实例（依赖注入和控制反转） bijian1013 spring
    前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil
  • HR看重的十大技能 bijian1013 提升能力HR成长
        一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决
  • 【Thrift一】Thrift编译安装 bit1129 thrift
    什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s
  • 【Avro三】Hadoop MapReduce读写Avro文件 bit1129 mapreduce
    Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果
  • nginx定制500，502，503，504页面 ronin47 nginx　错误显示
    server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配
  • java-1.二叉查找树转为双向链表 bylijinnan 二叉查找树
    import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \
  • Netty源码学习-HTTP-tunnel bylijinnan javanetty
    Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan
  • JSONUtil.serialize(map)和JSON.toJSONString(map)的区别 coder_xpf jqueryjsonmapval()
     JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul
  • Hibernate缓存总结 cuishikuan 开源sshjavawebhibernate缓存三大框架
    一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib
  • CentOs6 dalan_123 centos
    首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang
  • 10款用 jquery 实现滚动条至页面底端自动加载数据效果 dcj3sjt126com JavaScript
      无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条
  • ImageButton去边框&Button或者ImageButton的背景透明 dcj3sjt126com imagebutton
    在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut
  • JSP之c:foreach eksliang jspforearch
    原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1
  • Android实现主动连接蓝牙耳机 gqdy365 android
    在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS
  • android学习轨迹之四：org.json.JSONException: No value for hyz301 json
    org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&
  • 干货分享：从零开始学编程 系列汇总 justjavac 编程
    程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 
  • jquery-autocomplete 使用手册 macroli jqueryAjax脚本
    jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja
  • PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改 超声波 oracleplsql
    　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户
  • 数据仓库数据模型之：极限存储--历史拉链表 superlxw1234 极限存储数据仓库数据模型拉链历史表
    在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10
  • 10点睛Spring MVC4.1-全局异常处理 wiselyman spring mvc
    10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他