库库好困
库库好困

前端移动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)

  • Visual Studio Code支持WSL，直接修改linux/ubuntu中的文件 柳鲲鹏 dockervscodeide编辑器
    步骤1开始通过WSL使用VSCode|MicrosoftLearn点击远程开发扩展包。步骤2RemoteDevelopment-VisualStudioMarketplace点击install，允许打开VisualStudioCode。步骤3共有4项，一齐安装。步骤4在WSLLinux(Ubuntu)中：sudoapt-getinstallwgetca-certificates打开步骤1准备工作完
  • Python 爬虫实战：在东方财富网抓取股票行情数据，辅助投资决策 西攻城狮北 python爬虫实战案例东方财富网
    目录一、引言二、准备工作1.环境搭建2.获取目标网址三、分析网页结构1.查看HTML结构2.分析请求方式四、编写爬虫代码1.导入必要的库2.设置请求头3.获取股票行情数据4.保存数据到CSV文件5.主函数五、数据分析与可视化1.加载数据2.数据清洗3.数据分析4.数据可视化六、总结一、引言在金融投资领域，股票行情数据是投资者做出决策的重要依据。东方财富网作为国内领先的金融信息平台，提供了丰富的股票
  • VS中 一个解决方案中添加多个项目（文件夹）【c#】 山水CAD筑梦人 C#学习笔记c#
    1.先打开一个项目。2.然后鼠标右键“解决方案”——>添加——>现有项目。找到自己要添加的现有项目，在现有项目中找到下面的文件，选择打开。便能将整个项目添加进来。
  • 【C语言】强符号和弱符号 ypf_bendan C/C++知识c语言
    1、强符号、弱符号定义编译器在编译源程序时，无论你是变量名、函数名，在它眼里，都是一个符号而已，用来表征一个地址。编译器会将这些符号集中，存放到一个叫符号表的section中。那么对于两个.c文件中存在的同名的变量，编译器该怎么选择呢？这个时候，就需要引入强符号和弱符号的概念了。强符号：函数名、初始化的全局变量名；弱符号：未初始化的全局变量名。两种符号的不同组合可能有不同的效果：强符号+强符号：编
  • 阅读笔记：x86系统调用入门 yayong Solarisx86solarissystempreprocessormakefilewrapper
    阅读笔记：x86系统调用入门原作者:RussBlaine原文来自:http://blogs.sun.com/roller/page/rab译注者:BadcoffeeEmail:[email protected]:http://blog.csdn.net/yayong2005年7月按：要开始学习像操作系统这样复杂的东东是一个令人头痛的问题。为了帮助新学者理清头绪，这里我们将讨论Sol
  • 企业IT架构能力,是企业IT管理的核心能力之一 xibusj 业内资讯金融电信工作
    随着中古哦企业信息化成都与IT管理水平的提高，企业IT架构规划会受到越来越多的企业所重视，IT架构能力是企业核心IT管理能力之一。在80年代未，美国的政府部门与大型企业就已经把企业IT架构作为提高IT管理水平的核心能力来做，如：美国的国防部与财政部已经通过企业IT架构的规划，建立了完善的IT标准规范体系，在IT项目的招标时，这些IT标准规范就是技术方案选择的依据，不符合IT标准规范的方案的供应商就
  • 深度学习（1)-简单神经网络示例 yyc_audio 深度学习人工智能
    我们来看一个神经网络的具体实例：使用Python的Keras库来学习手写数字分类。在这个例子中，我们要解决的问题是，将手写数字的灰度图像（28像素×28像素）划分到10个类别中（从0到9）。我们将使用MNIST数据集，图2-1给出了MNIST数据集的一些样本。在机器学习中，分类问题中的某个类别叫作类（class），数据点叫作样本（sample），与某个样本对应的类叫作标签（label）。你不需要现
  • 【PyQt】工具栏(QToolBar)与动作按钮(QAction)使用指南 shanks66 pyqtpython开发语言
    PyQt工具栏(QToolBar)与动作按钮(QAction)使用指南️一、基础用法示例classMainWindow(QMainWindow):def__init__(self):super().__init__()#创建工具栏self.toolbar=self.addToolBar("主工具栏")#创建动作集合self._create_actions()#设置工具栏图标尺寸self.toolb
  • DeepSeek 如何获取数据库中的表信息（表名和字段名称） Python测试之道 数据库python
    问题背景在测试或开发过程中，了解数据库的表结构（包括表名和字段名称）是非常重要的一环，尤其是当我们需要测试数据库相关的功能或验证数据时。然而，手动查看数据库结构可能耗时且容易出错。如果能够通过DeepSeek与数据库直接交互，自动获取表名和字段信息，将大大提升测试效率。本文将介绍如何利用DeepSeek模型结合数据库查询，自动生成表结构信息（包括表名和字段名称）。此外，还会展示如何通过自然语言描述
  • python创建sqlite3数据库_SQLite – Python | 菜鸟教程 weixin_39683144
    SQLite-Python安装SQLite3可使用sqlite3模块与Python进行集成。sqlite3模块是由GerhardHaring编写的。它提供了一个与PEP249描述的DB-API2.0规范兼容的SQL接口。您不需要单独安装该模块，因为Python2.5.x以上版本默认自带了该模块。为了使用sqlite3模块，您首先必须创建一个表示数据库的连接对象，然后您可以有选择地创建光标对象，这将
  • 宋红康 MySQL高级篇 学习笔记 偷偷儿 mysql学习笔记
    架构篇1.sql的执行流程查询缓存：有就直接返回了。解析器进行解析：检查sql合不合语法优化器：对sql语句进行逻辑优化，看是否使用索引，生成执行计划。存贮引擎：myisam,innodb去执行上述计划当然返回的时候也会在缓存一下结果。索引及调优篇1.InnoDBB+树索引的注意事项（页分裂的场景）1.根页面万年不动（页分裂）：创建后，用户数据用完可用空间，就会新产生一个页a，并将根节点的数据复制
  • 大厂学院 雷丰阳 JUC 学习笔记 偷偷儿 学习笔记java
    基础篇synchronized和lock的区别1.从本质上：synchronized是Java内的一个关键字，lock是一个接口。2.从代码的形式上：synchronized在发生异常时会主动释放锁，lock需要我们在finally语句中释放，不然会死锁；通过lock可以知道锁有没有获取成功，synchronied不行3.从性能上：在1.6前没提出锁升级过程时，重量级锁在被系统检测到后会阻塞尝试获
  • Python根据日历 算排班表 装小蜜监理王志峰 python开发语言
    Python,开发者相关视频讲解：python的or运算赋值用法用python编程Excel有没有用处？011_编程到底好玩在哪？查看python文件_输出py文件_cat_运行python文件_shel如何实现Python根据日历算排班表简介作为一名经验丰富的开发者，我将教你如何用Python根据日历来算排班表。这是一个常见且实用的功能，在很多公司和组织都有类似的需求。在这篇文章中，我将通过步骤
  • 使用 Nginx 搭建代理服务器（正向代理 HTTPS 网站）指南 web13688565871 nginxhttps运维
    在网络应用中，代理服务器是用于中转用户请求和服务端响应的工具。正向代理主要用于客户端与外部服务器之间的访问代理，帮助客户端隐藏其IP地址或访问受限资源。本文将详细介绍如何使用Nginx搭建正向代理服务器，特别是针对HTTPS网站的代理。一、正向代理与反向代理的区别1.1正向代理正向代理位于客户端和服务器之间，代表客户端向服务器发起请求。其主要功能是隐藏客户端信息，代理客户端进行网络访问，尤其是访问
  • C语言分支和循环语句 止水编程 water_proof c语言开发语言
    C语言中的语句分为三种结构：1.顺序结构2.选择结构：if、switch、case等等3.循环结构：while、for、dowhile等等本章主要讲：分支语句：if、switch循环语句：while、for、dowhile、goto语句一.什么是语句？C语句可分为以下五类：1.表达式语句2.函数调用语句3.控制语句4.复合语句5.空语句本章后面介绍的是控制语句C语言中有九种控制语句，可分为以下三类
  • AI创业：数据管理的策略与对策分析 AI天才研究院 【精选大厂面试题详解】大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
    AI创业：数据管理的策略与对策分析1.如何评估一个创业公司所收集的数据的价值？题目：请解释如何评估一个创业公司所收集的数据的价值，并提供几个关键指标。答案：评估数据的价值通常涉及以下几个方面：数据质量：数据是否准确、完整、及时和一致。数据独特性：数据是否具有独特性，是否能提供独有的洞察。数据量：数据的总量，更多的数据往往意味着更多的分析机会。数据相关性：数据与业务目标的相关性，能否直接支持业务决策
  • C 语言模块化编程中的头文件 Dola_Pan C语言c语言单片机stm32
    前面我们在演示多文件编程时创建了main.c和module.c两个源文件，并在module.c中定义了一个函数和一个全局变量，然后在main.c中进行了声明。不过实际开发中很少这样做，一般是将函数和变量的声明放到头文件，再在当前源文件中#include进来。如果变量的值是固定的，最好使用宏来代替。下面的例子是改进后的代码main.c源码：1.#include2.#include"module.h"
  • 简化版奇异值分解（SVD）方法详解 DuHz 数理统计学知识机器学习人工智能算法信息与通信信号处理
    简化版奇异值分解（SVD）方法详解奇异值分解（SVD）是一个强大的矩阵分解工具，广泛应用于数据降维、图像压缩、机器学习等领域。然而，对于大规模数据或高维矩阵，计算和存储的开销非常大，因此提出了多种简化版的SVD方法。这些简化版方法在保证解的精度的同时，能够显著减少计算量和内存占用。本文将详细介绍几种简化版SVD方法，包括经济型SVD、随机化SVD、增量SVD、分块SVD和偏最小二乘法（PLS），并
  • 私有AI对话系统实战：基于Ollama+OpenWebUI的DeepSeek-R1本地化部署手把手教学（可共享访问） Developer-YC DeekSeek-R1大模型解读与实战教学人工智能pythonjavagithubnode.js语言模型后端
    引言：为什么选择本地部署大模型？在数据隐私日益重要的今天，云端AI服务的局限性逐渐显现——敏感信息泄露风险、网络延迟依赖、定制化能力不足。而通过**Ollama（模型管理框架）和OpenWebUI（可视化交互工具）**的组合，开发者可以轻松实现大模型（如DeepSeek-R1）的本地部署，兼顾性能与安全。本文将以DeepSeek-R1为例，详解从环境配置到实战应用的全流程。一、工具与模型简介1.O
  • 性能测试的类型有哪些？ Feng.Lee 漫谈测试测试工具性能优化
    目录1.基准测试2.负载测试3.压力测试4.峰值测试5.并发测试6.容积测试7.稳定性测试8.可扩展性测试9.配置测试性能测试是为测量或评估被测软件系统与性能效率相关的特性而实施的一类测试，它关注被测系统在不同负载下的各种性能效率。软件系统的性能效率相关特性的覆盖面非常广泛，包括系统的执行效率、资源占用、系统容量等。性能测试是一个广泛的领域，它包括多种类型的测试，每种类型都有其特定的目标和应用场景
  • 腾讯HunyuanVideo-HD：高清视频处理技术的革新 IT·小灰灰 音视频自动化人工智能深度学习数据挖掘图像处理数据分析
    在数字化时代，视频内容已成为信息传播的主要形式之一。随着用户对视频质量要求的不断提高，高清视频处理技术成为了各大科技公司竞相研发的重点。腾讯作为中国领先的互联网科技公司，一直致力于推动视频处理技术的创新。最近，腾讯推出了HunyuanVideo-HD，这是一项旨在提升高清视频处理效率和质量的技术。本文将深入探讨HunyuanVideo-HD的技术特点、应用场景、使用方法及其对行业的影响。目录一、技
  • Python爬虫——网站基本信息 IT·小灰灰 python爬虫开发语言网络
    在智能时代，数据是新的石油。Python爬虫技术赋予了我们成为数据猎人的能力，让我们能够在网络的广袤土地上狩猎，为机器学习和人工智能的发展提供燃料目录一、介绍——Python二、介绍——Python爬虫1.请求库2.解析库3.数据存储4.多线程/多进程5.异步编程6.代理和反爬虫7.爬虫框架8.爬虫的法律和道德问题9.异常处理10.日志记录三、爬虫示例代码一、介绍——PythonPython是一种
  • 【Spring Boot】Spring Boot解决循环依赖 m0_54851477 面试学习路线阿里巴巴springbootjavaspring
    目录循环依赖一、前言二、Bean的创建过程三、循环依赖检测机制3.1实例化阶段3.2属性填充阶段3.3依赖注入循环依赖一、前言环依赖是指两个或者多个bean互相依赖对方，从而形成一个闭环。例如：BeanA依赖于BeanB，而BeanB又依赖于BeanA。可能会导致Spring在尝试创建这些bean实例时出现问题，因为他们互相等待对方被创建，最终导致应用程序无法启动。Spring是如何发现这种循环依
  • 推荐开源备份神器：BackupPC，企业级数据守护者 徐耘馨
    推荐开源备份神器：BackupPC，企业级数据守护者项目地址:https://gitcode.com/gh_mirrors/ba/backuppc在数字时代，数据如同企业的生命线，重要性不言而喻。为了保障这份“生命线”的安全，今天我们来探讨一个高效且成熟的备份解决方案——BackupPC。项目介绍BackupPC是一款基于Perl编写的高性价比企业级备份系统，专为Linux、Windows和Mac
  • MyBatis-Plus介绍及基本使用 墨鸦_Cormorant #Java持久层mybatismybatis-plusmybatisPlus
    文章目录概述介绍MyBatis-Plus常用配置分页插件配置类注解配置快速入门maven依赖编写配置文件编写启动类编写MybatisPlus配置类代码生成器：MybatisPlusGeneratormaven依赖代码生成器核心类概述介绍MyBatis-Plus（简称MP）是一个MyBatis的增强工具，在MyBatis的基础上只做增强不做改变，为简化开发、提高效率而生。主页：传送门引入MyBati
  • 使用Wiki.js配置LDAP认证的编程学习 飘逸徜徉在自由的云端 javascript学习前端编程学习
    在本文中，我们将探讨如何使用Wiki.js配置LDAP认证。LDAP（轻量级目录访问协议）是一种常用的用于身份验证和授权的协议，它可以让我们将用户凭据存储在中央目录服务器上，以便在不同的应用程序中进行身份验证。Wiki.js是一款功能强大的开源知识管理和文档协作平台，它提供了许多扩展功能，其中之一就是支持LDAP认证。通过配置LDAP认证，我们可以让用户使用他们在LDAP服务器上的凭据登录Wiki
  • 利用VBA+SQL查询Excel工作表数据（模糊查询） VBAMatrix VBA代码sqlexcel数据库
    续前2篇：1.利用VBA+SQL查询Excel工作表数据（基本查询）2.利用VBA+SQL查询Excel工作表数据（条件查询）本文将继续使用VBA+SQL查询的模板，并详细介绍SQL模糊查询语句在VBA中的使用。VBA+SQL查询的模板题[员工花名册$A1:I65536]SQL模糊查询的关键词是like、notlike，通常结合通配符使用，从而实现模糊查询的功能。通配符见下表：通配符含义%匹配一个
  • 在Excel中创建与使用自定义函数 VBAMatrix excel
    Excel内置了很多丰富的函数，大大方便我们进行数据处理等日常操作。但如果一个单元格内函数嵌套太多，不仅不直观，而且不易理解。同时，对于一些数据处理的需求，Excel内置函数或难以实现。此刻，我们可以自定义函数，方便自己调用。例如，我们可以编写自定义函数，根据填写的身份证号码，判断位数是否正确，或者提取出生日期，判断性别，获取籍贯信息等个人信息。再如，产品编号“P-11-305-22”这字符串，我
  • deepseek本地部署指南（解决下载速度慢） 灶龙 人工智能deepseek人工智能本地部署
    很多人都照着网上的教程去下载，但是网上的下载Ollama模型都下载不了，所以我打算写一篇不同的deepseek本地部署指南。第一步：下载奇游加速器奇游加速器下载网址下载奇游加速器后进行安装，然后搜索Deepseek点击进去，不要着急充值，点击右上角口令，输入奇游111就可以白嫖三天的有效期。第二步：下载Ollama框架点进Deepseek后，先点击一键加速（中途不要关闭），在点击右边的游戏服务中的
  • 使用Docker搭建Flink集群 O_1CxH Flink大数据Kafka大数据dockerflink容器
    目录使用Docker搭建Flink集群docker-compose一键搭建步骤附录参考资料使用Docker搭建Flink集群在学习大数据框架的时候，需要一个真实的环境。我们知道，像spark、flink这些计算框架都有多种运行模式：在本地使用多线程模拟集群真正的分布式集群如果直接在IDE（Intellj）里面编译和运行写好的程序，实际上是用的前一种运行模式；如果想尝试真正的生产环境中任务的提交和管
  • 开发者关心的那些事 圣子足道 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其他