小徐要考研
小徐要考研

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】

文章目录:

  • 1.清除默认样式
    • 1.1清除内外边距
    • 1.2清除列表圆点(项目符号)
  • 3.外边距问题-合并现象
  • 4.外边距问题–塌陷问题
  • 5.行内元素垂直内外边距
  • 6.圆角与盒子阴影
    • 6.1圆角
    • 6.2 盒子模型-阴影(拓展)

综合案例一 产品卡片
综合案例二 新闻列表

1.清除默认样式

在实际设计开发中,要清除默认的样式,默认的内外边距

1.1清除内外边距

box-sizing可以加到这里面写,控制盒子大小

*{ bn
margin: 0;
padding: 0;

box-sizing: border-box;
}

1.2清除列表圆点(项目符号)

li {
list-style: none;
}

2.盒子模型–元素溢出

作用:控制溢出元素的内容的显示方式
属性名: overflow
属性值

属性值 效果
hidden 溢出隐藏
scroll 溢出滚动(无论是否溢出,都显示滚动条位置)
auto 溢出滚动(溢出才显示滚动条位置)

3.外边距问题-合并现象

场景:垂直排列的兄弟元素，上下margin会合并
现象:取两个margin中的较大值生效
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】_第1张图片

.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}

4.外边距问题–塌陷问题

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】_第2张图片
解决方法:

  • 取消子级margin，父级设置padding
  • 父级设置overflow: hidden
  • 父级设置border-top

5.行内元素垂直内外边距

场景:行内元素添加margin和 padding，无法改变元素垂直位置
解决方法:给行内元素添加line-height可以改变垂直位置

span {
/*margin和padding属性,无法改变垂直位置*/
margin: 50px;
padding: 20px;

/*行高可以改变垂直位置*/
line-height: 100px;
}

6.圆角与盒子阴影

6.1圆角

作用:设置元素的外边框为圆角。
属性名:border-radius
属性值:数字+px/百分比
提示:属性值是圆角半径

<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: orange;
/*border-radius: 20px;*/
/*记忆:从左上角顺时针赋值,没有取值的角与对角取值相同*/
/产四值:左上 右上 右下 左下*/
/*border-radius: 10px 20px 40px 80px;*/
/*三值:左上右上+左下右下*/
/*border-radius: 10px 40px 80px;*/
/产两值:左上+右下右上+左下*/
border-radius: 10px 80px;
}
style>
  • 常见应用-正圆形状
    • 给正方形盒子设置圆角属性值为宽高的一半/50%
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
       img{
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;
        padding: 100px;
        border-radius: 50%;
       }
    style>
   
head>
<body>
    <img src="E:\E盘_U盘文件夹\图片资源2\150px.jpg" >
body>
html>

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】_第3张图片

  • 常见应用-胶囊形状
    • 给长方形盒子设置圆角属性值为盒子高度的一半

6.2 盒子模型-阴影(拓展)

作用:给元素设置阴影效果
属性名: box-shadow
属性值:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:

  • x轴偏移量和Y轴偏移量必须书写
  • 默认是外阴影，内阴影需要添加inset
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
       img{
        width: 100px;
        height: 100px;
        display: block;
        margin: 50px auto;
        border-radius: 50%;
        box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
       }
    style>
   
head>
<body>
    <img src="E:\E盘_U盘文件夹\图片资源2\150px.jpg" >
body>
html>

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】_第4张图片

综合案例

综合案例一 产品卡片

CSS书写顺序:
1.盒子模型属性
2.文字样式
3.圆角、阴影等修饰属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #f1f1f1;
        }
        .product{
            margin: 50px auto;
            width: 270px;
            height: 253px;
            background-color: #fff;
            text-align: center;
            padding: 40px;
            border-radius: 10px;
        }
        .product h4{
            margin-top: 20px;
            margin-bottom: 12px;
            color: #333;
            font-size: 18px;
            font-weight: 400;
        }
        .product p{
            font-size: 12px;
            color: #555;
        }
    style>
head>
<body>
    <div class="product">
        <img src="./images/liveSDK.svg">
        <h4>抖音直播SDKh4>
        <p>包含抖音直播看播功能p>
    div>
body>
html>

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】_第5张图片

综合案例二 新闻列表

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻列表title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .news {
      margin: 100px auto;
      width: 360px;
      height: 200px;
      /* background-color: pink; */
    }

    .news .hd {
      height: 34px;
      background-color: #eee;
      border: 1px solid #dbdee1;
      border-left: 0;
    }

    .news .hd a {
      /* -1 盒子向上移动 */
      margin-top: -1px;
      display: block;
      border-top: 3px solid #ff8400;
      border-right: 1px solid #dbdee1;
      width: 48px;
      height: 34px;
      background-color: #fff;

      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #333;
    }

    .news .bd {
      padding: 5px;
    }

    .news .bd li {
      padding-left: 15px;
      background-image: url(./images/square.png);
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    .news .bd li a {
      padding-left: 20px;
      background: url(./images/img.gif) no-repeat 0 center;

      font-size: 12px;
      color: #666;
      line-height: 24px;
    }

    .news .bd li a:hover {
      color: #ff8400;
    }
  style>
head>
<body>
  
  <div class="news">
    <div class="hd"><a href="#">新闻a>div>
    <div class="bd">
      <ul>
        <li><a href="#">点赞“新农人” 温暖的伸手a>li>
        <li><a href="#">在希望的田野上...a>li>
        <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表a>li>
        <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？a>li>
        <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈a>li>
        <li><a href="#">多地力推二手房“带押过户”，有什么好处？a>li>
      ul>
    div>
  div>
body>
html>

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】_第6张图片

你可能感兴趣的:(前端web开发,前端,html5,css)

  • Python,Go开发光电效应与日常应用APP Geeker-2025 pythongolang
    以下是一个基于Python与Go开发的光电效应科普与应用APP的完整技术方案，结合了物理原理模拟、实时数据处理及生活场景应用，参考了工业级开发实践（如光电实验数据处理和能源设备控制）：---###一、系统架构设计```mermaidgraphLRA[Go微服务层]-->B[Python科学计算层]A-->C[数据库/物联网]B-->D[硬件接口]D-->E[传感器/实验设备]subgraph前端A
  • 不只是“能用”：从语义化到 ARIA，打造“信息无障碍”Web 应用的实战清单 码力无边-OEC 前端javascriptwebhtml
    不只是“能用”：从语义化到ARIA，打造“信息无障碍”Web应用的实战清单作为前端开发者，我们每天都在用代码构建一个五彩斑斓的数字世界。我们痴迷于像素级的精准、流畅的动画和极致的性能。但我们是否想过，对于某些用户来说，这个世界可能是一片漆黑，或者充满了无法逾越的障碍？闭上眼睛，想象一下你是一位视障者。你如何“阅读”一个新闻网站？你依赖一个叫做“屏幕阅读器”的软件，它会大声朗读出页面上的内容。当你听
  • Python,C++开发磁流体研究以及应用APP Geeker-2025 pythonc++
    #Python与C++开发磁流体研究与应用APP方案以下是一个结合Python与C++的磁流体(MHD)研究与应用APP的完整技术方案，融合了高性能计算、实时仿真和工业应用场景：##系统架构设计```mermaidgraphTDA[用户界面层]-->B[Python应用层]B-->C[C++核心计算层]C-->D[硬件接口层]D-->E[实验设备/传感器]subgraph前端A1[桌面端-PyQt
  • Selenium 中 findElement 方法全解析：定位网页元素的 7 种方式 二向箔reverse selenium测试工具
    在自动化测试和网页数据抓取场景中，准确找到目标元素是核心任务。Selenium提供的findElement方法支持多种定位策略，本文将深入介绍各种搜索模式的完整语法及适用场景。一、CSS选择器定位CSS选择器是定位网页元素的首选方式，它具有语法简洁、性能优异的特点。1.基本选择器元素选择器语法与说明：driver.find_element(By.CSS_SELECTOR,"标签名")通过HTML标
  • XSS总结：跨站脚本（XSS）攻击向量（精） 墨痕诉清风 渗透常识研究xssjavascriptfirefox
    alert(1)alert("xss")alert(9801)//url参数，加载元素//edit输入框插入//学SQL注入？其第一个1为正常参数1">alert(1)事件处理不需要用户交互的事件处理程序激活元素时触发(IE)页面打印后触发（Chrome、Firefox、IE)CSS动画取消时触发(Firefox)@keyframesx{from{left:0;}to{left:1000px;}}
  • 组件分享之后端组件——基于Java的分布式系统的延迟和容错组件(熔断组件)Hystrix cn華少
    组件分享之后端组件——基于Java的分布式系统的延迟和容错组件(熔断组件)Hystrix背景近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。组件基本信息组件：Hystrix开源协议：LICENSE内容本节我们分享一个基于Java的分布式系统的延迟和容错组件(熔断组件)Hystr
  • 对于页面适配，你应该使用px还是rem мо仙堡杠把子灬 css做一个有知识的流氓
    其实一切都还好，没有那么糟糕。css中的单位很多，%、px、em、rem，以及比较新的vw、vh等。每个单位都有特定的用途，比如当需要设置一个矩形的宽高比为16:9，并且随屏幕宽度自适应时，除了用%，其他单位是很难做到的。所以不存在说某个单位是错误的，某个单位是最好的这种说法。那本文说的页面适配，指的是同样的布局，在不同大小的屏幕上怎么进行缩放、控制间距、宽高、字号等大小。页面适配的方式有很多：使
  • 秒杀系统设计思路 先生zeng
    昨天遇到这个问题，发现自己临时总结的不是很好，所以现在想重新整理一下思路。分析一下问题:类似淘宝那种做秒杀系统活动，你是如何设计的？场景分析:1.需到达某个时刻才可以开始秒杀(某个时刻之前需要控制拒绝请求)。2.一瞬间大量的请求到后台，服务器，数据库，缓存都会扛不住。(前端拦截、削峰，限流)3.满足条件才可以进行秒杀(最先过滤这些不满足条件的)4.防止恶意刷单请求，网站攻击(SQL注入，CSRF)
  • 软件测试理论基础、质量保证常见面试题 程序员阿沐
    全面掌握软件测试理论基础、文档编写，测试流程1.测试分为哪几个阶段?⒉谈谈你之前测试的项目流程，在每个阶段的输出有哪些?3.谈谈敏捷模式的认识?4.linux常见查看日志命令有哪些?5.线上质量BUG频频爆发怎么办?6.如何分析一个bug是前端还是后端的问题?这些问题你一定要能够很全面的表述出来。比如说我现在是面试官，我第一个肯定不会去问你哪些代码的问题，也不会问你自动化、测试开发的问题。第一个查
  • 小程序, uni-app等不支持svg标签的情况下,svg图标解决方案 非常帅气的昵称吧
    SVG因其缩放不失真,可动态改变颜色等特点,在web开发中得到了广泛的使用,目前常见的使用方式有两种1.转换成字体文件线上的网站很多,像iconfont,iconmoon等,可以把选定的图标整合成一套字体文件,然后以特定的标签+类名进行使用2.使用symbol引用主要原理就是把所有要用到的svg文件代码,整合到一个代码块内,并给定每个svg图片一个唯一ID,使用时候通个这个ID引入具体的svg图片
  • 电竞护航小程序源码游戏代练小程序源码搭建游戏派单小程序定制开发 D15554088058 游戏小程序
    独立源码前端uniapp后端phpthinkphp6的框架开源无加密适合运营或者二次开发。欢迎私信（头像11位数字）功能列表：游戏分类：后台添加设置游戏分类分销奖励：推荐打手绑定关系，二级奖励，奖励比例手台设置管事：购买管事权益推荐打手绑定推荐关系，二级奖励，奖励比例后台设置，比打手的奖励高发布订单：后台添加商家成为商家商家添加客服成为客服之后才可以在小程序端发布订单打手接单：打手需要缴纳保证金后
  • 将HTML+JS+CSS数独游戏包装为安卓App yivifu web前端htmljavascriptcssandroidstudio
    HTML+JS+CSS制作一个数独游戏-CSDN博客中开发了一个数独游戏，这个数独游戏提供了一次性回退到指定步骤的辅助功能，在解决复杂数独问题时十分有帮助，可作为玩数独游戏的辅助工具，因此，考虑将它改装成安卓App安装在手机上，可以更方便使用。将纯HTML程序包装成安卓App在编码方面根本没有什么难度，真正的难度在于开发环境的配置和程序的编译运行。花了一个多星期，才总算编译成功了。有图有真相，在A
  • 我的前端封装之路
    最近有粉丝提问了我一个面试中遇到的问题，他说面试的时候，面试官问我：你在以前的项目中封装过组件吗？或者做过npm公共库吗？遇到过什么问题吗？当时自己突然觉得好像没什么可回答的啊，但面试结束想起来，自己在前端开发工作中貌似又在不停的封装东西。但因为没有提前准备这类问题，所以回答的不是很理想。这篇文章，我说一些我的封装工作历程，希望对大家有帮助吧。目录1那是一个日历组件1.1S1.2T1.3A1.4R
  • html5及css有什么区别,html5和css3的区别是什么？ weixin_39788256 html5及css有什么区别
    html5和css3是什么？区别是什么？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。什么是HTML5？HTML，超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。是用于描述网页文档的一种标记语言。html5是HTML第五次重大修改后的版本，是当前最新版本，主要特点是支持原生的视频播放、离线存储、更多的语义
  • 前端埋坑之js console.log字符换行后 html没换行问题处理 做个有准备的人 前端埋坑之路-前端技术前端十年之路前端javascripthtml
    方法：//命令字符处理（字符串超过N字之后换行处理）wrapText(text,n){n=n||70;//默认每70个字符换行if(text.length>n){letresult=text.slice(0,n);leti;for(i=n;i<text.length;i+=n){result+='\n'+text.slice(i,i+n);}re
  • 前端转后端学习路线整理
    一、背景本人是一名Web前端开发，技术栈是Vue和React，不会Node。之前学过，但是因为一些原因（比如没有使用场景，很多概念无法理解，学完就忘等）一直也没有掌握。因为在CMS部门耳濡目染时间久了，感觉不学点后端有点说不过去，而且学起来之后发现也挺有兴趣的。但是对于一名前端开发（而且在学校的时候基本没学习）来说要学习的内容实在太多了，开始的困难在于理清各种技术都是干什么的以及它们之间的关系。现
  • 《前端基础核心知识笔记：HTML、CSS、JavaScript 及 BOM/DOM》 萌新小白的逆袭 前端笔记htmljavascript
    html前端三剑客的介绍：HTML:页面内容的载体Css：用来美化和指定页面的显示效果JavaScript：页面显示的过程中，可以动态改变页面的内容重点属性type="text"文本输入type="password"密码输入SerlvertC超链接type="radio"value="值"单选框type="checkbox"value="值"多选框在作用设置编码格式 action是跳转的界面met
  • 一文讲透HTML语义化标签
    文章目录语义化标签概述HTML标签及其含义常见HTML5语义化标签语义化标签对搜索引擎（SEO）的影响提升搜索引擎排名增强可访问性改善用户体验语义化标签案例各标签作用说明语义化标签概述HTML语义化是指使用恰当的标签来准确表达内容的结构和含义，使网页不仅对人类开发者可读，也能被搜索引擎、辅助技术等更好地理解和处理。例如，用表示页眉，表示独立内容区块，提升页面可访问性和SEO效果。HTML标签及其含
  • CSS面试题及详细答案140道之（101-120） 还是大剑师兰特 前后端面试题css大剑师CSS面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录101.解释`text-indent`属性的作用。102.如何在CSS中实现响应
  • 网站前端开发-实训续篇+总结 yue_jia
    实训五学生管理篇（可将学校、学院、班级与学生关联起来）一、从后端（projectName）添加学生模块1、在models目录下添加student.js：image.pngprojectName/db/models/student.js：constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String
  • 绝对定位 vs 浮动：CSS布局核心差异解析 代码的余温 css前端
    在CSS布局中，position:absolute和float都能实现元素脱离常规文档流，但它们在定位机制、布局影响和使用场景上有本质区别：一、核心区别总结特性position:absolutefloat脱离文档流✅完全脱离，不占空间✅部分脱离（保留浮动流空间）定位基准相对于最近的非static祖先元素相对于父容器或相邻浮动元素元素类型转换自动转为块级元素（类似display:block）自动转为
  • web前端入门到实战：CSS实现8种炫酷按钮 大前端世界
    今天给大家分享8种炫酷按钮的CSS实现。1.3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：HTML：3DButton1CSS:.button-3d-1{position:relative;background:orangered;bo
  • 如何区别HTML和HTML5？ 代码的余温 htmlhtml5前端
    要区分HTML（通常指HTML4及更早版本）和HTML5，主要可以从以下关键方面进行比较：一、文档声明区别二、语义化标签对比用途HTML4标签HTML5新标签头部区域导航栏内容区块独立文章侧边栏页脚主要内容区✅HTML5通过语义化标签取代了泛滥的，提升可读性和SEO三、多媒体支持差异四、图形技术演进constctx=document.getElementById('myCanvas').getCo
  • 架构解密｜一步步打造高可用的 JOCR OCR 识别服务 xgc_java 架构ocr状态模式
    架构解密｜一步步打造高可用的JOCROCR识别服务在各类拍照取字、票据扫描、合同归档的场景中，OCR（光学字符识别）早已成为核心能力。但要把“图片→文字”打磨成一条工业级、可观测、可扩展的服务链路，绝不仅仅是简单地调用第三方接口。本文将结合JOCROCR识别完整流程图，深入剖析从前端到最终结果的每一个环节，帮助你用架构思维设计高可用、高性能、低成本的OCR服务。一、整体架构全景在深入细节之前，我们
  • 探索Pebble时代遗留的瑰宝：Slate框架简介 宣苓滢Rosa
    探索Pebble时代遗留的瑰宝：Slate框架简介项目介绍随着技术迭代的脚步，Slate——曾经为Pebble智能手表应用提供强大支持的前端框架，虽然已被Clay取而代之，但其在移动配置页面开发领域的创新精神值得回顾。它以简洁高效的设计理念，让开发者能够快速创建美观且用户友好的配置界面，曾是众多Pebble应用背后的功臣。技术深度剖析Slate基于轻量级的JavaScript库Zepto.js构建
  • 学习 Python 爬虫需要哪些基础知识？ 广州山泉婚姻 python爬虫
    学习Python爬虫需要掌握一些基础技术和概念。1.Python基础语法这是最根本的前提，需要熟悉：-变量、数据类型（字符串、列表、字典等）-条件判断、循环语句-函数、类与对象-模块和包的使用（如import语句）2.网页基础了解网页的构成和工作原理：-HTML结构：能看懂标签、属性，知道如何定位内容（如div、span、a标签等）-CSS选择器：用于精准定位网页元素（如类选择器.class、ID
  • 代码随想录算法训练营总结篇 m0_74934708 算法
    第一次接触卡哥的课程是在大二上，当时做N皇后的题目看到卡哥的视频觉得大受裨益，就想着有时间能够刷完卡哥录制的整期课程，后面有算法训练营的监督让我很幸运地坚持了六十天，学到了很多东西，像贪心算法、动态规划、单调栈以及在二叉树里使用BFS和DFS，都是一些很美妙的思路。这次一刷leetcode后面要去学学前端了，等到暑假有时间希望可以跟着卡哥二刷leetcode。学会算法后再去做题有些痛苦，但做出来的
  • 【前端vue3面试题】2024最新面试实录vue3(2)，最新前端大厂高频面试题
    *watch与watchEffect*provide与inject重构虚拟DOM,diff算法生命周期更名beforeDestroy改名为beforeUnmountdestroyed改名为unmounted//Vue3.0也提供了CompositionAPI形式的生命周期钩子，与Vue2.x中钩子对应关系如下：beforeCreate===>setup()created===>setup()bef
  • 运维技术干货 — 不仅是 Linux 运维最佳实践 python算法小白 Linux
    附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：书单导航页（点击右侧极客侠栈即可打开个人博客）：极客侠栈①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)④【Web前端】从HTML到JS到AJ
  • 前端性能与可靠性工程:前端韧性工程 - 优雅降级与离线支持 weixin_42587823 前端和可靠性工程前端
    前端性能与可靠性工程:前端韧性工程-优雅降级与离线支持第一部分：思维转变-从“在线优先”到“离线优先”传统的Web开发模式是“在线优先(OnlineFirst)”：我们默认用户的网络是稳定且快速的，然后再把错误处理作为一种例外情况来补充。而韧性工程要求我们进行一次思维上的彻底转变，采纳“离线优先(OfflineFirst)”的模式：我们默认网络是不可靠甚至不存在的，在此基础上构建一个核心可用的应用
  • log4j对象改变日志级别 3213213333332132 javalog4jlevellog4j对象名称日志级别
    log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
  • elk+redis 搭建nginx日志分析平台 ronin47 elasticsearchkibanalogstash
                 elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l
  • Yii2设置时区 dcj3sjt126com PHPtimezoneyii2
    时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
  • js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
  • 持续集成工具 g21121 持续集成
            持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
  • 数据结构哈希表(hash)总结 永夜-极光 数据结构
    1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。  
  • 乱七八糟 程序员是怎么炼成的
    eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/   jvm博客： http://yunshen0909.iteye.com/blog/2
  • 职场人伤害了“上司” 怎样弥补 aijuans 职场
    由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 　　一、利用一些轻松的场合表示对他的尊重 　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
  • 深入浅出url编码 antonyup_2006 应用服务器浏览器servletweblogicIE
    出处：http://blog.csdn.net/yzhz  杨争   http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：         编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
  • 建表后创建表的约束关系和增加表的字段 百合不是茶 标的约束关系增加表的字段
      下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式   1,增加字段(student表中增加 姓名字段)   alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型 alter table student add name varchar2(10);   &nb
  • Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScriptuploadify
    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
  • 精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle数据库plsql
    /* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
  • 【Resin一】Resin服务器部署web应用 bit1129 resin
    工作中，在Resin服务器上部署web应用，通常有如下三种方式：   配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件 配置多个web-app   在resin.xml中,可以为一个host配置多个web-app   <cluster id="app&q
  • red5简介及基础知识 白糖_ 基础
      简介   Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
  • angular.fromJson boyitech AngularJSAngularJS 官方APIAngularJS API
    angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例: <!DOCTYPE HTML> <h
  • java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
    public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
  • web实时通讯 Chen.H Web浏览器socket脚本
    关于web实时通讯，做一些监控软件。 由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
  • [基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
          大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思     如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?   
  • oracle 外部表 daizj oracle外部表external tables
        oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
  • aop相关的概念及配置 daysinsun AOP
    切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 通知（Advice） 通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
  • 初一上学期难记忆单词背诵第二课 dcj3sjt126com englishword
    middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么  China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
  • Linux日志分析常用命令 dcj3sjt126com linuxlog
    1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行 空格 显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
  • JSONP 原理分析 fantasy2005 JavaScriptjsonpjsonp 跨域
    转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
  • 使用connect by进行级联查询 234390216 oracle查询父子Connect by级联
    使用connect by进行级联查询          connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。          来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
  • 一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
    发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式， 地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
  • UI设计中我们为什么需要设计动效 lampcy UIUI设计
    关于Unity3D中的Shader的知识 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
  • 如何禁止页面缓存 nannan408 htmljspcache
    禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
  • 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同 定时任务管理spring-quartz
          【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
  • EXT实例 tntxia ext
      （1） 增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
  • 数学学习在计算机研究领域的作用和重要性 xjnine Math
    最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他