飞冰的冻柠茶
飞冰的冻柠茶

HTML+CSS模仿小米秒杀网站

HTML+CSS模仿小米秒杀网站

    • 前言
    • 效果
    • 代码
      • html代码
      • css代码
      • js代码

前言

学完了HTML和CSS就模仿小米秒杀的网站弄了个简单的静态网页！！！

效果

HTML+CSS模仿小米秒杀网站_第1张图片

代码

html代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米闪购-小米商城title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/iconfont.css">
head>
<body>
    
    <div class="site-topbar">
        <div class="container">
            <div class="topbar-nav">
                <a href="">小米商城a><span>|span>
                <a href="">MIUIa><span>|span>
                <a href="">IoTa><span>|span>
                <a href="">云服务a><span>|span>
                <a href="">金融a><span>|span>
                <a href="">有品a><span>|span>
                <a href="">小爱开放平台a><span>|span>
                <a href="">企业团购a><span>|span>
                <a href="">资质证照a><span>|span>
                <a href="">协议规则a><span>|span>
                <a href="">下载Appa><span>|span>
            div>
            <div class="topbar-car">
                <a href=""><i class="iconfont">i> 购物车<span>(0)span>a>
            div>
            <div class="topbar-info clearfix">
                <a href="">登录a><span>|span>
                <a href="">注册a><span>|span>
                <a href="" class="sep">消息通知a>
            div>
        div>
    div>
    
    <div class="header">
        <div class="container">
            <div class="header-logo">
                <a href="http://www.mi.com" class="lr" title="小米官网">a>
            div>
            <div class="header-nav">
                <ul class="nav-list clearfix">
                    <li class="nav-category">
                        <a href="">全部商品分类a>
                    li>
                    <li class="nav-item">
                        <a href="">小米手机a>
                    li>
                    <li class="nav-item">
                        <a href="">Redmi红米a>
                    li>
                    <li class="nav-item">
                        <a href="">电视a>
                    li>
                    <li class="nav-item">
                        <a href="">笔记本a>
                    li>
                    <li class="nav-item">
                        <a href="">家电a>
                    li>
                    <li class="nav-item">
                        <a href="">路由器a>
                    li>
                    <li class="nav-item">
                        <a href="">智能硬件a>
                    li>
                    <li class="nav-item">
                        <a href="">服务a>
                    li>
                    <li class="nav-item">
                        <a href="">社区a>
                    li>
                ul>
            div>
            <div class="header-search">
                <form action="" class="search-form">
                    <input type="search" name="keyword" class="search-text">
                    <input type="submit" value="" class="search-btn iconfont">
                form>
            div>
        div>
    div>
    
    <div class="seckill">
        <div class="seckill-head">div>
        <div class="container">
            <div class="seckill-nav">
                <ul id="tabs">
                    <li class="active"><em>14:00em><span><em>抢购中br>距结束 02:27:18em>span>li>
                    <li><em>20:00em><span>即将开始span>li>
                    <li><em>22:00em><span>即将开始span>li>
                    <li><em>00:00em><span>明日开始span>li>
                    <li><em>10:00em><span>明日开始span>li>
                ul>
            div>
            <div class="seckill-goods">
                <ul class="clearfix">
                    <li>
                        <div class="bg"><img src="./img/kongtiao.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">自清洁|小米互联网空调1.5匹a>
                            <p class="goods-tips">高效制冷/热，全屋互联p>
                            <p class="goods-price">1799.00元 <del>2699元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img/yinxiang.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">小米AI音箱a>
                            <p class="goods-tips">听音乐、语音遥控家电p>
                            <p class="goods-price">199.00元 <del>299元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img/zhijin.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">日常元素抽纸 青春版 24包/箱 a>
                            <p class="goods-tips">精选原生竹浆，健康环保p>
                            <p class="goods-price">27.90元 <del>32.90元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img/maojin.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">最生活毛巾·Air（10条装） 白色+素蓝 a>
                            <p class="goods-tips">给生活一条好毛巾p>
                            <p class="goods-price">99.00元 <del>169元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img/diannao.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">RedmiBook 13 锐龙版 R5 16G 512G SATA SSD 集显 月光银 a>
                            <p class="goods-tips">全面屏高性能轻薄本p>
                            <p class="goods-price">3799.00元 <del>3999元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img//xiyiji.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">Redmi全自动波轮洗衣机1S 8kg 灰色 a>
                            <p class="goods-tips">小身材大容量，可预约p>
                            <p class="goods-price">799.00元 <del>899元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img/jiqiren.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">米家扫拖一体机器人 白色 a>
                            <p class="goods-tips">扫得干净，拖得彻底p>
                            <p class="goods-price">1599.00元 <del>1999元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img/diannao2.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name"> 14 Ⅱ R5 8G 512G 银色 a>
                            <p class="goods-tips">全面屏高性能轻薄本p>
                            <p class="goods-price">3599.00元 <del>3799元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                    <li>
                        <div class="bg"><img src="./img/jinghuaqi.jpg" alt="">div>
                        <div class="info">
                            <a href="" class="goods-name">米家空气净化器 2S a>
                            <p class="goods-tips">好空气看得见p>
                            <p class="goods-price">699.00元 <del>899元del>p>
                            <a href="" class="btn">登录后抢购a>
                        div>
                    li>
                ul>
            div>
            <p class="seckill-notice">*小米秒杀活动规则： <br>
                1.秒杀商品是否参加活动、最终秒杀成功的商品，以订单结算页显示为准，活动包括但不限于优惠券、赠品、满减、满赠等；<br>
                2.秒杀商品数量有限，活动以下单支付成功为准，请加入购物车后尽快下单支付;<br>
                3.秒杀价不含运费，最终以订单结算页价格为准；<br>
                4.订单中商品的数量、颜色、型号等，以订单结算页为准。<br>
                温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。
            p>
        div>
    div>
    <script src="./js/index.js">script>

body>
html>

css代码

/* 初始化样式 */
* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
}
.container {
    margin: 0 auto;
    width: 1226px;
}
/* 清除浮动 */
.container::after,
.container::before,
.clearfix::after,
.clearfix::before {
    content: "";
    display: table;
}
.container::after,
.clearfix::after {
    clear: both;
}
/* 顶部菜单栏样式 */
.site-topbar {
    background-color: #333;
    height: 40px;
}
.site-topbar a {
    color: #b0b0b0;
    font-size: 12px;
}
.site-topbar a:hover{
    color: #fff;
}

.topbar-nav {
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: 0;
}
.topbar-nav span {
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    margin: 0.5em;
}
.topbar-car,
.topbar-info {
    float:right;
}
.topbar-car a {
    display:block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 120px;
    background-color: #424242;
}
.topbar-car a:hover {
    color: #ff6700;
    background-color: #fff;
}
.topbar-car span {
    font-size: 12px;
}
.topbar-info {
    margin-right: 15px;
}
.topbar-info a {
    float: left;
    padding: 0 5px;
    height: 40px;
    line-height: 40px;
}
.topbar-info span {
    float: left;
    font-size: 12px;
    color: #424242;
    font-family: sans-serif;
    height: 40px;
    line-height: 40px;
}
.topbar-info .sep {
    padding: 0 10px;
}
/* 页头导航栏样式 */
.header {
    height: 100px;

}
.header-logo {
    float: left;
    width: 62px;
    margin-top: 22px;
    height: 55px;
}
.header-logo a {
    display: block;
    width: 49px;
    height: 49px;
    background: #ff6700 url(../img/mi-logo.png);
    text-align: center;
}
/* .header-logo a.lr {
    text-align: left;
    text-indent: -9992em;
} */
.header-nav {
    float: left;
    width: 820px;
    height: 100px;
}
.header-nav .nav-list {
    width: 820px;
    height: 88px;
    font-size: 16px;
    padding: 10px 0 0 30px;
}
.header-nav .nav-list .nav-category {
    float: left;
    width: 127px;
    padding: 0 15px 0 0;
}
.header-nav .nav-list .nav-category a{
    display: block;
    padding: 26px 0px 38px;
    text-align: right;
    color: #333;
}
.header-nav .nav-list .nav-item {
    float: left;
}
.header-nav .nav-list .nav-item a{
    display: block;
    padding: 26px 10px 38px;
    color: #333;
}
.header-nav .nav-list .nav-item a:hover {
    color: #ff6700;
}
.header-search {
    float: right;
    width: 296px;
    height: 50px;
    margin-top: 25px;
}
.header-search .search-form {
    position: relative;
    display: block;
    width: 296px;
    height: 50px;
}
.header-search .search-form .search-text{
    position: absolute;
    top: 0;
    right: 51px;
    display: block;
    width: 245px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #e0e0e0;
    outline: 0;
}
.header-search .search-form .search-btn{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 52px;
    height: 50px;
    font-size: 24px;
    line-height: 24px;
    border: 1px solid #e0e0e0;
    outline: 0;
    background: #fff;
    color: #616161;
}
.header-search .search-form .search-btn:hover {
    background-color: #ff6700;
    color: #fff;
}
/* 主体样式 */
.seckill {
    background-color: #f5f5f5;
}
.seckill-head {
    height: 170px;
    margin-top: 19px;
    background: url(../img/xiaomimiaosha.jpg) no-repeat 50% 0;
}
.seckill-nav {
    margin: -68px 0 22px;
}
.seckill-nav ul {
    height: 68px;
    background-color: #414141;
}
.seckill-nav ul li {
    display: block;
    float: left;
    color: #fff;
    width: 20%;
    height: 68px;
    line-height: 68px;
    text-align: center;
    cursor: pointer;
}
.seckill-nav li em {
    display: inline-block;
    margin-left: 30px;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
} 
.seckill-nav li span {
    display: inline-block;
    margin-left: 15px;
    text-align: left;
    line-height: 1;
    vertical-align: middle;
    font-size: 14px;
}
.seckill-nav ul li span em {
    display: inline-block;
    text-align: left;
    font-style: normal;
    font-size: 14px;
    margin-left: 0;
    line-height: 20px;
}
.seckill-nav .active {
    background-color: #f1393a;
}

/* 商品信息样式 */
.seckill-goods ul {
    /* border: 1px solid black; */
    margin-right: -13px;
}
.seckill-goods li {
    float: left;
    width: 400px;
    height: 190px;
    background-color: #fff;
    margin-right: 13px;
    margin-bottom: 13px;

}

.seckill-goods .bg {
    float: left;
    width: 190px;
    height: 190px;
    /* border: 1px solid red; */
}
.seckill-goods .bg img {
    height: 190px;
}
.seckill-goods .info {
    padding-top: 30px;
    float: right;
    width: 190px;
    height: 190px;
    /* border: 1px solid red; */
}
.seckill-goods .info .goods-name {
    font-size: 16px;
    color:#333;
    height: 16px;
    line-height: 16px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seckill-goods .info .goods-tips {
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    color: #b0b0b0;
    margin-top: 10px;
}
.seckill-goods .info .goods-price {
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    color: #f1393a;
    margin-top: 20px;
    margin-bottom: 0;

}
.seckill-goods .info .goods-price del {
    color: #999;
    font-size: 12px;
    margin-left: 12px;
}
.seckill-goods .info .btn {
    display: inline-block;
    width: 118px;
    height: 28px;
    color: #fff;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    background-color: #f1393a;
    margin-top: 20px;
    border: 1px solid #f1393a;
}
.seckill-notice {
    font-size: 12px;
    color: #999;
    margin-top:100px;
    padding-bottom:30px;
}

js代码

var tabs=document.getElementById("tabs").getElementsByTagName("li");
for(var i=0;i<tabs.length;i++){
    tabs[i].onclick=showlist;
}
function showlist(){
    for(var i=0;i<tabs.length;i++){
        if(tabs[i]===this){
            tabs[i].className="active";
        }
        else{
            tabs[i].className="";
        }
        
    }
}

你可能感兴趣的:(HTML+CSS模仿小米秒杀网站)

  • 第三章：组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现 qianmoQ TailwindCSS：现代化开发实战指南css前端
    导航栏是几乎所有网站都必备的组件，一个好的响应式导航栏需要在不同设备上都能提供出色的用户体验。本节将介绍如何使用TailwindCSS实现功能完善的响应式导航栏。基础导航栏结构桌面端导航<divclass
  • 玩转网页交互：用JavaScript打造灵动手风琴特效 skyksksksksks 综合个人杂记javascript交互jqueryhtml5css前端
    一、手风琴特效：网页中的魔法折叠术想象一下你在音乐厅看到的手风琴演奏——轻轻一拉，风箱便如波浪般起伏展开。在网页世界中，手风琴特效正是这种优雅互动的数字化身！当用户点击某个标题时，对应的内容就像被施了魔法般缓缓展开，其他内容则默契地折叠收起。这种设计不仅节省空间，更能让用户像探索藏宝图一样，逐步揭开内容的奥秘。在电商网站的商品详情页，在知识平台的问答专区，甚至在个人作品集网站，手风琴特效都扮演着重
  • 小米平板怎么和电脑共享屏幕 安吉尼尔 办公技能电脑
    最近尝试使用小米平板和电脑屏幕分屏互联发现是需要做特殊处理的，需要下载一款电脑安装包：小米妙享关于这个安装包，想吐槽的是：没有找到官网渠道，是通过其他网络方式查到下载的不附录链接，原因是因为地址不一定一直有效，各位看官各自大显神通下载后的安装包需要做解压，这里比较人性化的几点：1.安装前会进行系统适用性评估2.适用的场景可查看，可以参考点击参考界面：点击后，打开了一个浏览器界面，说明了适用设备：小
  • 华为OD机试 - Excel 单元格数值统计（Python） | 机试题算法思路 【2023】 梦想橡皮擦 excel华为python算法华为od
    最近更新的博客华为OD机试题-最短耗时（JavaScript）华为OD机试题-机器人走迷宫（JavaScript）华为OD机试-新员工座位安排系统（Python）|机试题算法思路华为OD机试-能力组队（Python）|机试题算法思路华为OD机试-内存池（Python）|机试题算法思路使用说明参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。华为OD清单查看地址：bl
  • pnpm、npm、yarn 包管理工具『优劣对比』及『环境迁移』 「已注销」 npm
    前言博主在开发前端网站的时候，发现随着开发的项目的逐渐增多，安装的依赖包越来越臃肿，依赖包的安装速度也是非常越来越慢，多项目开发管理也是比较麻烦。之前我就了解过pnpm，但是当时担心更换包管理环境可能会出现的依赖等问题，并且也没有急切的需求，所以当时并没有立即更换综上所述，随着上面问题的出现，更换包管理环境也逐渐提上日程，所以本文主要将会简单对比pnpm和npm/yarn，并且详细讲解如何在多项目
  • 在linux 中搭建deepseek 做微调，硬件配置要求说明 慧香一格 学习AIlinux服务器deepseek
    搭建可参考使用deepseek-CSDN博客官方网站：DeepSeekDeepSeek是一个基于深度学习的开源项目，旨在通过深度学习技术来提升搜索引擎的准确性和效率。如果你想在Linux系统上搭建DeepSeek，你可以遵循以下步骤。这里我将提供一个基本的指导，帮助你从零开始搭建一个基础的DeepSeek环境。1.安装依赖首先，确保你的Linux系统上安装了Python和pip。DeepSeek主
  • python aiohttp_Python-异步之aiohttp weixin_39864101 pythonaiohttp
    什么是aiohttp？一个异步的HTTP客户端\服务端框架，基于asyncio的异步模块。可用于实现异步爬虫，更快于requests的同步爬虫。aiohttp和requestsrequests版爬虫requests同步方式连续30次简单爬取http://httpbin.org网站importrequestsfromdatetimeimportdatetimedeffetch(url):r=requ
  • Selenium 对页面元素的操作动作及其语法 静静在思考 #Seleniumselenium测试工具
    Selenium提供了丰富的操作动作，用于模拟用户在浏览器中的各种交互行为。以下为你详细介绍常见操作动作及其语法，并结合百度网站为例给出Python代码示例。1.打开网页语法：使用driver.get(url)方法，其中driver是浏览器驱动实例，url是要打开的网页地址。示例代码：fromseleniumimportwebdriverdriver=webdriver.Chrome()drive
  • 情书网源码 情书大全帝国cms7.5模板 CSDN专家-微编程 PHP源码PHP
    源码介绍帝国cms7.5仿《情书网》模板，精美情书大全站源码，同步生成带手机站带采集。非常漂亮的帝国cms模板，适合改改做文学类的网站。此模板适合做精美情书网站，功能比较齐全，后台操作方便，简单易上手，并拥有多款插件。或适合老师或能自己写文字的站长，把学生的作文，或自己写点文章发布到自己网站。效果预览!源码获取情书网源码情书大全帝国cms7.5模板
  • Nginx 如何实现请求的缓存过期策略？ zengson_g Nginxnginx缓存运维服务器网络
    关注博主️带你畅游技术世界，不错过每一次成长机会！文章目录Nginx如何实现请求的缓存过期策略？一、缓存的重要性与基本概念二、Nginx缓存过期策略的原理三、设置Nginx缓存过期时间四、基于变量的动态缓存过期策略五、使用第三方模块增强缓存功能六、缓存的更新与失效机制七、缓存命中率与性能监控八、实际应用中的注意事项Nginx如何实现请求的缓存过期策略？在当今快节奏的互联网世界中，网站和应用的性能优
  • 如何让ChatGPT生成Midjourney提示词 AI观星台 人工智能stablediffusionmidjourney
    关注文章下方公众号，即可免费获取AIGC最新学习资料导读：最近AI绘画非常的火，今天我们看ChatGPT如何生成Midjourney提示词，让AI教AI做事。本文字数：900，阅读时长大约：3分钟正如Midjourney的官方网站报道的那样，提供工作提示（Prompt）是一项碰运气的业务。从单个表情符号或单词都可以生成图像，但自然地结果可能并不完全符合用户的预期。一般来说，提示越长、越详细，结果就
  • 1150针cpu性能排行_二手电脑桌面级CPU（中央处理器）之-至强处理器 满天乱走 1150针cpu性能排行
    至强处理器出色的性能和支持更多的并发连接数，特别是在需要多线程运行的场景中优势相比酷睿系列是很明显的(例如处理大量的数据交换，视频压制转码，处理网站大量的IIS连接请求)。一、在桌面级处理器中具有一席之地的至强处理器因为咱这里介绍的是桌面级的处理器，有两款至强处理器我不得不介绍一下，因为他们常常运用在桌面级的台式机中。1、E31230V222纳米架构IvyBridge1155针四核心线程数量八线程
  • 运用python制作一个完整的股票分析系统 大懒猫软件 python开发语言djangobeautifulsoup
    使用python制作一个股票分析系统，可以通过股票价格走势动态界面，实时动态监测不同类型股票的变化情况。以下是一个完整的股票分析系统开发指南，包括股票价格走势动态界面和实时监测功能。这个系统将结合网络爬虫、数据分析、机器学习和可视化技术，帮助你实时监测不同类型股票的变化情况。1.系统功能概述数据采集：使用网络爬虫技术从财经网站采集股票数据。数据处理：计算技术指标（如KDJ、BOLL）并进行数据预处
  • python爬虫模拟点击和输入,python爬虫实战--selenium模拟登录并自动点击 半夜梳长长的头发 python爬虫模拟点击和输入
    爬虫实战项目。爬虫利器：selenium的使用。任务介绍最近刚刚注册了某个网站：HDHome，该站有新手考核任务，其中有一项是需要达到魔力值5000。在魔力值获取方式中，我们看到这一项：“说谢谢=0.5个魔力值”，而网站存活种子数量达到16000+，也就意味着对每个种子说一下谢谢，轻松达到8000+的魔力值，于是，这个项目应运而生。实现思路：获取种子的页面，在每个页面中找到说谢谢的按钮，并点击后，
  • 2025年SEO自动优化工具 147SEO 搜索引擎
    随着2025年互联网的快速发展，越来越多的企业和个人意识到，拥有一个排名靠前的网站对于吸引客户、增加流量、提高转化率至关重要。而要想让自己的网站脱颖而出，获得更多曝光，最重要的一项工作就是进行SEO优化。传统的SEO优化方式通常需要大量的时间和精力，这让不少企业感到力不从心，特别是在资源有限的情况下。于是，SEO自动优化工具应运而生，成为解决这一问题的利器。SEO（SearchEngineOpti
  • cms模板 企业建站cms网站模板 非凡网站 搜索引擎
    企业网站不仅是展示品牌形象的窗口，也是与客户互动、提供服务的重要平台。随着互联网技术的快速发展，企业建站的需求日益增长，而CMS（内容管理系统）模板成为了众多企业的首选。本文将探讨CMS模板在企业建站中的优势、选择标准以及如何有效利用CMS模板来构建一个专业的企业网站。CMS模板的优势快速部署：CMS模板通常已经包含了基本的网站结构和设计元素，企业可以快速部署网站，节省开发时间,企业建站的高效选择
  • html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
    一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
  • AcWing中01背包问题 ONEPEICE-ing 算法AcWing
    在acwing.com中的题，本次为01背包问题【具体视频可通过www.acwing.com/video/214网站观看（ps:是跟着视频中的老师一起写的，并不是原创~~~）】01背包问题题目：有N件物品和一个容量是V的背包。每件物品只能使用一次。第i间物品的体积是vi，价值是wi，求解将哪些物品装入背包，可使这些物品的总体积不超过背包容量，且总价值最大，输出最大价值。输入格式：第一行两个整数，N
  • 从零开始：Django + MySQL + Vue 打造在线Demo下载平台 阮懿同
    从零开始：Django+MySQL+Vue打造在线Demo下载平台【下载地址】DjangoMySQLVue从零开始打造在线Demo下载平台Django+MySQL+Vue从零开始打造在线Demo下载平台本仓库提供了一套完整的前后端实战项目源码，带你全面学习和掌握在Django后端框架和Vue前端框架下，如何协作开发并部署一个功能完备的在线Demo下载网站项目地址:https://gitcode.c
  • 网络安全组织架构表 网络安全技术架构 网络安全King web安全架构安全
    web安全架构（上）开始之前这们说一下，web网站其实防御也相当重要，不管是服务器防御，后台数据防御，数据库防御都是必须滴，那我们说说常见的几种。后续再给大家分享api接口安全性设计，黑名单白名单，以及防御DDOS。XSS攻击，SQL注入，防盗链，csrf模拟请求，文件上传漏洞，忘记密码漏洞，Api接口幂等，其他问题等等，，，，，，一，什么是XSS?Xss就是javascript脚本攻击，就是在表
  • 豆瓣电影TOP250爬虫项目 诚信爱国敬业友善 爬虫爬虫python
    以下是一个基于Python的豆瓣电影TOP250爬虫项目案例，包含完整的技术原理说明、关键知识点解析和项目源代码。本案例采用面向对象编程思想，涵盖反爬机制处理、数据解析和存储等核心内容。豆瓣电影TOP250爬虫项目一、项目需求分析目标网站：https://movie.douban.com/top250爬取内容：电影名称导演和主演信息上映年份制片国家电影类型评分评价人数短评金句技术挑战：请求头验证分
  • Python爬虫：如何优雅地“偷窥”商品详情 数据小爬虫@ APIpython爬虫开发语言
    在这个信息爆炸的时代，获取商品详情已经不再是简单的点击和浏览。我们需要的是速度、效率，还有一点点的...偷偷摸摸。没错，今天我们要聊的是如何使用Python爬虫来“偷窥”商品详情。别担心，我们保证一切都是合法合规的，就像在百货商场里试穿衣服一样，只是看看，不买账。一、爬虫的“伪装术”在开始我们的“偷窥”之旅前，我们需要给我们的爬虫穿上一件“隐身衣”。这是因为许多网站都有反爬虫机制，比如检查你的Us
  • 使用python开发flsak_FlaskWeb开发:基于Python的Web应用开发实战 RoseofVersailles 使用python开发flsak
    本书不仅适合初级Web开发人员学习阅读，更是Python程序员用来学习高级Web开发技术的优秀参考书。•学习Flask应用的基本结构，编写示例应用；•使用必备的组件，包括模板、数据库、Web表单和电子邮件支持；•使用包和模块构建可伸缩的大型应用；•实现用户认证、角色和个人资料；•在博客网站中重用模板、分页显示列表以及使用富文本；•使用基于Flask的REST式API，在智能手机、平板电脑和其他第三
  • 使用Python构建论坛爬虫：抓取论坛主题、标签和讨论量 Python爬虫项目 python爬虫开发语言信息可视化金融
    引言随着互联网的发展，论坛作为一个信息交流的地方，承载了大量的讨论内容、主题和标签。通过抓取论坛的数据，用户可以了解最热的话题、讨论量大的主题以及与特定标签相关的内容。本篇博客将介绍如何使用Python构建一个论坛数据抓取爬虫，从论坛网站上抓取主题、标签和讨论量，并对数据进行存储和分析。目标与背景我们的目标是从多个论坛网站抓取以下内容：论坛主题：讨论的主要内容或话题。标签：与主题相关的分类信息。讨
  • Windows操作系统部署Tomcat详细讲解 web15117360223 面试学习路线阿里巴巴windowstomcatjava
    Tomcat是一个开源的JavaServlet容器，用于处理JavaWeb应用程序的请求和响应。以下是关于Tomcat的用法大全：一、安装Tomcat下载访问ApacheTomcat官方网站（https://tomcat.apache.org/），根据你的操作系统（如Windows、Linux、macOS）和需求选择合适的版本进行下载。例如，对于开发环境，通常选择较新的稳定版本。安装（以Windo
  • vue3 - 【完整源码】实现网页整屏大量图片、div 容器的自适应瀑布流布局，宽高度不固定的列表式瀑布流展示效果（高效无 BUG 网站瀑布流效果，超详细代码注释，可根据需求快速进行改造！） 街尾杂货店& 前端组件与功能(开箱即用)vue3瀑布流布局详细教程vue3图片列表瀑布流组件宽高不固定的div实现瀑布vue3最好用的瀑布流组件插件vue3瀑布流布局完整示例源码
    效果图在vue3.js网站项目中，实现图片、普通div容器的瀑布流效果完整示例，支持动态加载数据、自定义一行放多少个、各列之间的间距等等！你可以直接复制组件源码，按照配置文档稍微改改就能用到你的项目中去了，比绝大部分文章提供的示例都要流畅、快速。核心组件源码组件的存放位置无所谓，最后使用的时候能正确引入就行了。创建瀑布流组件Waterfall.vue，复制代码。
  • 在linux环境下启动es,linux上Elasticsearch 安装配置、网页访问 guo桀 在linux环境下启动es
    一、ElasticSearch简述ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于RESTfulweb接口。Elasticsearch是用Java开发的，并作为Apache许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。我们建立一个网站或应用程序，并要添加搜索功能
  • 本地搭建deepseek并提供给其它人使用（最全，完整可用） 唐大帅 deepseekdeepseek本地化
    最近deepseek非常火，可以称得上是国人的骄傲了。也导致他的网站和api都比较卡。因为是开源的，我们可以很方便的架设其蒸馏模型到自己的主机上。PS：虽然也可以Cpu运行模型，但是如果没有8G以上的显存卡的话，只能搭建7B以下的模型，体验效果并不太好。一、安装Ollama1.1在线安装（推荐方式，需要科学上网）在Ubuntu终端中直接执行下面的命令，下载安装脚本会自动下载适合你系统架构的Olla
  • 网站建设怎么选？网站制作公司Top榜全解析 2401_89441257 大数据
    近年来，全球经济形势复杂多变，对各行各业都带来了不小的挑战。在这样的背景下，各行业都经历了一轮又一轮的洗牌，网站建设行业也不例外。随着技术的不断进步和市场需求的日益多样化，建站公司也在不断地更新换代，以适应新的经济形势和行业发展趋势。机遇与挑战并存。在行业洗牌的过程中，一些实力不足、服务不专业的建站公司逐渐被市场淘汰，而一些具有核心竞争力、能够提供高质量服务的公司则脱颖而出。这些优秀的建站公司不仅
  • 什么是域名劫持？如何防止域名劫持？ sslhttps
    什么是域名劫持？如何防止域名劫持？域名劫持（DomainHijacking）是一种网络攻击手段，攻击者通过非法手段获取域名的控制权，将用户的访问请求重定向到恶意网站。这种行为不仅会导致用户隐私泄露，还可能对企业的品牌形象和业务造成严重损害。域名劫持的常见方式包括窃取域名注册商账户信息、利用社会工程学攻击、或通过DNS服务器漏洞实施攻击。域名劫持的危害用户隐私泄露：用户被引导至恶意网站，可能导致个人
  • C/C++Win32编程基础详解视频下载 择善Zach 编程C++Win32
    课题视频：C/C++Win32编程基础详解 视频知识：win32窗口的创建                   windows事件机制 主讲：择善Uncle老师 学习交流群：386620625 验证码：625 --
  • Guava Cache使用笔记 bylijinnan javaguavacache
    1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常 我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。 实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
  • 解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
    解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程 一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。 分析过程：    既然是temp表空间有问题，那当
  • Struct在jsp标签 不懂事的小屁孩 struct
    非UI标签介绍： 控制类标签： 1：程序流程控制标签   if   elseif    else <s:if test="isUsed"> <span class="label label-success">True</span> </
  • 按对象属性排序 换个号韩国红果果 JavaScript对象排序
    利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
  • 大数据分析让个性化的客户体验不再遥远 蓝儿唯美 数据分析
    顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。 分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。 挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。 然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
  • java笔记4 a-john java
    操作符 1，使用java操作符       操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。       操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
  • 从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
        笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。     笔者因此写上自己的学习心得，希望能给和我一样转变
  • 在springmvc中解决FastJson循环引用的问题 asialee 循环引用fastjson
              我们先来看一个例子：           package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
  • ArrayAdapter和SimpleAdapter技术总结 百合不是茶 androidSimpleAdapterArrayAdapter高级组件基础
    ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果   ArrayAdapter;的数据可以是数组或者是队列        // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
  • 九封信 bijian1013 人生励志
            有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。         2014，写给人
  • Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHPInstallphpMyAdmin
    PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64   一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244   二、安装依赖包 sudo yum install gd
  • 分布式系统理论 bit1129 分布式
    FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
  • ssh2整合(spring+struts2+hibernate)-附源码 白糖_ eclipsespringHibernatemysql项目管理
    最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库   项目用eclipse
  • treetable bug记录 braveCS table
    // 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
  • 编程之美-电话号码对应英语单词 bylijinnan java算法编程之美
    import java.util.Arrays; public class NumberToWord { /** * 编程之美 电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
  • jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
    1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
  • JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动J#
      对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析   /*  流程图拓扑结构解析伪码描述算法         public java.util.ArrayList DFS(String graphid, String stepid, int j)
  • oracle I/O 从属进程 daizj oracle
    I/O 从属进程 　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
  • 高级排序:希尔排序 dieslrae 希尔排序
    public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
  • 初二下学期难记忆单词 dcj3sjt126com englishword
    kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的   Indian 印度的 workplace  工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
  • Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
    目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
  • git命令 shuizhaosi888 git
    ---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "[email protected]" //设置邮箱 ---------------查看环境配置 git config --li
  • qemu-kvm 网络 nat模式 (四) haoningabc kvmqemu
    qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
  • 不要让未来的你，讨厌现在的自己 jingjing0907 生活 奋斗 工作 梦想
     故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
  • 枚举类型详解 一路欢笑一路走 enum枚举详解enumsetenumMap
    枚举类型详解 一.Enum详解      1.1枚举类型的介绍   JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。      Demo:一个最简单的枚举类   public enum ColorType { RED
  • 第11章 动画效果（上） 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/
  • Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipsejsp卡死js卡死
    使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下：   1、取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉，build下只留 classpath dependency Valida
  • MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
    每一行命令都是用分号(;)作为结束 对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
  • zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
    题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。 解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。 判断函数里面做了3次bfs，但是每次bfs节点最多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他