星⁠辞
星⁠辞

web应用开发：css构建移动版旅游网站界面

要求：

  • 侧边栏使用< aside>标签嵌套< nav>标签来实现，在< nav>标签中嵌套< ul>列表实现导航菜单。
  • 页面右侧部分从上至下依次使用< header>标签、< section>标签和< footer>来实现，并且这些标签全部嵌套在一个< section>中。
  • < header>标签中文字使用< h1>标签，并设置样式。
  • 两个旅游信息的< section>中分别嵌套两个< div>标签，用来设置旅游图片和文字信息在节目中中的位置。
  • < footer>标签使用< p>、< span>、< a>链接来添加一些文字和链接信息。

新建travel.html文件
代码如下：


<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>国内旅游title>
    
    <link href="common.css" rel="stylesheet" type="text/css">
    
    <link href="main.css" rel="stylesheet" type="text/css">
head>
<body>

<section class="qui-page">
    
    <header class="qui-header">
        <h1>国内旅游计划h1>
    header>
    
    
    <section class="container"> 
        <div class="plcRouteList">
            <a href="#">
                
                <div class="bottom">
                    <p class="face">
                        <img src="touxiang.jpg" width="38" height="38" alt=""/>
                    p>
                    <h2 class="title">我的旅游行程h2>
                div>
                <p class="day">14天p>
            a>
            <div class="infos">div>
            <em>城市em> 
            <p>昆明 - 香格里拉 - 西藏p>
        div>
    section>
    
    
    <section class="container">
        <div class="plcRouteList">
            <a href="#">
                <img src="华东.jpg" width="100%" alt="" class="pic" />
                <div class="bottom">
                    <p class="face">
                        <img src="touxiang.jpg" width="38" height="38" alt="" />
                    p>
                    <h2 class="title">我的旅游行程h2>
                div>
                <p class="day">15天p>
            a>
            <div>
                <em>城市em>
                <p>北京 - 常州 - 苏州p>
            div>
        div>
    section>
    
    <footer class="qui-footerBasic">
    <p class="switchStyle">
        <span>手机版span>
        <a href="#">
            <span>电脑版span>a>
        <span><a href="#">APPa>span>
    p>
    footer>
    
section>



<aside class="qui-asides">
    <section class="qui-aside">
        <nav class="qui-asideNav">
            <ul>
                <li><a href="#"><span>首页span>a> li>
                <li><a href="#"><span>目的地span>a> li>
                <li><a href="#"><span>酒店span>a> li>
                <li><a href="#"><span>机票span>a> li>
                <li><a href="#"><span>时间span>a> li>
                <li><a href="#"><span>点评span>a> li>
            ul>
        nav>
    section>
aside>

body>
html>

新建common.css文件
代码如下：

html{
    height: 100%;
    overflow-x: hidden;/*表示水平方向隐藏溢出，没有滚动条*/
    background: #f5f5f5;
    color: #444;
    /*设置字体样式，！important设置该元素的样式具有最高权值*/
    font: 14px/24px Helvetica !important;
}
body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*为元素指定的任何内边距和边框都在已设定的宽度和高度内进行绘制*/
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 640px;
    min-height: 100%;
    margin: 0 auto; /*页面水平居中*/
    overflow-x: hidden;
    /*盒子阴影：水平偏移，垂直偏移模糊值，阴影颜色（其中rgb指颜色，a指透明度）*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div,ul,li,p{
    margin: 0;
    padding: 0;
    outline: none;/*当元素获得焦点的时候，焦点框为0，不出现虚线框（或高亮框）*/
}
em,strong{
    font-style: normal;
    font-weight: normal;/*字体样式、粗细正常*/
}
ul{
    list-style: none;/*清除默认样式*/
}
h1{
    font-size: 55px;/*字体大小55px*/
    margin-top: 30px;/*上边距30px*/
    color: white;/*字体颜色为白色*/
    text-align: center;/*字体水平居中*/
}

新建main.css文件
代码如下：

.qui-page{
    width: 640px;
}
.qui-header{
    width: 100%;
    height: 80px;
    overflow: hidden;/*隐藏溢出内容*/
    background-color: #2bab79;/*背景颜色为#2bab79*/
}
.container{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.plcRouteList{
    border-bottom: 1px solid #e6e8ea;/*底部边框为1px，颜色为#e6e8ea的实线*/
    background-color: #fff;
    padding-left: 5px;/*左内边距为5px*/
}
.plcRouteList li{
    padding: 15px 5px 15px 0;/*上、右、下内边距分别为15px、5px、0*/
    border-top: 1px solid #e6e8ea;/*顶部边框为1px、颜色为#e6e8ea的实线*/
}
.plcRouteList a{
    display: block;/*将a由行元素变为块元素*/
    position: relative;
}
.plcRouteList .pic{
    display: block;
    min-height: 150px;
}
.plcRouteList .bottom{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    padding: 30px 0 0 60px;
    color: #fff;
    /*背景颜色：线性渐变，从上到下由黑色渐变至透明为60%的黑色*/
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));
    background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
.plcRouteList .bottom .face{
    float: left;/*向左浮动*/
    margin-left: -50px;
    width: 38px;
    height: 38px;
    border: 1px solid #fff;
    border-radius: 50%;/*为元素添加圆角边框边框半径为宽度的50%*/
    overflow: hidden;
}
.plcRouteList .bottom .face img{
    display: block;
    border-radius: 50%;
}
.plcRouteList .bottom .title{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;/*表示当对象内文本溢出时显示省略标记（。。。）*/
    white-space: nowrap;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;/*行高为22px*/
}
.plcRouteList .day{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    /*背景颜色：rgb是对应颜色值，a对应的是透明度*/
    background-color: rgba(43,171,121,0.8);
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    color: white;
}
.plcRouteList .infos{
    margin-top: 7px;/*顶部外边距为7px*/
}
.plcRouteList .infos>div {
    margin-bottom: 5px;/*底部外边距为5px*/
    padding-left: 40px;/*左边内边距为40px*/
}
.plcRouteList .infos em{
    float: left;
    margin-left: -40px;
    font-size: 15px;
    font-weight: bold;
}
.plcRouteList .infos p{
    max-height: 48px;
    overflow: hidden;
}
.qui-footerBasic{
    width: 100%;
    margin: 20px 0;
    text-align: center;
    font-size: 10px;
    line-height: 20px;
}
.qui-footerBasic .switchStyle{
    color: #9ea3ab;
}
.qui-footerBasic .switchStyle span{
    margin-left: 30px;
}
.qui-footerBasic .switchStyle a{
    color: #444;/*字体颜色为#444*/
    text-decoration: none;/*清除文本样式*/
}
.qui-asides{
    position: absolute;
    left: -200px;
    top: 0;
    height: 400px;
    width: 200px;
}
.qui-aside{
    position:fixed;
    top: 0;
    bottom: 0;
    width: 200px;
    overflow-y: scroll;/*垂直方向溢出则出现滚动条*/
    background-color: #2d3741;
}
.qui-asideNav{
    padding: 80px 10px 10px;
    /*上内边距为80px，左右内边距都为10px，下内边距为10px*/
}
.qui-asideNav li{
    border-top: 1px solid #232d34;
    background-color: #36424b;
}
.qui-asideNav a{
    text-decoration: none;
    display: block;
    padding-left: 15px;
    font-size: 16px;
    line-height: 44px;
    color: #ced1d5;
}
.qui-asideNav a:hover{
    color: white;
    background-color: #2bab79;
}

效果图：
web应用开发：css构建移动版旅游网站界面_第1张图片
用到的图片：
fengjing.jpg
web应用开发：css构建移动版旅游网站界面_第2张图片
touxiang.jpg
web应用开发：css构建移动版旅游网站界面_第3张图片
华东.jpg
web应用开发：css构建移动版旅游网站界面_第4张图片

你可能感兴趣的:(web应用开发)

  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • Go语言中实现安全高效的JWT认证：自定义中间件解析 microrain golang物联网golang安全中间件
    在现代web应用开发中，安全性和效率是两个永恒的主题。作为开发者，我们不仅需要确保用户数据的安全，还要保证应用的高性能。今天，我们将探讨如何在Go语言中使用JSONWebToken(JWT)实现一个既安全又高效的认证中间件。为什么选择JWT？JWT（JSONWebToken）是一种开放标准（RFC7519），它定义了一种紧凑且自包含的方式，用于在各方之间安全地传输信息作为JSON对象。这种信息可以
  • Gorilla/Mux 中的 Session 管理：实现自定义中间件 microrain golang物联网中间件
    在现代Web应用开发中，会话管理是一个至关重要的组成部分。它允许我们跟踪用户状态，提供个性化的用户体验，并确保应用的安全性。今天，我们将深入探讨如何为GorillaMux框架实现一个强大而灵活的Session中间件。为什么需要自定义Session中间件？虽然Gorilla提供了出色的sessions包，但直接集成到Mux路由器中需要一些额外的工作。通过创建自定义中间件，我们可以：简化会话的设置和使
  • 深度长文解析SpringWebFlux响应式框架15个核心组件源码 快乐非自愿 javaspring
    SpringWebFlux介绍SpringWebFlux是SpringFramework5.0版本引入的一个响应式Web框架，它与SpringMVC并存，提供了一种全新的编程范式，支持异步非阻塞的Web应用开发。WebFlux完全基于响应式编程模型，支持ReactiveStreams规范，可以在诸如Netty、Undertow以及Servlet3.1+容器上运行。WebFlux的核心控制器是Dis
  • 深入理解Kotlin中的异步网络请求处理 小白学大数据 kotlin开发语言android爬虫
    在现代移动和Web应用开发中，异步网络请求处理是核心功能之一。Kotlin，作为一种现代、简洁且功能强大的编程语言，提供了多种方式来处理异步任务，使得开发者能够编写出更加高效和响应迅速的应用。本文将深入探讨Kotlin中的异步网络请求处理，包括其原理、优势以及如何在实际项目中实现。异步网络请求的重要性在用户界面(UI)开发中，异步操作是至关重要的。它允许应用在不阻塞主线程的情况下，执行网络请求和其
  • python web应用开发神器 入门十六 openwin_top python前端开发语言webstreamlit
    系列文章目录目录pythonweb应用开发神器入门一pythonweb应用开发神器入门二pythonweb应用开发神器入门三pythonweb应用开发神器入门四pythonweb应用开发神器入门五pythonweb应用开发神器入门六
  • Django缓存 夏天又到了 Django5框架Web应用开发django缓存sqlite
    【图书介绍】《Django5企业级Web应用开发实战（视频教学版）》_django5企业级web应用开发实战(视频教学版)-CSDN博客《Django5企业级Web应用开发实战（视频教学版）》(王金柱)【摘要书评试读】-京东图书(jd.com)Django5框架Web应用开发_夏天又到了的博客-CSDN博客本节主要介绍关于Django框架缓存方面的内容。Web缓存可以实现加快页面打开速度、减少网络
  • 在国产平台上Flak Web应用开发 Botiway FlaskWebpythonflask后端linuxweb3
    在国产平台上进行FlaskWeb应用开发，特别是在像统信UOS这样的国产操作系统上，可以遵循与在其他操作系统上类似的开发流程，但可能需要注意一些特定的环境配置和兼容性问题。木合塔尔·沙地克所著的《FlaskWeb应用开发项目实战基于Python和统信UOS》一书，为在统信UOS上进行FlaskWeb应用开发提供了宝贵的指导和实战案例。1.环境准备首先，确保你的开发环境已经安装了Python和pip
  • Linux系统服务——【web，http协议，apache服务和nginx服务】（sixteen day） 沉迷于学习的网络狗 前端http网络协议
    一、web基础以及http协议1、web基本概念和常识前端开发一般用uniapp.1、Web:为用户提供的一种在互联网上浏览信息的服务，Web服务是动态的、可交互的、跨平台的和图形化的。2、Web服务为用户提供各种互联网服务，这些服务包括信息浏览服务，以及各种交互式服务，包括聊天、购物、学习等等内容。3、Web应用开发也经过了几代技术的不断发展，目前Web开发依然是最重要的开发内容之一。Web基础
  • 使用Django身份验证系统 夏天又到了 Django5框架Web应用开发数据库djangosqlite
    【图书介绍】《Django5企业级Web应用开发实战（视频教学版）》_django5企业级web应用开发实战(视频教学版)-CSDN博客《Django5企业级Web应用开发实战（视频教学版）》(王金柱)【摘要书评试读】-京东图书(jd.com)Django5框架Web应用开发_夏天又到了的博客-CSDN博客Django身份验证同时提供身份验证和授权，由于这些功能有些耦合，因此通常称之为身份验证系统
  • Flask Web应用开发深度分析 Botiway FlaskWebpythonflask后端linuxweb3
    Flask作为一个使用Python编写的轻量级Web应用框架，以其简单、灵活和安全的特点在Web开发领域中广受欢迎。以下是对FlaskWeb应用开发的深度分析：一、Flask的核心特性1.轻量级：Flask框架的核心构成较为简单，没有默认使用的数据库和窗体验证工具，开发者可以根据需要自行添加。这种设计使得Flask更加灵活，易于上手和使用。2.扩展性强：Flask框架的扩展性是其最大的特点之一。通
  • 高级java每日一道面试题-2024年8月27日-框架篇[SpringMVC篇]-Spring MVC 支持哪些视图技术? java我跟你拼了 java每日一道面试题javaspringmvc框架篇SpringMVC篇后端视图解析器
    如果有遗漏,评论区告诉我进行补充面试官:SpringMVC支持哪些视图技术?我回答:SpringMVC作为基于Spring框架的Web应用开发框架，其核心优势之一在于其支持多种视图技术，这使得开发者可以根据项目需求或个人偏好选择最适合的视图渲染方式。以下是SpringMVC支持的一些主要视图技术：JSP（JavaServerPages）：JSP是JavaEE规范的一部分，是Java平台下最常用的视
  • 经验笔记：理解和保障JWT的安全性 漆黑的莫莫 计算机网络笔记
    经验笔记：理解和保障JWT的安全性引言在软件开发领域，特别是Web应用开发中，JWT(JSONWebTokens)是一种广泛使用的认证机制。JWT不仅能够简化客户端与服务端之间的身份验证流程，还能增强数据传输的安全性。本文将深入探讨JWT的工作原理，并重点讲解如何确保JWT在实际应用中的安全性，特别是在防止JWT被篡改方面。JWT的工作原理JWT是一种开放标准（RFC7519），它定义了一种紧凑且
  • 基于 Gunicorn、Flask 和 Docker 的 Web 应用开发 勤劳兔码农 gunicornflaskdocker
    基于Gunicorn、Flask和Docker的Web应用开发教程欢迎语欢迎来到基于Gunicorn、Flask和Docker的Web应用开发教程，让我们开始构建你的微服务架构！第一部分：Docker和Flask简介1.1Docker基本概念Docker是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持Docker的机器上，确保了环境
  • Spring Boot 与 Spring Security 的集成及 OAuth2 实现 2的n次方_ springspringbootjava
    我的主页：2的n次方_在现代Web应用开发中，安全性是至关重要的。无论是保护用户的敏感数据，还是确保API只允许经过授权的请求访问，开发者都需要一个强大且灵活的安全框架来实现这些需求。SpringSecurity作为Spring框架的安全模块，能够为应用提供全面的安全保护。而OAuth2作为一种授权协议，广泛应用于单点登录（SSO）、社交登录、API保护等场景。本文将详细介绍如何在SpringBo
  • 编程好书推荐 diaoqu4574 嵌入式操作系统设计模式
    编程学习好书推介一、WEB应用开发人员必修功课类1、XHTML教程（XHTML）作者：ChelseaValentine,ChrisMinnickNewRiders原版，人民邮电出版社中文版是的，今天你最应该学习的是XHTML，而不是HTML。HTML4.x已经是一个被废弃了的标准，今天的标准是XHTML1.0。XHTML1.0也不是XHTML最新的版本，但是它是目前唯一得到浏览器广泛支持和唯一实用
  • OpenResty & Nginx：详细对比与部署指南 一个代码猎人 linuxopenrestynginx运维
    简介Nginx和OpenResty都是高性能的Web服务器和反向代理服务器，但它们有着不同的特性和应用场景。Nginx是一个轻量级的、高性能的HTTP和反向代理服务器，而OpenResty是基于Nginx的集成软件平台，增强了Nginx的功能，特别是通过嵌入Lua脚本支持来实现灵活的Web应用开发。Nginx1.Nginx概述Nginx(Engine-X)是一个免费、开源、高性能的HTTP服务器和
  • 新书速览|Django 5 Web应用开发实战 全栈开发圈 sqlite数据库
    构建未来，用Django5打造全新Web应用本书内容《Django5Web应用开发实战》集Django架站基础、项目实践、开发经验于一体，是一本从零基础到精通DjangoWeb企业级开发技术的实战指南。《Django5Web应用开发实战》内容以Python3.x和Django5版本为基础，从Django5构建项目开始，逐步深入讲述Django框架的各项功能要点，每个功能要点从源码角度分析，并在源码
  • Rust Web框架的选择 Hello.Reader rust前端rust
    一、概述Rust语言在系统编程领域的崛起，它的安全性、性能和并发特性也吸引了Web开发者的关注。本文将深入探讨当前流行的RustWeb框架，分析它们的特点、优势以及如何在Web开发中进行选择和使用。同时，我们还将提供一些实际的示例，帮助读者更好地理解和应用这些框架。二、RustWeb框架RustWeb框架是基于Rust语言设计的，用于简化Web应用开发过程的工具集。它们通常提供路由、请求处理、模板
  • WebSocket | 基于TCP的全双工通信网络协议 逐梦苍穹 JavaEE网络协议websockettcp/ip
    文章目录1、介绍2、示例2.1、分析2.2、代码开发2.3、功能测试作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹所属专栏：JavaEE✈您的一键三连，是我创作的最大动力1、介绍WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器
  • 速速报名，30万奖金不容错过！OpenTiny 挑战赛开发指南来咯~ 前端开源组件库低代码
    OpenTiny正在参加开放原子开源基金会的开源大赛，目前大赛活动正在火热进行中，报名截止时间是2024-03-15，还没上车的朋友们抓紧时间，报名参赛即有机会获得丰厚奖金，一等奖10万，总共30万。OpenTiny前端Web应用开发挑战赛报名链接：https://competition.atomgit.com/competitionInfo?id=341b80d53f...点击报名按钮即可报名参
  • 百度地图接口 | 实现校验收货地址是否超出配送范围 逐梦苍穹 java百度
    目录1.环境准备2.代码开发2.1application.yml2.2OrderServiceImpl作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹您的一键三连，是我创作的最大动力1.环境准备百度地图接口一般来说在外卖项目中的功能是，校验收货地址是否超出配送范围注册账号
  • [毕设项目-苍穹外卖]详细拆解分析项目的具体内容及心得体会 逐梦苍穹 项目java苍穹外卖毕业设计redismysqlswagger
    目录1、项目介绍2、功能介绍3、技术选型4、项目环境5、项目拆解⭐5.1、技术要点5.2、微信支付5.3、内网穿透5.4、部署上云6、心得体会作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹所属专栏：项目⭐Gitee地址：Java服务端完整代码(个人手敲)您的一键三连，是
  • 微信小程序的微信登录流程 逐梦苍穹 前端微信开放平台微信小程序微信登录
    目录1、登录流程2、wx.login3、auth.code2Session作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹所属专栏：前端您的一键三连，是我创作的最大动力1、登录流程小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户
  • Apache POI | Java操作Excel文件 逐梦苍穹 javaApachePOI阿帕奇Exel
    目录1、介绍2、代码示例2.1、将数据写入Excel文件2.2、读取Excel文件中的数据作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹您的一键三连，是我创作的最大动力1、介绍官网：ApachePOI-theJavaAPIforMicrosoftDocumentsApa
  • Node.js开发-express框架 中二Espresso Node.js开发node.jsexpress
    express框架1)介绍2)express路由3)express响应设置4)express其他响应5)express中间件6)静态资源中间件7)获取请求体数据body-parser8)Router路由模块化9)EJS模板引擎1)介绍express是一个基于Node.js平台的极简、灵活的WEB应用开发框架，官方网址：https://www.expressjs.com.cn/简单来说，expres
  • 内网穿透 | 推荐两个免费的内网穿透工具 逐梦苍穹 内网穿透网络ngrokcpolar
    目录1、简介2、Ngrok2.1、下载安装2.2、运行2.3、固定域名2.4、配置多服务3、cpolar3.1、下载安装3.2、运行作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹您的一键三连，是我创作的最大动力如果想要让自己简历上的项目经历显得更真实，最好是把项目上线并
  • Java Web应用开发简介 axinawang javawebjavaweb
    一、软件的三大类型1.单机类型：那些不需要联网的单机软件，如画图板、五笔打字等。2.CS类型：如QQ、大型游戏等。C即Client：客户端，处理一部分业务。S即Server：服务端，统一管理数据，处理一部分业务。3.BS类型：如淘宝、京东等。B即Browser：浏览器，主要用作展示数据，不处理业务。S即Server：服务端，管理数据，处理全部业务。二、什么是webweb，即WorldWideWeb
  • python获取热门搜索榜单Top20+可视化【附源码】 逐梦苍穹 项目爬虫网络爬虫python
    文章目录1、简介2、效果3、代码3.1、某音热搜3.2、某度热搜3.3、某博热搜3.4、图形化3.4.1、主窗口3.4.2、数据展示窗口3.5、完整代码4、视频作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹所属专栏：项目您的一键三连，是我创作的最大动力1、简介平时如果想
  • Java利用阿里云OSS/本地存储实现文件上传功能 逐梦苍穹 JavaWebjava阿里云OSS对象存储苍穹外卖
    目录1、简介2、本地存储3、阿里云OSS3.1、准备3.2、入门3.3、项目实施3.4、注意4、图片删除作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。主页：@逐梦苍穹✈所属专栏：JavaWeb您的一键三连，是我创作的最大动力1、简介文件上传，是指将本地图片、视频、音频等文件上传到服务器
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他