库库好困
库库好困

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

  • 筛选素数的三种方法 小赖同学吖 算法c++
    判断一个数是不是素数，相信大家都知道，那么如果每一个数，都规规矩矩的使用判断[1,本身]是否有除了本身和1，以外的可以整除的数，这样的做法显然不可取的，如果查看1~n的素数，这样的时间复杂度为O（n^2）1.朴素筛法这个筛法的思想是，每一次把枚举到的数x的倍数筛选掉，这样就可以优化一些时间复杂度为O(N*lnN)具体代码#includeusingnamespacestd;intn,cnt;cons
  • 深入探索HarmonyOS NEXT自定义组件与样式，提升应用个性化水平 harmonyos
    深入探索HarmonyOSNEXT自定义组件与样式，提升应用个性化水平在HarmonyOSNEXT平台上开发应用程序时，创建自定义组件和有效应用样式是实现独特用户体验的关键。本文将详细介绍如何从零开始构建自定义组件，并探讨如何利用样式系统来统一整个应用的视觉风格。我们将重点介绍API12版本中支持的功能和技术，帮助开发者提升应用的个性化水平。创建自定义组件：封装特定功能和外观自定义组件允许开发者封
  • HarmonyOS NEXT 应用开发：用户反馈收集与处理 harmonyos
    在应用的生命周期中，用户反馈是提升应用质量、优化用户体验以及增强市场竞争力的重要依据。对于开发者来说，如何有效地收集、分析和处理用户反馈，已成为一项关键的运营任务。在HarmonyOSNEXT环境中，开发者不仅需要关注功能实现和技术优化，还需要建立高效的用户反馈机制，以确保应用能够持续满足用户需求、解决用户痛点，并在市场中不断迭代和进步。本部分将介绍在HarmonyOSNEXT应用开发中，如何通过
  • YashanDB yasrman恢复 数据库
    本文内容来自YashanDB官网，原文内容请见https://doc.yashandb.com/yashandb/23.3/zh/%E6%95%B0%E6%8D%AE%...操作说明执行恢复操作的数据库版本需与生成备份集的数据库版本完全一致。恢复语法详细说明请参考工具手册yasrman。分布式部署模式下，需要保证待恢复的集群部署状态与备份前节点部署状态一致，包括节点类型、节点监听IP、节点个数、节
  • 3.22 codeforces小结 Brokenrivers 总结随记Codeforces算法竞赛编译错误签到题实战经验
    说来好笑，也算接触小半年算法了，这次算是第一次"正式"的打cf。之前因为一些原因比较倾向于找个空闲时间上oj上刷题，虽然知道cf对一个搞算法竞赛的人的重要性，但是一直没去蹲点打比赛（我觉得就是我们宿舍这破网上个cf要转两分钟圈圈还经常崩的原因），最多会在比赛结束找比赛题目的文档练习。这次因为组队了，希望能和队友实时交流，手机开了梯子热点打完了这次的cf。感觉就是，自己像个傻子一样，提交代码的语言选
  • C++ 的内存管理有哪些改进？ c++
    C++20引入了对协程的官方支持，这是C++语言发展的一个重要里程碑。协程为异步编程、并发任务处理以及复杂的控制流提供了一种更高效、更简洁的解决方案。以下是C++20中协程支持的主要优势：一、简化异步编程在传统的异步编程中，开发者通常需要使用回调函数、std::future和std::promise等机制来处理异步任务。这些方法虽然有效，但代码往往难以阅读和维护，且容易出错。C++20的协程提供了
  • 反射的作用 后端
    反射的作用反射的核心作用:动态性.反射让程序在运行时动态操作类和对象,而不是在编译时写死代码.就像给程序装了一个”扫描仪”,可以实时监测未知的类结构反射的基础实现:Class对象Class对象简单来说就是类的”身份证”对于每一个类来说比如(String,ArrayList),在JVM中都有一个对应的Class对象,这个Class对象记录了这个类的所有消息包括:类名,方法,字段,构造器等等更加贴切的
  • 【赵渝强老师】达梦数据库的逻辑存储结构 数据库信创
    达梦数据库由硬盘上的文件组成，而要读写数据需要通过达梦实例来完成。那么，达梦数据库是如何存储数据的呢？要搞清楚这个问题，就需要理解什么是达梦数据库的存储结构。达梦数据库的存储结构是由逻辑存储结构和物理存储结构组成。一般来说数据库无论是关系型数据库，还是NoSQL数据库在存储结构上，都是通过逻辑存储结构来管理物理存储结构。视频讲解如下：https://www.bilibili.com/video/B
  • 一文彻底搞清楚HarmonyOS NEXT的元服务 harmonyos-next
    程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员成长那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！1.什么是元服务在万物互联时代，人均持有设备量不断攀升，设备种类和使用场景更加多样，使得应用开发、应用入口变得更加复杂。在此背景下，应用提供方和用户迫切需要一种新的服务提供方式，使应用开发更简单、服务（如听音乐、打车等）的获取和
  • 从零开始学AI——1 人工智能
    前言最近总算有想法回到学习上来，这次就拿AI开刀吧。本系列叫从零开始学AI不是骗人的，我对AI的了解几乎就是道听途说，所以起了这么一个标题，希望学完从0变1（？此外，我应该不会特别关注代码实现上的内容，因为我对python也是一窍不通。本笔记为学习周志华老师《机器学习》（西瓜书）的个人学习记录，内容基于个人理解进行整理和再阐述。由于理解可能存在偏差，欢迎指正。引用模块说明：在笔记中，我会使用引用模
  • C++ 支持哪些面向对象特性？ c++
    C++是一种支持面向对象编程（OOP）的语言，它提供了丰富的面向对象特性，使得开发者能够以类和对象为核心来组织代码。以下是C++支持的主要面向对象特性：一、类（Class）类是C++中面向对象的核心概念，它是一种用户自定义的数据类型，用于封装数据和操作数据的函数。类可以包含成员变量（属性）和成员函数（方法），并通过构造函数和析构函数管理对象的生命周期。（一）定义类cpp复制classMyClass
  • 费控系统是做什么的 费控系统
    费控系统主要用于费用监控**、成本控制、风险预警。其中费用监控通过实时采集和精细数据分析，帮助企业实时掌握资金流向和支出情况，从而确保预算执行与资金使用的准确性。企业借助该系统可以提前预警异常支出、降低运营风险，并借助数据反馈不断优化管理策略，从而提升整体财务透明度和管理效率。一、费控系统的概念与基本功能费控系统是企业在财务管理中的重要工具，主要用于对企业各项费用进行实时监控和管理。它通过对各部门
  • 蓝桥杯算法实战：技巧、策略与进阶之路 竣雄 蓝桥杯算法职场和发展
    摘要蓝桥杯作为国内颇具影响力的程序设计竞赛，对提升大学生算法思维与编程能力意义重大。本文深入剖析蓝桥杯算法竞赛，结合历年真题总结核心考点与典型题型，分享实用解题技巧与备考策略，并探讨算法优化与进阶方向。通过系统学习与实践，助力参赛者提升算法水平，在竞赛中取得优异成绩。关键词蓝桥杯；算法竞赛；解题技巧；备考策略；算法优化一、引言蓝桥杯全国软件和信息技术专业人才大赛旨在选拔优秀的软件和信息技术人才，推
  • 多元素Slots游戏数值设计与平衡：特色玩法的深度策略 小宝哥Code 游戏策划游戏microsoft网络
    问题：如何深入研究针对特色游戏（如多元素组合类游戏，多重路线设计游戏）进行专业的数值设计与平衡，确保游戏体验与平台效益双赢？多元素Slots游戏数值设计与平衡：特色玩法的深度策略一、特色Slots游戏的市场定位与设计理念在当今竞争激烈的Slots游戏市场中，传统单一玩法已难以满足玩家日益增长的复杂需求。作为资深Slots游戏策划，我深知特色玩法如多元素组合和多重路线设计已成为市场差异化的关键。1.
  • 嵌入式系统开发如何选择和备考软考高级 矿渣渣 系统架构
    针对已通过软考中级嵌入式系统设计师的开发者或者从事嵌入式系统设计的人员，以下是为您量身定制的高级科目推荐及备考方案：一、软考高级科目推荐1.系统架构设计师（首推）推荐理由：技术延续性：与嵌入式系统设计高度相关，涉及硬件/软件协同设计、实时系统架构、低功耗设计等核心领域。职业发展：适合向架构师或技术负责人转型，提升复杂系统设计能力。考试内容匹配：覆盖嵌入式场景（如物联网架构、边缘计算系统设计）。考试
  • 前端框架入门：Vue 基础 风亦辰739 前后端开发全栈指南vue.js前端框架前端
    Vue.js是一款流行的前端框架，专注于构建用户界面。它采用响应式数据绑定和组件化开发，易于上手且功能强大。Vue3版本引入了CompositionAPI，提升了开发效率。一、Vue.js基础1.Vue介绍Vue是一个渐进式JavaScript框架，可用于：构建单页应用（SPA）。组件化开发，提高代码复用性。结合Vuex（状态管理）和VueRouter（路由）开发大型应用。2.Vue模板语法Vue
  • Linux使用pidof命令来快速查找进程id linux
    简介pidof命令用于查找Linux中正在运行的程序的进程ID(PID)。它有助于管理和控制进程。基本语法pidof[options]program_name常用选项-s：单次-指示程序仅返回一个pid-q：安静模式，抑制任何输出并仅相应地设置退出状态-w：还显示没有可见命令行的进程（例如内核工作线程）-x：这会导致程序也返回运行指定脚本的shell的进程ID-o：告诉pidof忽略具有该进程ID
  • 单片机原理及应用 风亦辰739 单片机
    单片机（Microcontroller，简称MCU）是集成度高、功能强大的微型计算机，广泛应用于嵌入式系统、智能家居、工业控制、汽车电子、物联网等领域。作为一种重要的硬件平台，单片机具有小巧、低功耗、高效、成本低等特点。本文将介绍单片机的基本原理、结构特点以及其在实际应用中的使用方法。一、单片机的基本原理单片机是由中央处理单元（CPU）、存储器（RAM、ROM）、输入输出接口、定时器、串行通信接口
  • 算法小分队-刷题2 「已注销」 c++
    注：代码周日刷完一块交3.20小鱼的游泳时间(1425)模拟竖式运算，注意借位问题3.21小鱼比可爱(1428)简单的循环比较大小3.22小玉在游泳(1420)注意数据的处理，浮点还是整数3.23手机(1765)只会简单的条件循环判断然后累加3.24轰炸III(1830)调错：轰炸的次序处理
  • DFS深搜 Darling02zjh 算法学习深度优先算法
    排列数字题目：给定一个整数n，将数字1∼n排成一排，将会有很多种排列方法。现在，请你按照字典序将所有的排列方法输出输入格式共一行，包含一个整数n。输出格式按字典序输出所有排列方案，每个方案占一行。数据范围1≤n≤7输入样例3输出样例：123132213231312321对于DFS深度搜索就像是一条路走到黑在这里假如n=3，需要看一共有几种组合方法红色的就是深搜的路线；对于这道题把思路转化成代码就是
  • 鸿蒙harmonyOS：笔记 正则表达式 一只小风华~ 笔记前端华为harmonyos正则表达式
    从给出的文本中，按照既定的相关规则，匹配出符合的数据，其中的规则就是正则表达式，使用正则表达式，可以使得我们用简洁的代码就能实现一定复杂的逻辑，比如判断一个邮箱账号是否符合正常的邮箱账号，再比如判断一个手机号是否正常的手机号，等等，正因为有了正则，得以让文本处理起来更加的简单。日常开发中主要用来做三件事:匹配、替换、提取。手机号表单要求用户只能输入11位的数字(匹配)过滤掉页面内容中的一些敏感词(
  • 蓝桥杯备赛（7）：ST表 神里流~霜灭 蓝桥备赛蓝桥杯贪心算法c++c语言数据结构动态规划
    RMQ问题RMQ问题是针对于数组，每次给一个区间[l,r]，要求返回区间内的最大值或最小值（的下标），也就是说，RMQ问题就是求区间最值的问题。对于RMQ问题，容易想到一种O(n)的方法，就是用i直接遍历[l,r]区间，不断比较a[i]与max的大小关系，然后不断更新max，最后得出的就是最大值。但是，我们可以利用倍增和动态规划的思想，利用“ST表”这个数据结构来帮助解决。ST表ST表是一种可以“
  • Python 正则表达式超详细解析：从基础到精通 2201_75491841 python正则表达式开发语言
    Python正则表达式超详细解析：从基础到精通一、引言在Python编程的广阔领域中，文本处理占据着极为重要的地位。而正则表达式，作为Python处理文本的强大工具，能够帮助开发者高效地完成诸如查找、替换、提取特定模式字符串等复杂任务。无论是在数据清洗、网页爬虫，还是日志分析、自然语言处理等应用场景中，正则表达式都展现出了无可比拟的优势。本文将深入且全面地剖析Python正则表达式，从最基础的概念
  • Shell正则表达式 巷子里的童年ya 正则表达式
    基本正则列表正则符号描述^匹配行首$匹配行尾[]集合，匹配集合中的任意单个字符[^]对集合取反.匹配任意单个字符*匹配前一个字符任意次数[*不允许单独使用]\{n,m\}匹配前一个字符n到m次\{n\}匹配前一个字符n次\{n,\}匹配前一个字符n次及以上\(\)组合为整体，保留扩展正则列表正则符号描述+最少匹配一次？最多匹配一次{n,m}匹配前一个字符n到m次()组合为整体，保留|或者\b单词边
  • Python如何实现粒子效果如烟雾、火焰、雨滴等. openwin_top python编程示例系列二python开发语言
    microPythonPython最小内核源码解析NI-motion运动控制c语言示例代码解析python编程示例系列python编程示例系列二python的Web神器Streamlit如何应聘高薪职位在Panda3D中实现粒子效果主要依赖于其内置的粒子系统。这个系统允许开发者创建各种动态的视觉效果，如烟雾、火焰、雨滴等。下面我将详细介绍如何在Panda3D中添加一个简单的粒子效果。步骤1:准备粒
  • （一）stm32F411RE点亮板上LED——基于HAL库（微控第一周MCU验收） yxt230791 stm32嵌入式硬件单片机
    近期有点懒，还是先直接上链接通过网盘分享的文件：led.rar链接:https://pan.baidu.com/s/1GUI7wd9dtNwqPhpS9GfLag提取码:XDer--来自百度网盘超级会员v2的分享
  • FFmpeg 命令行全解析：高效音视频处理从入门到精通 码流怪侠 ffmpeg音视频ffplayffprobe实时音视频视频编解码直播转码
    FFmpegFFmpeg是一款开源的多媒体处理工具集，支持音视频编解码、格式转换、流媒体处理等全链路操作。核心功能与工具:多媒体全链路支持支持1000+音视频编解码格式（如H.264、HEVC、AV1）和协议（RTMP、RTSP、HLS），覆盖录制、转码、流化等全流程。提供三大核心工具：ffmpeg：转码与流处理（如ffmpeg-iinput.mp4output.avi）。ffplay：媒体播放（
  • YashanDB巡检 数据库
    巡检在YashanDB中为一个单独的后台线程，该线程类似于巡逻小队，不断地监控数据库的运行状况。当发生严重错误时，收集诊断数据存储在自动诊断存储库中，并且触发相应的修复手段或者限制损坏及中断。巡检主要包含如下内容：监控数据库文件发生严重错误时触发健康检查监控同步备库（最大保护模式）文件监控YashanDB的后台文件都存储着重要的信息，部分文件丢失可能导致数据库无法正常使用。此外，用户不可以手动改动
  • YashanDB健康检查 数据库
    YashanDB提供健康检查框架，用于数据库运行诊断检查。健康检查也称为检查器，检查数据库的各个组件，如检测文件损坏、数据块损坏、redo日志损坏等，并生成一份报告，记录发现的错误以及错误带来的影响。可以通过如下两种方式运行健康检查：反应式——故障诊断架构自动运行健康检查以响应严重错误。手动——使用内置高级包手动运行健康检查。如有需要，可以通过定义JOB定期运行健康检查。健康检查执行的结果将存储在
  • Python中的机制：全局解释锁和回收机制 林十一npc Python语言python开发语言
    Python中的机制：全局解释锁和回收机制一、全局解释锁GIL1.基础原理全局解释锁：是CPython中引入的一种机制，确保同一时刻保持一个线程执行Python的字节码。锁的粒度：GIL是全局唯一的锁，线程在执行Pyhton代码前必须要获取GIL,执行完毕后进行释放。线程切换：CPython解释器通过固定间隔（如python字节码指令或遇到I/O操作），释放GIL,触发线程切换。底层实现GIL的实
  • 开发者关心的那些事 圣子足道 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其他