湖南科技大学吴光霁
湖南科技大学吴光霁

HTML与CSS学习第5天

HTML与CSS学习第五天

HTML与CSS学习第5天_第1张图片

目录

  • HTML与CSS学习第五天
    • 1. PxCook的基本使用
    • 2. 盒子模型
      • 2.1 盒子模型的介绍
        • 2.1.1 盒子的概念
        • 2.1.2 盒子模型
      • 2.2 盒子模型内容的高度和宽度（width，height）
          • 注意点
      • 2.3 盒子的边框-border
        • 2.3.2 边框的连写模式
        • 2.3.3 边框-单方向设置
      • 2.4 盒子的内边距-padding
        • 2.4.2 内边距单方向设置
        • 案例
      • 2.5 盒子实际大小的计算
            • 注意点
      • 2.6 不会撑大盒子的特殊情况（块级元素）
      • 2.7 盒子的自动内减和手动内减
      • 2.8 盒子的外边距-margin
        • 2.8.2 外边距单方向设置
        • 2.8.3 margin单方向设置的应用
      • 2.9 清除默认边距
      • 2.10 外边距折叠现象-1合并现象
      • 2.11 外边距折叠现象-2塌陷现象
      • 2.12 行内元素的margin和padding无效情况

1. PxCook的基本使用

  1. 通过软件打开设计图
    1. 打开软件
    2. 拖入设计图
    3. 新建项目
  2. 常用快捷键
    • 放大设计图：crtl + +号
    • 缩小设计图：ctrl + - 号
    • 移动设计图：空格按住不放，鼠标拖动
  3. 常用工具
    • 量尺寸
    • 吸颜色
  4. 从psd文件中直接获取数据
    • 切换到开发模式，直接点击获取数据

2. 盒子模型

2.1 盒子模型的介绍

2.1.1 盒子的概念
  • 页面中的每一个标签，都可以看作成一个“盒子”,通过盒子的视角布局页面
  • 浏览器渲染页面时，会将网页元素（标签）看出一个个矩形区域，我们形象的称其为盒子
2.1.2 盒子模型

  • CSS规定每个盒子分别由：内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）构成，这就是盒子模型。

  • 图解

HTML与CSS学习第5天_第2张图片

2.2 盒子模型内容的高度和宽度（width，height）

  • width属性设置宽度
  • height属性设置高度
  • 常见取值：数字+px
注意点
  • width和height属性是设置盒子内容区域的宽度和高度

HTML与CSS学习第5天_第3张图片

2.3 盒子的边框-border

  • 设置边框粗细，边框样式，边框样式效果

  • 单个属性

    作用 属性名 属性值
    边框粗细 border-width 数字+px
    边框样式 border-style 实线：solid，点线：dotted，虚线：dashed
    边框颜色 border-color 颜色取值
2.3.2 边框的连写模式

  • 属性名：border

  • 属性值： 单个取值的连写，取值之间

  • 示例

border:10px solid red;
  • 快捷键：bd+回车/tab；
2.3.3 边框-单方向设置
  • 场景：只给盒子的某个方向设置边框
  • 属性名：border-方位词
  • 属性值：连写的取值
  • 示例

<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>Documenttitle>

    <style>
    div
    {
        width: 300px;
        height: 300px;
        background-color: red;
        /* 边框粗细 */
        border-width: 10px;

        /* 边框样式  solid dashed dotted 实线 虚线 点线*/
        border-style: dotted;
        /* 边框颜色 */
        border-color: blue;

        /* border属性连写 */
        border: 10px solid blue;

        /* 3.单方向设置边框 */
        border-top: 10px dotted green;
    }
    
    style>
head>
<body>
    <div>
        我是dasb
    div>
body>
html>
  • 效果图

HTML与CSS学习第5天_第4张图片

2.4 盒子的内边距-padding

  • 定义：设置边框与内容区域之间的距离

  • 属性名：padding

  • 常见取值：

    取值 示例 含义
    一个值 padding:10px; 上下左右都设置为10px
    两个值 padding:10px 20px; 上下设置为10px，左右设置为20px
    三个值 padding:10px 20px 30px; 上设置为10px，左右设置为20px，下设置为30px
    四个值 padding:10px 20px 30px 40px; 上设置为10px，右设置为20px，下设置为30px，左设置为40px

  • 记忆规则：从上开始赋值，然后顺时针赋值，如果没有设置赋值的，看对面的是多少就是多少。

2.4.2 内边距单方向设置
  • 只给盒子的某个方向单独设置内边距
  • 属性名：padding-方位名词
  • 属性值：数字+px
案例

<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>Documenttitle>
    <style>
    
    /* padding属性 */
    div
    {
        width: 300px;
        height: 300px;
        background-color: red;
        /* 一个值 上下左右都为10px*/
        /* padding: 10px; */
        /* 两个值  上下为10px 左右为20px*/
        /* padding: 10px 20px; */
        /* 三个值 上为10px 左右为 20px 下为 30px */
        /* padding: 10px 20px 30px; */
        /* 四个取值：10px 20px 30px 40px  上为10px 右为20px 下为30px 左为 40px 顺时针*/
        /* padding: 10px 20px 30px 40px; */


        /* padding的单方向赋值 */
        padding-top: 10px;

        
    }


    style>
head>
<body>
    <div>
        我是大傻逼
    div>
body>
html>
  • 效果图

HTML与CSS学习第5天_第5张图片

2.5 盒子实际大小的计算

  • 盒子宽度=左边框+左padding+内容宽度+右padding+右边框
  • 盒子高度=上边框+上padding+内容高度+下padding+下边框
注意点
  • 盒子的大小会被padding和border撑大，设置的width和height是内容区域大小，不是盒子实际大小
  • 图解

HTML与CSS学习第5天_第6张图片

2.6 不会撑大盒子的特殊情况（块级元素）

  • 如果子盒子没有设置宽度，宽度默认为父盒子的宽度
  • 此时给子盒子设置左右padding和左右border，此时不会撑大子盒子

2.7 盒子的自动内减和手动内减

  • 原因：盒子会被padding和border撑大，要想得到固定大小的盒子，需要计算出width和height
  • 手动内减：自己计算多余大小，在内容区域减去
  • 自动内减：
    • 给盒子设置属性box-sizing:border-box;即可
    • 浏览器自动计算多余大小，自动在内容中减去

2.8 盒子的外边距-margin

  • 设置边框以外，盒子与盒子之间的距离

  • 属性名：margin

  • 常见取值

    取值 示例 含义
    一个值 margin:10px; 上下左右都设置为10px
    两个值 margin:10px 20px; 上下设置为10px，左右设置为20px
    三个值 margin:10px 20px 30px; 上设置为10px，左右设置为20px，下设置为30px
    四个值 margin:10px 20px 30px 40px; 上设置为10px，右设置为20px，下设置为30px，左设置为40px
2.8.2 外边距单方向设置
  • 只给盒子的某个方向设置外边距
  • 属性名：margin-方位名词
  • 属性值：数字+px
2.8.3 margin单方向设置的应用
方向 属性 效果
水平方向 margin-left 让当前盒子向右移动
水平方向 margin-right 让右边的盒子向右移动
垂直方向 margin-top 让当前盒子向下移动
垂直方向 margin-bottom 让下面的盒子向上移动

2.9 清除默认边距

  • 浏览器会默认给部分标签设置默认的margin和padding，为了实现精准布局，需要消除这些margin和padding
  • 解决方法
*{
	margin:0;
	padding:0;
}

2.10 外边距折叠现象-1合并现象

  • 垂直布局的块级元素，上下margin会合并
  • 结果：盒子上下间距为两者margin的最大值
  • 解决方法：只给其中一个盒子设置margin

2.11 外边距折叠现象-2塌陷现象

  • 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
  • 结果：导致父元素一起向下移动
  • 解决方法
    • 给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
    • 给父元素设置overflow:hidden
    • 转换成行内块元素（bfc触发）
    • 设置浮动

2.12 行内元素的margin和padding无效情况

  • 水平方向的margin和padding有效
  • 垂直方向的margin和padding无效

你可能感兴趣的:(HTML+CSS,css,html,css3)

  • html语言及js脚本基础,Javascript基础学习笔记(菜鸟必看篇) 游苏昱 html语言及js脚本基础
    什么是变量？变量是用于存储信息的容器变量的声明语法：var变量名变量名=值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头；变量也能以$和_符号开头(不过我们不推荐这么做)；变量名称对大小写敏感(a和A是不同的变量)。语句语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾。有个好的编码习惯，都要以;结尾数据类型在JavaScript中，一段信息就是一个值(value)。
  • Vue2.0学习--基础--4--Class与Style绑定 naildingding 框架—Vuevue前端
    （day5）操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute（也就是每个元素的class属性和style属性），所以我们可以用v-bind处理它们：只需要表达式计算出字符串结果即可。（也就是说，在HTML中class和style属性后面都是接一个双引号括起来的字符串值）但是字符串拼接麻烦且易错。所以，在使用v-bind将class与style与特定的值绑定
  • 制作一个简单HTML旅游网站（HTML+CSS+JS）桂林旅游网页设计与实现5个页面 软件技术NINI html+css+js旅游html旅游css
    一、‍网站题目旅游，当地特色，历史文化，特色小吃等网站的设计与制作。二、✍️网站描述桂林旅游主题的网页一共五个个页面-旅游网页使用htmlcssjs制作有banana图-页面可以相互跳转包含表单三级页面-网页可以使用vscodehbuilderdw等打开修改-里面的图片和文字都可以替换为其他旅游网页-桂林旅游网页介绍了景点，美食，联系我们，桂林旅游等-html静态网页没有复杂效果布局简单原创htm
  • Vue——认识day06_class与style绑定 WenJGo Vue前端HTMLCSSJSvue.js前端javascript
    在Vue中，可以使用v-bind指令来将CSS样式动态地绑定到HTML元素上。有两种方式可以实现CSS与style的绑定：对象语法：可以将一个包含CSS属性和值的对象传递给v-bind，将对象的属性与HTML元素的style属性进行绑定。例如：HelloWorld在上面的例子中，textColor和textSize是Vue实例的data属性，可以在Vue实例中定义和修改它们的值。当数据发生变化时，
  • js html css代码缩进,HTML/CSS/JS代码格式化 吃货喵 jshtmlcss代码缩进
    8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？我们在编辑器当中写代码的时候，可能因为编写时候不规范或者复制粘贴的操作导致代码格式混乱。我在之前采用的是JSFormat来格式化JavaScript和JSON，使用SublimeText自带的reindent命令格式化HTML和CSS的文件。基本上reindent命令就足够用了。但是有缺点，一些html文件的格式不够优美！
  • 【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~ 南北极之间 web前端特效源码javascriptcss编程入门网页设计编程入门代码html
    bilibili在线视频演示地址：【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能！可动态好评+差评+留言功能！效果图：
  • 【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面 南北极之间 web前端特效源码前端javascripthtml网页设计代码实例css3
    效果图：完整代码：【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面@importurl("https://fonts.googleapis.com/css2?family=Muli&display=swap");*{box-sizing:border-box;
  • html5 css3 JavaScript响应式中文静态网页模板js源代码 Yucool01 html5javascriptcss3
    该批次模板具备如下功能：首页，二级页面，三级页面登录页面均有，页面齐全，功能齐全，js+css+html,前端HTML纯静态页面，无后台，可用dreamweaver,sublime,webstorm等工具修改；部分网页模板效果图：有需要的同学可以下载学习一下：https://download.csdn.net/download/Yucool01/22408278https://download.c
  • 前端配置环境 葱头的故事 前端
    工具类配置一、下载GitBash下载地址二、下载google浏览器下载地址三、下载微信开发者工具下载地址四、下载vscode下载地址1、安装中文包安装中文包教程2、安装插件3、vscode中使用git教程4、setting.json我自己常用的：{"editor.fontSize":18,"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vs
  • uniapp壁纸项目笔记 京城五 前端学习脚步uniapp项目实践uni-app笔记
    项目初始化static文件夹中尽量不要存放一些测试时用的图片。因为项目在打包的时候会将static文件夹一并的打包，这样会使得打包后的项目变得臃肿。解决办法是在项目的根目录下创建一个common文件夹，用于存放测试用的图片和其他文件。common文件夹中的文件只有在被引入的时候才会被一并打包。否则要避免这个情况就只能在打包项目前清理static文件夹。同理，一些公共样式（scss文件）也可以放在c
  • robot安装Java工具包,自动化工具Robot framework安装说明之windows7 盾牌座 robot安装Java工具包
    编写背景：2年没有更新博客了，自从有娃后时间变得越来越少，深刻体会了当妈的不容易；整理这个文章是为了让部门的新人学习这个工具能轻松的入门第一关：安装，同时希望能帮助到其它同行。参考资料：http://www.cnblogs.com/puresoul/p/3854963.htmlhttp://www.itest.pro/howto-install-robot-framework-autoit-win
  • java 富文本 过滤xss_富文本XSS过滤 热茶走 java富文本过滤xss
    富文本内容要替换掉js代码主要防止xss，不是防止注入，防注入参数化写数据库就好了，或者将单引号替换为实体对象在做一些网站(特别是bbs之类)时，经常会有充许用户输入html样式代码，却禁止脚本的运行的需求,以达到丰富网页样式，禁止恶意代码的运行。当然不能用htmlencode和htmldecode方法,因为这样连基本的html代码会被禁止掉。我在网上搜索，也没有找到好的解决办法，倒是收集了一些脚
  • JS旧笔记 色即是猫
    页面自动执行（加载）js的几种方法一、JS方法1.最简单的调用方式，直接写到html的body标签里面：2.在JS语句调用：functionmyfun(){alert("thiswindow.onload");}/*用window.onload调用myfun()*/window.onload=myfun;//不要括号3。window.onload=function(){func1();func2(
  • 【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程 秋说 前后端项目开发前端框架vue.js前端htmlcssJavaScript
    文章目录前言什么是Vue.js为什么是Vue.jsVue.js安装打包Vue项目方法一：vite打包方法二：webpack打包webpack执行流程总结前言正式开始学习前确保确保你已掌握前端三件套：HTMLCSSJavaScript什么是Vue.jsVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应
  • Chat App 项目之解析（九） 禁忌-之城 jsonhtml5javascriptcsscss3gomysql
    ChatApp项目介绍与解析（一）-CSDN博客文章浏览阅读468次，点赞12次，收藏3次。ChatApp是一个实时聊天应用程序，旨在为用户提供一个简单、直观的聊天平台。该应用程序不仅支持普通用户的注册和登录，还提供了管理员登录功能，以便管理员可以查看和管理聊天记录。本文将详细介绍index.html文件的实现细节，包括代码解释、实现效果、实现方法以及后续需要实现的功能。https://blog.
  • 四章-47-KML地震信息 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1047.html，对应的官网示例https://openlayers.org/en/latest/examples/kml-earthquakes.html?q=kmlimage.pngimage.pngKML源，数据处理方式和前例相同信息弹窗使用了bootstr
  • css面试题 刘松阳
    1.css盒模型简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。border-sizing(有3个值哦)：border-box,padding-box,content-box.标准盒子模型：IE盒子模型：区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子
  • uniapp尺寸单位 px转rpx 万能螺丝刀1 uniapp
    uniapp尺寸单位uni-app支持的通用css单位包括px、rpxpx即屏幕像素rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到960px时，默认按照375px的屏幕宽度进行计算，具体配置参考：rpx计算配置。rpx计算配置uni-app屏幕基准宽度uni-app规
  • overflow-wrap详解 万能螺丝刀1 CSScss
    overflow-wrapoverflow-wrap属性在CSS文本中是比较常用的，本部将带你深入理解overflow-wrap属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上overflow-wrap的实例，希望能够对你有所帮助。overflow-wrap定义和用法overflow-wrap:normal|break-word默认值：normal适用于：所有元素继承性：有动画性：
  • 白骑士的CSS高级篇之CSS Grid布局进阶 4.1.2 网格模板与区域 白骑士所长 CSS教学css前端css3htmljavascript
    CSSGrid布局是CSS中强大的布局系统之一，它提供了更灵活和更高效的方式来创建复杂的网页布局。通过Grid布局，你可以将网页划分为多个网格区域，并在这些区域中放置内容，这使得布局更加直观和易于维护。本文将深入探讨Grid布局中的网格模板和区域的概念，帮助你掌握如何利用它们创建专业的网页布局。什么是网格模板？在CSSGrid中，网格模板定义了网格的行和列的结构。通过使用网格模板，你可以指定网格的
  • 2024网络安全学习路线 非常详细 推荐学习 白帽黑客-晨哥 web安全学习安全数据库php
    关键词：网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线首先咱们聊聊，学习网络安全方向通常会有哪些问题1、打基础时间太长学基础花费很长时间，光语言都有几门，有些人会倒在学习linux系统及命令的路上，更多的人会倒在学习语言上；2、知识点掌握程度不清楚对于网络安全基础内容，很多人不清楚需要学到什么程度，囫囵吞枣，导致在基础上花费太多时间；看到很多小伙伴，买了HTML，PHP，数据库，计算机
  • uni-app，关于 canvas 在 app，小程序， h5中，实现绘制，保存本地图片 前端小袁 H5vue.jsuni-app小程序uni-app前端
    没有套路，没有难读的文档，直接看代码html部分绘制canvas保存到本地js部分exportdefault{data(){return{textCanvas:null,//初始化canvas值}},methods:{//绘制canvasdrawCanvas(){//指定this的指向letthat=this;//uni-app中，不管是小程序，app，h5在获取元素实例时，都是统一的方法,只要获
  • 【Rust】——采用发布配置自定义构建 Y小夜 Rust（官方文档重点总结）rust开发语言后端
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客今日学习推荐：在当今这个飞速发展的信息时代，人工智能（AI）已经成为了一个不可或
  • Dash总结 ZhangTao_zata dashpython前端
    dbcdbc.Store存储数据dcc.Store(id='Store_data_xlsx'),dbc.Button(id='test_Store'),html.Div(id='Store_data_xlsx_div'),@callback(Output('Store_data_xlsx','data'),Input('test_Store','n_clicks'),)defsave_1(n_cl
  • 【Rust】——高级类型 Y小夜 Rust（官方文档重点总结）rust开发语言后端
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客目录为了类型安全和抽象而使用的newtype模式类型别名用来创建类型同义词不返回
  • WebSocket使用及在vue如何使用 Manager_
    WebSocketWebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和
  • [vue] jszip html-docx-js file-saver 图片，纯文本 ，打包压缩，下载跨域问题 533_ #vuejavascriptvue.jshtml
    npminstalljszipfile-saverimportJSZipfrom'jszip';importFileSaverfrom'file-saver';JSZip创建JSZip实例：constzip=newJSZip();创建文件：支持导出纯文本zip.file("hello.txt","HelloWorld\n");创建文件夹：zip.folder("file")只压缩有地址的文件//举
  • CSS特效——图标图片悬浮旋转一周 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS特效——图标图片悬浮旋转一周引言基本概念CSS3动画基础示例一：简单的无限循环旋转HTML结构CSS样式代码解释示例二：添加延迟和方向控制CSS样式代码解释示例三：使用伪元素增强视觉效果CSS样式代码解释示例四：结合过渡效果CSS样式代码解释示例五：响应式设计CSS样式代码解释功能使用思路思路一：结合JavaScript控制动画思路二：利用数据属性动态设置动画思路三：多图标同步动画实际开发中
  • html+div+动画效果,html+css3太阳系行星运转动画效果的实现代码 欣睿(兰静) html+div+动画效果
    原标题：html+css3太阳系行星运转动画效果的实现代码做一个太阳系八大行星的运转动画，不包括行星的卫星，所有行星围绕太阳公转，行星采用纯色，暂时没有自转。效果静态图：动画中包括：太阳及各行星，运行轨道，行星公转动画。先画好草图，设计好大小和位置，根据公转周期计算好动画执行的时间。html的结构:一个class为solarsys的div，作为太阳系容器元素，该div的position为relat
  • css3 3d 太阳系,使用css3的动画模拟太阳系恒星公转 温柔的兔子姑娘 css33d太阳系
    原标题：使用css3的动画模拟太阳系恒星公转本文介绍使用css3的animation画一个太阳系恒星公转的动画，再加以改进，讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例，最后结合css3的clip-path做一些比较特别的动画。太阳系最终的效果图如下：css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他