十二指环
十二指环

前端系列之CSS（布局案例）

效果图：

前端系列之CSS（布局案例）_第1张图片

hmtl文件


<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS网页布局title>
        <link href="css/index.css" rel="stylesheet">
    head>

    <body>
        
        <div class="header">
            <div class="logo">
                <img src="image/logo.png" alt="logo">
            div>
            <div class="nav">
                <ul>
                    <li>首页li>
                    <li>图片li>
                    <li>视频li>
                    <li>手记li>
                ul>
            div>
        div>
        
        <div class="main">
            <div class="top">
                <img src="image/1.png">
                
                <div class="topLayer">div>
                <div class="topLayer-top">
                    <div class="word">MY BEAUTIFUL LIFEdiv>
                    <button>LOOK MORE >button>
                div>
            div>
            <div class="middle">
                <div class="m-top">
                    <div class="commImg weiImg">
                        <img src="image/wb.png">
                        <div class="comm">MACROLOGYdiv>
                    div>

                    <div class="commImg chart">
                        <img src="image/wx.png">
                        <div class="comm">WCHARdiv>
                    div>
                    <div class="commImg qq">
                        <img src="image/qq.png">
                        <div class="comm">QQdiv>
                    div>
                div>
                <div class="clear">div>
                <div class="m-middle">
                    "I want to give goods things to record down,<br> after the recall will be very beautiful."
                div>
                <div class="m-bottom">
                    <div class="m-com">
                        <img src="image/03-01.png">
                        <div class="des1">Cool Imagediv>
                        <div class="des2">Record The Picturediv>
                    div>
                    <div class="m-com">
                        <img src="image/03-02.png">
                        <div class="des1">Cool Imagediv>
                        <div class="des2">Record The Picturediv>
                    div>
                    <div class="m-com">
                        <img src="image/03-03.png">
                        <div class="des1">Cool Imagediv>
                        <div class="des2">Record The Picturediv>
                    div>
                div>
            div>
            <div class="clear">div>
            
            <div class="bottom">
                <div class="content">
                    <div class="title">FROM THE PHOTO ALBUMdiv>
                    <div class="pic-content">
                        <dl>
                            <dt><img src="image/04-01.png">dt>
                            <dd class="word">Life is like a cup of tea,let people lead a preson to endless aftertastes.You agagin good taste,it will always have a different taste, different people will have different taste more.dd>
                        dl>
                        <dl>
                            <dt><img src="image/04-02.png">dt>
                            <dd class="word">Life is like a cup of tea,let people lead a preson to endless aftertastes.You agagin good taste,it will always have a different taste, different people will have different taste more.dd>
                        dl>
                    div>
                    <div class="clear">div>
                div>
            div>
        div>
        
        <div class="footer">div>
    body>

html>

index.css文件

* {
    padding: 0;
    margin: 0;
}

.header {
    width: 100%;
    height: 50px;
}

.header img {
    width: 150px;
    height: 42px;
    padding-left: 50px;
    padding-top: 8px;
}

.header .logo {
    float: left;
}

.header .nav {
    float: right;
}

.header .nav ul {
    padding-right: 50px;
}

.header .nav ul li {
    float: left;
    list-style: none;
    width: 40px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    font-weight: bolder;
    color: #7d7d7d;
}

.main .top {
    width: 100%;
    height: 300px;
}

.main .top img {
    width: 100%;
    height: 300px;
}

.main .topLayer {
    position: absolute;
    /*绝对定位*/
    top: 54px;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 300px;
    opacity: 0.5;
    /*透明度*/
}

.main .topLayer-top {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 200px;
    margin-top: -95px;
    z-index: 2;
    /*因为遮罩层也是脱离文档流的，所以要在这里设置相对高一些的层级*/
    right: 50%;
    margin-right: -250px;
}

.main .topLayer-top .word {
    padding-top: 50px;
    color: #ffffff;
    font-size: 45px;
    font-weight: bolder;
    /*字体加粗*/
    text-align: center;
    font-family: "Microsoft Sans Serif";
}

.main .topLayer-top button {
    width: 200px;
    height: 30px;
    margin-top: 25px;
    color: #ffffff;
    background-color: #f5704f;
    font-family: "Microsoft Sans Serif";
    text-align: center;
    font-weight: bolder;
    font-size: 14px;
    border-radius: 8px;
    margin-left: 150px;
}

.main .middle {
    width: 1000px;
    margin: 0 auto;
}

.main .middle .m-top .commImg {
    float: left;
    width: 33.3%;
    padding-top: 50px;
    text-align: center;
}

.main .middle .m-top .commImg img {
    width: 100px;
    height: 100px;
}

.main .middle .m-top .commImg .comm {
    font-size: 20px;
    color: #7d7c7f;
    font-weight: bold;
    padding-top: 20px;
}

.main .middle .m-middle {
    font-size: 22px;
    color: #e19796;
    font-weight: bold;
    padding-top: 50px;
    font-style: italic;
    text-align: center;
    padding-bottom: 50px;
}

.clear {
    clear: both;
}

.main .middle .m-bottom .m-com {
    float: left;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-size: 20px;
}

.main .middle .m-bottom .m-com img {
    width: 310px;
    height: 260px;
}

.main .middle .m-bottom .m-com .des1 {
    color: #7D7C7F;
    padding-top: 20px;
}

.main .middle .m-bottom .m-com .des2 {

    padding-top: 10px;
    color: #bdbdbc;
}

.main .bottom{
    background-color: #F9F9F9;
}

.main .bottom .content{
    width: 1000px;
    margin: 0 auto;
}

.main .bottom .content .title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #7D7C7F;
    font-family: "微软雅黑";
    padding-top: 50px;
    padding-bottom: 50px;
}

.main .bottom .content .pic-content dl{
    float: left;
    width: 470px;
    margin: 10px 12px;
}

.main .bottom .content .pic-content dl img{
    width: 470px;
    height: 460px;
}

.main .bottom .content .pic-content dl .word{
    padding-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #7D7C7F;
    padding-bottom: 50px;
}

你可能感兴趣的:(前端,css,布局,前端)

  • Webpack中的Loader详解
    Loader是Webpack中用于处理模块的转换器。它们可以将文件从一种格式转换为另一种格式，比如将TypeScript转换为JavaScript，将SCSS转换为CSS等。使用Loader，可以使Webpack处理各种类型的文件，而不仅仅是JavaScript。1.Loader基础1.1.基础使用Loader就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式地经过多个翻译
  • CST微波工作室学习笔记2 主要特点 raininforest CST学习硬件工程
    概要基于Windows98/Me、WindowsNT4、Windows2000和WindowsXP的图形用户界面快速并能有效使用内存的有限积分（FI）算法由于理想边界拟合技术和薄片技术的采用，性能更加卓越结构建模基于先进ACIS内核的参量化实体建模前端，并附带优异的结构可视化功能。内含多种建模技术，可快速进行结构变换。可通过SAT（如AutoCAD）、IGES、STEP、ProE、CATIA4、C
  • Python爬虫（57）Python数据可视化全攻略：Matplotlib从入门到三维动态图表（8000字实战教程） 一个天蝎座白勺程序猿 Python爬虫入门到高阶实战python爬虫信息可视化
    目录背景与需求分析第一章：Matplotlib基础与核心工作流1.1环境配置与基础架构1.2基础图表类型实战1.2.1折线图进阶1.2.2分组柱状图第二章：高阶可视化技术2.1子图矩阵与多面板布局2.2动态可视化与动画第三章：行业案例实战案例1：电商用户行为分析案例2：医疗影像数据可视化第四章：可视化美学与工程优化4.1配色方案实战4.2百万级数据渲染优化第五章：交互式扩展方案5.1Matplot
  • 前端领域 Vite 与 Webpack 的深度对比 前端视界 前端webpacknode.jsai
    前端领域Vite与Webpack的深度对比关键词：Vite、Webpack、前端构建工具、模块打包、开发体验、性能优化、ESModules摘要：本文深入对比前端领域两大构建工具Vite和Webpack的核心原理、架构设计和使用场景。通过分析它们的底层机制、开发体验、构建流程和性能表现，帮助开发者理解如何在不同项目需求下做出合理选择。文章包含详细的技术原理图解、实际项目对比示例和未来发展趋势分析。背
  • js获取文件夹中的所有文件和子文件夹 枫叶&情缘 JavaScriptjq前端javascript前端开发语言
    获取文件夹中的所有文件和子文件夹打开文件夹/***获取按钮元素并添加点击事件处理函数*/varbtn=document.querySelector('button');btn.onclick=asyncfunction(){//显示文件选择器constdirectoryHandle=awaitwindow.showDirectoryPicker();//处理目录awaitproecssHandle
  • 【T2I】R&B: REGION AND BOUNDARY AWARE ZERO-SHOT GROUNDED TEXT-TO-IMAGE GENERATION Akttt T2I计算机视觉人工智能text2img深度学习
    CODE:2309https://github.com/StevenShaw1999/RnBABSTRACT近期的文本到图像（T2I）扩散模型在以文本提示作为输入生成高质量图像方面取得了显著进展。然而，这些模型无法传达布局指令所指定的合适空间构图。在这项工作中，我们探索了使用扩散模型进行零样本接地T2I生成，即无需训练辅助模块或微调扩散模型就能生成与输入布局信息相对应的图像。我们提出了一种区域与边
  • 纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查) 与鱼有约 前端vscodeide
    纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)简介本项目为一个纯前端实现的本地文件管理器网页（index.html），可在Chrome/Edge浏览器中直接打开，具备类似VSCode的本地文件夹操作体验。无需后端，所有功能均在浏览器端实现。主要功能选择本地文件夹用户点击左上角文件夹按钮，授权后可浏览和操作本地文件夹内容。文件树展示以树形结构展示所选文件夹下的所有文件和子文件夹
  • WHAT - TTF 和 OTF 字体格式 @PHARAOH 前端javascript字体
    文章目录基础定义核心区别轮廓技术（绘制字体的“骨架”）功能扩展兼容性文件大小如何选择？一个小贴士更多关于前端开发中字体介绍请阅读：WHAT-前端开发中的字体基础定义格式全称简介TTFTrueTypeFont由苹果和微软在1980年代联合开发的字体格式。OTFOpenTypeFontAdobe和微软开发的更现代的字体格式，基于TTF或PostScript。核心区别轮廓技术（绘制字体的“骨架”）TTF
  • Vue3 - 详解播放m3u8视频流+HLS拉流推流完整方案，vue3如何播放m3u8格式文件实时视频播放教程（流媒体播放、直播视频流、实时摄像头监控视频流对接、后端服务器切片分片传输视频流边下边播） 王二红 +Vue3开发问题汇总vue3m3u8hlsvue3播放m3u8视频流教程vue播放m3u8文件vue3直播视频流播放摄像头实时监控画面视频流
    前言如果您需要Vue2版本，请访问这篇文章。在vue3（PC端+移动端H5）项目开发中，实现m3u8+hls视频流播放、实时流媒体播放高性能无延迟方案及源码，vue3播放3mu8文件/直播视频流，实时流媒体播放需求、做直播实时传输播放、摄像头监控画面视频流、服务器后端视频切片分段返给前端+边下边播等需求，解决前端网页播放视频流卡顿加载慢、无法载入黑屏、播放不流畅、CORS跨域、安卓苹果浏览器兼容等
  • StackPanel和Grid lph1972 c#
    StackPanel只会在它的排列方向上填充内容，不会在另一方向上自动拉伸子元素，这就是它的核心行为。Grid是任意方向填充例所以常用stackpanel嵌套Grid横向stackpanel宽度自动延伸Width="{x:Staticsys:Double.NaN}"Height="500"填控件剩下需要再布局的部分嵌套GridHorizontalAlignment不是StackPanel本身的布局
  • JavaScript-异步编程 斜杠青年C javascript开发语言前端
    一、日常前端开发使用的异步编程方法回调函数事件监听PromiseGeneratorasync/await二、同步编程和异步编程的区别1、什么是同步同步是执行某段代码时，在该代码没有得到返回结果前，其他代码是无法执行的，但是一旦拿到返回值，就可以执行其他的代码2、什么是异步异步就是当某段代码执行异步过程调用发出后，这段代码不会立刻得到返回结果，而是在异步调用发出之后，一般通过回调函数处理这个调用之后
  • 前端计算机视觉：使用 OpenCV.js 在浏览器中实现图像处理 亿只小灿灿 前端OpenCV前端计算机视觉opencv
    一、OpenCV.js简介与环境搭建OpenCV（OpenSourceComputerVisionLibrary）是一个强大的计算机视觉库，广泛应用于图像和视频处理领域。传统上，OpenCV主要在后端使用Python或C++等语言。但随着WebAssembly(Wasm)技术的发展，OpenCV也有了JavaScript版本——OpenCV.js，它可以直接在浏览器中高效运行，为前端开发者提供了前
  • 数据库设计体系化知识（后端+前端+AI+三高场景+大厂面试+简历包装） @一叶之秋 Java架构师学习路线数据库前端人工智能java
    数据库设计体系化知识（AI融合版：后端+前端+AI+三高场景+大厂面试+简历包装）一、数据库设计基础：范式理论+AI辅助建模1.核心知识（AI赋能表结构设计）（1）三大范式+AI校验规则落地：用AI代码生成工具（如Copilot）自动校验表结构是否符合范式。→示例：输入“设计学生-班级表”，AI生成符合3NF的表结构，并标注冗余字段风险。后端协同：Java后端通过SchemaValidator工具
  • 推荐使用：webpack的高效EJS模板加载器 —— ejs-compiled-loader 雷柏烁
    推荐使用：webpack的高效EJS模板加载器——ejs-compiled-loaderejs-compiled-loaderEJSloaderforwebpack(withoutfrontenddependencies)项目地址:https://gitcode.com/gh_mirrors/ej/ejs-compiled-loader在前端开发的浩瀚星空中，高效的模板引擎和构建工具是构建高性能应
  • 前端面试题整理-场景设计题 C_greenbird 前端学习前端javascriptcss
    1.如何使用css画一个三角形借助border实现，在width和height都为0时，设置border，便会呈现三角形。想要哪个方向的三角形，设置其他三边为透明即可。同时，可以通过调整不同边的宽度，来调整三角形的高度和宽度。三角符号/*记忆口诀：盒子宽高均为零，三面边框皆透明。*/div:after{position:absolute;width:0;height:0;content:"";bo
  • 微信小程序｜流浪动物救助小程序的设计与实现 qq_469603589 微信小程序小程序微信小程序
    作者主页：编程指南针作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容：Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路关注作者有好处文末获取源码项目编号：L-BS-XZBS-30一，环境介绍语言环境：Java:jdk1
  • 前端 React.js 项目的性能优化的成功案例分析 前端视界 前端艺匠馆前端react.js性能优化ai
    前端React.js项目的性能优化的成功案例分析关键词：React.js性能优化、代码拆分与懒加载、虚拟列表与长列表优化、Webpack深度调优、Fiber架构实践、SSR与SSG落地、React.memo与useCallback最佳实践摘要：本文通过三个真实企业级React项目的性能优化案例，系统解析从性能瓶颈诊断到优化策略落地的完整流程。结合React核心原理（如Fiber架构、虚拟DOMdi
  • 【手写前端面试题01】防抖和节流 全栈前端老曹 javascript前端javascript学习防抖节流
    《手写防抖和节流：从“打工人”到“时间管理大师”》一、本质理解（别被术语吓到）防抖（debounce）是什么？玩游戏看60秒广告只需要完整看一次就行了，退出去一次重新60秒，别一直退✅核心思想：在事件被触发后，等待一段时间，如果这段时间内没有再次触发，才执行。节流（throttle）又是什么？闪现CD：不管多急，都要等冷却好才能再次使用✅核心思想：多次触发→只按固定频率执行，在一定时间内只允许执行
  • python爬虫爬百度云盘的资源 oaa608868 百度云爬虫python
    最近百度云盘不知道为啥不提供资源检索，正好最近看了一下python，正好来练练手，写歌爬虫爬一下百度云盘的资源。分析了一下百度云盘的网友源码和js文件，里面有大量ajax的东西，利用json传输数据，前端显示。话说，这样数据爬去就方便多了，也不要用scrapy啥的，直接解析json数据就好。分析js文件提炼了下面三个链接：URL_SHARE='http://yun.baidu.com/pclo
  • 大学专业科普 | 计算机应用、视觉与算法 鸭鸭鸭进京赶烤 计算机应用
    一、专业概述计算机应用专业是一门实践性很强的学科，专注于将计算机技术转化为实际应用，服务于各个行业和领域，为社会的数字化转型提供人才支撑。二、课程设置专业基础课程：包括计算机组成原理、操作系统、数据结构、计算机网络等，为学生构建坚实的理论基础。专业核心课程：聚焦于程序设计语言（如C、C++、Java、Python等）、数据库原理与应用、软件工程、Web前端开发等，使学生具备开发各类软件系统的能力。
  • js 允许生成特殊的变量名 基于字符集编码混淆的 XSS 绕过漏洞 -- Google 2025 Lost In Transliteration A5rZ 网络安全
    题目实现了一个字符转换工具在/file路由用户可以通过ct参数自定义Content-Type//文件路由-提供静态文件服务（JS和CSS），支持内容类型验证app.MapGet("/file",(stringfilename="",string?ct=null,string?q=null)=>{//根据文件名查找对应的模板文件string?template=FindFile(filename);i
  • 为了方便学习icss项目上的css技巧，我用next.js写了一个网站 前端next.js
    icss-website一、项目简介与定位icss-website是一个基于Next.js14（AppRouter架构）开发的现代化CSS技巧展示平台，致力于为前端开发者、设计师和技术爱好者提供一个高效、优雅、易用的CSS奇技淫巧学习与交流空间。项目以GitHub上的iCSS仓库为内容源，通过API动态获取、分类、展示和高亮CSS相关的文章与代码示例，支持多主题、多语言、响应式布局和丰富的交互体验
  • 探索 Vue.js 组件的最新特性 vue.js
    引言：Vue.js作为一款流行的前端框架，始终在不断发展和演进，为开发者带来新的特性和功能，以提升开发效率和用户体验。Vue.js组件是构建Vue应用的基础，其最新特性为开发者提供了更强大的工具和更灵活的开发方式。本文将深入探讨Vue.js组件的一些最新特性，包括组合式API、Teleport、Suspense等，帮助开发者更好地掌握和运用这些特性，从而构建出更加高效、复杂的前端应用。组合式API
  • 【CSS-14-基础样式表Base.css】如何编写高质量的Base.css：前端样式重置与基础规范指南 AllenBright #CSS前端css
    在前端开发中，Base.css（也称为重置样式表或基础样式表）是整个项目样式的基石。它负责消除浏览器默认样式的差异，建立统一的样式基准，为后续开发提供一致的起点。一个精心设计的Base.css能够显著提高开发效率，减少浏览器兼容性问题，并保持项目样式的一致性。1.Base.css的核心作用样式重置（Reset）：消除不同浏览器之间的默认样式差异基础规范（BaseRules）：定义项目通用的基础样式
  • MVVM前端开发模型,怎么快速定位问题
    MVVM（Model-View-ViewModel）是一种常见的前端开发架构，主要用于分离应用的逻辑和UI，提升代码的可维护性和可测试性。在MVVM中，Model代表数据层，View代表用户界面层，而ViewModel是连接两者的中介，负责处理UI和数据之间的交互。在开发中，尤其是调试和快速定位问题时，可能会遇到一些挑战。以下是一些基于MVVM前端架构的调试技巧和方法：1.明确问题的层次首先，要清
  • 前端流式输出3种实现 呼叫6945 前端javascript
    在前端开发中，流式输出（streamingoutput）通常是指逐步输出数据，而不是等待所有数据准备好后一次性显示。这种技术在处理大型数据集、实时数据或需要逐步加载内容的情况下非常有用。下面介绍几种实现流式输出的方法，包括使用FetchAPI和EventSource。1.使用FetchAPI实现流式输出通过FetchAPI和可读流（ReadableStreams），可以在响应到达时逐步读取和处理数
  • ES6模块化 vs CommonJS：你需要知道的7个关键区别 前端视界 前端大数据与AI人工智能前端艺匠馆es6前端ecmascriptai
    ES6模块化vsCommonJS：你需要知道的7个关键区别关键词：ES6模块化、CommonJS、模块系统、静态导入、动态绑定、循环依赖、Node.js摘要：本文将用“快递包裹”“超市购物”等生活化比喻，结合代码示例，从7个核心维度对比ES6模块化（ESM）与CommonJS（CJS）的差异。无论是前端新手还是后端开发者，都能轻松理解两种模块系统的设计逻辑、行为差异及实际应用场景。背景介绍目的和范
  • 浏览器兼容性(手机、电脑。js、html、css) weixin_44828071
    浏览器兼容性13标准网页布局的兼容性处理标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE7、IE6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。IE浏览器对于标准技术的支持是很不完善的，这些问题可以分为两种：一种是IE支持某种技术或功能，
  • 关于HTML/CSS/JS常见兼容性整理 _Daniel_
    13标准网页布局的兼容性处理标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE7、IE6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。IE浏览器对于标准技术的支持是很不完善的，这些问题可以分为两种：一种是IE支持某种技术或功能，但是实现该功
  • 原子化CSS革命：用TailwindCSS v4构建高效前端工作流 Jokerator css
    一、原子化CSS：前端样式的新范式1.1定义与核心思想原子化CSS（AtomicCSS）是一种CSS架构方法论，它将样式拆分为最小单位的“原子”类，每个类只负责一个单一的视觉属性。例如：/*原子类示例*/.mt-4{margin-top:1rem;}.text-center{text-align:center;}.bg-blue-500{background-color:#3b82f6;}与传统C
  • 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其他