殿君不是殿军

web前端基础知识

HTML&CSS基础经典版

HTML：结构（页面元素和内容）
css：表现（网页元素的外观和位置等页面样式）
行为：JavaScript：行为（网页模型定义与页面交互）

排版标签
1. 排版标签标题标签：h系列标签重要程度依次递减
  
  特点：独占一行、h1-h6文字逐渐减小
2. 段落标签：p
  
  特点：段落之间存在间隙、独占一行
3. 换行标签：
4. 水平分割线：

文本格式化标签

场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等
语义：突出重要性的强调语境 strong、ins、em、del

图片标签

特点：单标签
src alt为图片标签的属性、属性之间没有顺序
src为属性名 =""为属性值
alt是替换文本当图片不显示的时候显示的文字
title时提示文本不仅可以为图片标签添加，还可以用于其他标签
width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变形

路径的介绍

路径可分为：绝对路径（了解）相对路径（常用）
绝对路径例如：盘符开头：D\day01、完整的网络地址：https://www.itcast.cn
相对路径：从当前文件出发找目标文件的过程

相对路径之同级 **./**表示当前位置

相对路径之下级：images/baobao.jpg

相对路径之上级：**…/**表示上级

音频标签：audio

视频标签：video

添加muted在静音状态下自动播放

链接标签

href的作用是**调转地址**

在新窗口打开：属性名为target、取值：_blank

列表标签

自定义列表：dl dt dd

去掉无序列表小黑点：

li {
            /* 去除小圆点 */
            list-style: none;
        }

表格标签

table>tr>td
th为表头标签，有加粗效果
caption为表格大标题
结构标签：thead,tbody,tfoot

学生成绩单
姓名	年龄	成绩
张三	19	33
李四	20	44
王二	20	44

合并单元格

跨行并列：rowspan、跨列并列：colspan

遵循左上原则

列表标签

列表的应用场景
无序列表
有序列表
自定义列表

绝对路径

绝对路径：绝对路径例如：
- 盘符开头：D\day01
- 完整的网络地址：http://wdianjun.vcn.ink

特点：地址很长

相对路径

相对路径之同级 ./表示当前位置
相对路径之下级：**如：**images/baobao.jpg
相对路径之上级：**如：../**images/baobao.jpg

表单标签-input

input type="text"文本框
input type="text"密码框
input type="radio"单选框
input type="checkbox"复选框

注意：

有相同name属性值的单选框为一组，一组中只能同时有一个被选

属性对于单选框有分组功能

占位符：placeholder

button按钮标签

如果不指定type值，button按钮默认为submit值

按钮要放在==表单域(form)==中才会有行为，否则就是一个普通按钮

按钮标签是双标签，可以插入其他标签如：图片

select下拉菜单

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

selected属性：下来菜单的默认选中

lable标签

强调文本的作用

没有语义化的标签

div：独占一行

span：

语义化标签

网页头部

网页导航

网页底部

网页侧边栏

网页区块

网页文章

CSS：层叠样式表

css的引入方式

==内嵌式：==写在style标签中,一般写在head里
==外联式：==写在一个单独的.css文件中
==行内式：==写在标签的style属性中，大多数配合js使用

基础选择器

标签选择器

类选择器

id选择器

id必须是唯一的，不能出现两个标签有相同的id
你好，hello

通配符选择器

清除内外边距,获取所有标签


        * {
            margin: 0;
            padding: 0;
        }

字体和文本样式

字体：

字体粗细

font=weight

字体样式

font-style

字体类型

font-family

层叠性

建立在相同的权重下，如相同的选择器，后面的会覆盖前面的

复合属性

font复合书写顺序：font：style weight size family
注意：

顺序不能乱

如果之前已经写了零散的font属性，当心可能会覆盖掉之前的

水平居中对齐 text-aling:center

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

文本修饰

添加下划线
- ```
text-decoration: underline;
```
删除线
- ```
text-decoration: line-through;
```
上划线
- ```
text-decoration: overline;
```
清除下划线
- ```
text-decoration: none;
```

行高line-height

控制一行的上下行间距

让单行文本垂直居中可以设置 line-height : 文字父元素高度
注意如果同时设置了行高和font复合，注意覆盖问题
书写顺序：font：style weight size/line-height family

颜色取值

rgba表示法：( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
- 取值范围0~1 ，1表示完全不透明

选择器进阶

复合选择器

后代选择器

根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2 {} 空格隔开
注意：后代包括：儿子、孙子…

并集选择器

作用：选中页面中同时满足多个选择器的标签
语法：选择器1选择器2 { css }
注意：交集选择器中的选择器之间是紧挨着的，没有东西分隔，交集选择器中如果有标签选择器，标签选择器必须写在最前面

交集选择器

交集选择器：标签选择器在前，类选择器在后，中间没有空格

id是唯一的，不能做交集

交集选择器只可能是标签选择器 + 类选择器

hover伪类选择器

鼠标悬停在元素上的状态

可以用在任何标签上

背景相关属性

背景复合
- 复合写法：推荐：background：color image repeat position
背景位置如果是英文状态下可以颠倒位置

元素显示模式之块级元素

独占一行，可以设置宽高

宽度默认是父元素的宽度，高度默认由内容撑开

元素显示模式之行内元素

不可以设置宽高，一行多个显示

元素显示模式之行内块元素

一行可以显示多个

可以设置宽高

代表标签：input、textarea、button、select…

img标签有行内块元素特点

元素显示模式转换

转换成块级元素display:block

转换成行内块元素display:inline-block

转换成行内元素display:inline

html嵌套规范

p标签中不要嵌套div、p、h等块级元素
a标签不能嵌套a标签

css特性

继承性

子元素有默认继承父元素的特点

**控制文字的属性**都可以继承

原则：本身有就不会继承，没有就继承父级

层叠性
- 在优先级相同的条件下，后面的覆盖前面的
- 若优先级不同谁的优先级高，谁就覆盖

背景的复合写法

背景复合写法建议： color URL（）平铺位置-
 background: skyblue url(./images/1.jpg) no-repeat bottom right;
注意：使用英文方位词不考虑顺序数字下第一个必须是x，第二个必须是y

盒子模型

padding内边距

            /* 四个值：上右下左 顺时针*/
            /* padding: 10px 20px 40px 80px; */
            /* 三个值：上 左右 下 */
            /* padding: 10px 20px 15px; */
            /* 两个值：上下 左右 */
            /* padding: 10px 20px; */
            /* 一个值：上下左右 */
            padding: 60px;

css3盒子模型

自动内减：box-sizing:border-box

margin外边距

合并现象

垂直布局的块级元素，上下margin会合并

最终距离为两者margin最大值

解决办法：只给一个盒子设置margin即可

行内元素设置上下外边距无效上下内边距也无效

margin的塌陷问题（重要）

现象：互相嵌套的块级元素，子元素的margin-top 会作用在父元素上

结果：导致父元素一起移动

解决方法：

触发BFC（块级盒子格式化上下文）

BFC可以解决浮动和塌陷问题

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

给父元素设置overflow：hidden（超出部分隐藏）

转换成行内块元素

设置浮动

解决塌陷最佳办法给父级添加overflow：hidden

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

水平方向的margin和padding布局中有效！

垂直方向的margin和padding布局中无效！

结构伪类选择器

这个选择器是个逻辑并且的关系

比如div:nth-child(n)表示要找一个div，这个div必须是某个元素的一个子元素

/* 选择第一个li */
        /* li:first-child {
            background-color: blue;
        } */
        /* 选中最后一个li */
        /* li:last-child {
            background-color: blue;
        } */
        /* 任选一个 */
        /* li:nth-child(n) {
            background-color: skyblue;
        } */
        /* 选择倒数第3个 */
        
        li:nth-last-child(3) {
            background-color: blue;
        }
       /* 选择后三个*/
        li:nth-last-child(-n+3)

结构伪类选择器之公式(重要)

/* li:nth-child(n) 小括号里不仅可以写数字还可以写公式 */
        /* 选择偶数 even或者2n*/
        /* li:nth-child(even) {
            background-color: red;
        } */
        /* 选择奇数 odd或者2n+1 */
        /* li:nth-child(odd) {
            background-color: blue;
        } */
        /* 选择前5个 -n+5 */
        
        li:nth-child(-n+5) {
            background-color: pink;
        }

易错点

/* 找到第一个li里面的a 两种写法*/
        /* li:nth-child(1) a {
            background-color: red;
        } */
        /* li:first-child a {
            background-color: red;
        } */
        /* 找到第五个li里的第3个a */
        
        li:nth-child(5) a:nth-child(3) {
            background-color: blue;
        }
        /* 找到后五个li里的a */
        li:nth-last-child(-n+3) {
            
        }

伪元素::before&::after

必须设置==content属性==才能生效

伪元素默认是行内元素

==注意：==伪元素默认是行内元素，宽高不生效

.father::before {
            display: inline-block;
            /* 内容必须写 */
            content: '加油';
            width: 100px;
            height: 100px;
            background-color: blue;
        }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usglb9AS-1646056445989)(C:\Users\Y\Desktop\博客内容\pic\效果1.png)]

标准流（文档流）

标准流就是**标签默认的排列方式 **如：div独占一行

标准流配合浮动和定位完成网页布局

几种居中总结

margin:0 auto

作用是让具有宽度的块级元素居中，行内块不行

text-align: center;

给一个块级元素或者行内块元素设置，让其内部文字或者行内块实现水平居中

line-height: ;

在展示文字的时候会有一个默认的行高，文字在行中肯定是默认居中的，如果行高设置的和元素一样高，那么文字就会在行中垂直居中。

浮动

浏览器在解析行内或行内块元素的时候，如果元素换行之间会有小缝隙

浮动作用：

1.图文环绕

2.让块级盒子在一行显示

浮动的特点：
1.浮动后的元素会脱离标准流（脱标），不占标准流的位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动一行显示多个，可以设置宽高
注意：浮动的元素不能通过text-align:center或者margin:0 auto

浮动元素具有标准流元素的特性，可以设置宽高，并且在一行展示多个

浮动的不良影响

css书写顺序（重要）

作用：浏览器执行效率更高

书写顺序：

display/浮动/定位

盒子模型：margin、padding、宽高、背景色

文字样式：font:

清除浮动

1.给父级设置高度

2.额外标签法

在父元素内容的最后添加一个块级元素

给添加的块级元素设置 clear:both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3.单伪元素清除法

给父级添加一个类clearfix

.clearfix::after {
            content: '';
            display: block;
            clear: both;
            /* 补充代码，在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }

4.双伪元素清除浮动（常用）

==特点：==不光能清除浮动还能解决塌陷（坑爹现象）问题

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }

5.给父元素设置overflow : hidden

触发bfc

直接给父元素设置overflow : hidden

特点：方便

注意

版心注意：要清除浮动的影响，在上一级的父级 -->

你可能感兴趣的:(经验分享,前端,css,html)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
解读Servlet原理篇二---GenericServlet与HttpServlet 周凡杨 java HttpServlet 源理 GenericService 源码
在上一篇《解读Servlet原理篇一》中提到，要实现javax.servlet.Servlet接口（即写自己的Servlet应用），你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ，也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet（这就是为什么我们自定义的Servlet通常是exte
MySQL性能优化 bijian1013 数据库 mysql
性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间。性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等。本文介绍方法的主要有： a.优化查询 b.优化数据库结构
ThreadPool定时重试 dai_lm java ThreadPool thread timer timertask
项目需要当某事件触发时，执行http请求任务，失败时需要有重试机制，并根据失败次数的增加，重试间隔也相应增加，任务可能并发。由于是耗时任务，首先考虑的就是用线程来实现，并且为了节约资源，因而选择线程池。为了解决不定间隔的重试，选择Timer和TimerTask来完成 package threadpool; public class ThreadPoolTest {
Oracle 查看数据库的连接情况周凡杨 sql oracle 连接
首先要说的是，不同版本数据库提供的系统表会有不同，你可以根据数据字典查看该版本数据库所提供的表。 select * from dict where table_name like '%SESSION%'; 就可以查出一些表，然后根据这些表就可以获得会话信息 select sid,serial#,status,username,schemaname,osuser,terminal,ma
类的继承朱辉辉33 java
类的继承可以提高代码的重用行，减少冗余代码；还能提高代码的扩展性。Java继承的关键字是extends 格式:public class 类名（子类）extends 类名（父类）{ } 子类可以继承到父类所有的属性和普通方法，但不能继承构造方法。且子类可以直接使用父类的public和 protected属性，但要使用private属性仍需通过调用。子类的方法可以重写，但必须和父类的返回值类
android 悬浮窗特效肆无忌惮_ android
最近在开发项目的时候需要做一个悬浮层的动画，类似于支付宝掉钱动画。但是区别在于，需求是浮出一个窗口，之后边缩放边位移至屏幕右下角标签处。效果图如下：一开始考虑用自定义View来做。后来发现开线程让其移动很卡，ListView+动画也没法精确定位到目标点。后来想利用Dialog的dismiss动画来完成。自定义一个Dialog后，在styl
hadoop伪分布式搭建林鹤霄 hadoop
要修改4个文件 1: vim hadoop-env.sh 第九行 2: vim core-site.xml <configuration> &n
gdb调试命令 aigo gdb
原文：http://blog.csdn.net/hanchaoman/article/details/5517362 一、GDB常用命令简介 r run 运行.程序还没有运行前使用 c cuntinue
Socket编程的HelloWorld实例 alleni123 socket
public class Client { public static void main(String[] args) { Client c=new Client(); c.receiveMessage(); } public void receiveMessage(){ Socket s=null; BufferedRea
线程同步和异步百合不是茶线程同步异步
多线程和同步 : 如进程、线程同步，可理解为进程或线程A和B一块配合，A执行到一定程度时要依靠B的某个结果，于是停下来，示意B运行；B依言执行，再将结果给A；A再继续操作。所谓同步，就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回，同时其它线程也不能调用这个方法多线程和异步:多线程可以做不同的事情,涉及到线程通知 &
JSP中文乱码分析 bijian1013 java jsp 中文乱码
在JSP的开发过程中，经常出现中文乱码的问题。首先了解一下Java中文问题的由来： Java的内核和class文件是基于unicode的，这使Java程序具有良好的跨平台性，但也带来了一些中文乱码问题的麻烦。原因主要有两方面，
js实现页面跳转重定向的几种方式 bijian1013 JavaScript 重定向
js实现页面跳转重定向有如下几种方式：一.window.location.href <script language="javascript"type="text/javascript"> window.location.href="http://www.baidu.c
【Struts2三】Struts2 Action转发类型 bit1129 struts2
在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action，配置如下 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configurat
【HBase十一】Java API操作HBase bit1129 hbase
Admin类的主要方法注释： 1. 创建表 /** * Creates a new table. Synchronous operation. * * @param desc table descriptor for table * @throws IllegalArgumentException if the table name is res
nginx gzip ronin47 nginx gzip
Nginx GZip 压缩 Nginx GZip 模块文档详见：http://wiki.nginx.org/HttpGzipModule 常用配置片段如下： gzip on; gzip_comp_level 2; # 压缩比例，比例越大，压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q
java-7.微软亚院之编程判断俩个链表是否相交给出俩个单向链表的头指针，比如 h1 ， h2 ，判断这俩个链表是否相交 bylijinnan java
public class LinkListTest { /** * we deal with two main missions: * * A. * 1.we create two joined-List(both have no loop) * 2.whether list1 and list2 join * 3.print the join
Spring源码学习-JdbcTemplate batchUpdate批量操作 bylijinnan java spring
Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法，Spring只是做了一下改造和封装 JDBC的batch操作： String sql = "INSERT INTO CUSTOMER " + "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
[JWFD开源工作流]大规模拓扑矩阵存储结构最新进展 comsci 工作流
生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出......... 竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....
base64编码和url编码 cuityang base64 url
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.io.StringWriter; import java.io.UnsupportedEncodingException;
web应用集群Session保持 dalan_123 session
关于使用 memcached 或redis 存储 session ，以及使用 terracotta 服务器共享。建议使用 redis，不仅仅因为它可以将缓存的内容持久化，还因为它支持的单个对象比较大，而且数据类型丰富，不只是缓存 session，还可以做其他用途，一举几得啊。1、使用 filter 方法存储这种方法比较推荐，因为它的服务器使用范围比较多，不仅限于tomcat ，而且实现的原理比较简
Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式'] dcj3sjt126com 数据库
public function getMinLimit () { $sql = "..."; $result = yii::app()->db->createCo
solr StatsComponent（聚合统计） eksliang solr聚合查询 solr stats
StatsComponent 转载请出自出处：http://eksliang.iteye.com/blog/2169134 http://eksliang.iteye.com/ 一、概述 Solr可以利用StatsComponent 实现数据库的聚合统计查询，也就是min、max、avg、count、sum的功能二、参数
百度一道面试题 greemranqq 位运算百度面试寻找奇数算法 bitmap 算法
那天看朋友提了一个百度面试的题目：怎么找出{1,1,2,3,3,4,4,4,5,5,5,5} 找出出现次数为奇数的数字. 我这里复制的是原话，当然顺序是不一定的，很多拿到题目第一反应就是用map,当然可以解决，但是效率不高。还有人觉得应该用算法xxx,我是没想到用啥算法好...！还有觉得应该先排序... 还有觉
Spring之在开发中使用SpringJDBC ihuning spring
在实际开发中使用SpringJDBC有两种方式： 1. 在Dao中添加属性JdbcTemplate并用Spring注入； JdbcTemplate类被设计成为线程安全的，所以可以在IOC 容器中声明它的单个实例，并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱，泛型，可变长度
JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节 justjavac json
2013年5月，Yehuda Katz 完成了JSON API(英文，中文) 技术规范的初稿。事情就发生在 RailsConf 之后，在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&
网站项目建设流程概述 macroli 工作
一.概念网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。二.需求分析项目立项　　我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。客户的需求说明书　　第一步是需
AngularJs 三目运算表达式判断 qiaolevip 每天进步一点点学习永无止境众观千象 AngularJS
事件回顾：由于需要修改同一个模板，里面包含2个不同的内容，第一个里面使用的时间差和第二个里面名称不一样，其他过滤器，内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not，继续追究其源码。 var b = "{{", a = "}}"; this.startSymbol = function(a) {
Spark算子：统计RDD分区中的元素及数量 superlxw1234 spark spark算子 Spark RDD分区元素
关键字：Spark算子、Spark RDD分区、Spark RDD分区元素数量 Spark RDD是被分区的，在生成RDD时候，一般可以指定分区的数量，如果不指定分区数量，当RDD从集合创建时候，则默认为该程序所分配到的资源的CPU核数，如果是从HDFS文件创建，默认为文件的Block数。可以利用RDD的mapPartitionsWithInd
Spring 3.2.x将于2016年12月31日停止支持 wiselyman Spring 3
Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x（包含tomcat 6.x）的支持。在此之前spring团队将持续发布3.2.x的维护版本。请大家及时准备及时升级到Spring
fis纯前端解决方案fis-pure zccst JavaScript
作者：zccst FIS通过插件扩展可以完美的支持模块化的前端开发方案，我们通过FIS的二次封装能力，封装了一个功能完备的纯前端模块化方案pure。 1，fis-pure的安装 $ fis install -g fis-pure $ pure -v 0.1.4 2，下载demo到本地 git clone https://github.com/hefangshi/f

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

web前端基础知识

HTML&CSS基础经典版

排版标签

文本格式化标签

图片标签

路径的介绍

音频标签：audio

视频标签：video

链接标签

列表标签

表格标签

合并单元格

列表标签

绝对路径

相对路径

表单标签-input

button按钮标签

select下拉菜单

lable标签

没有语义化的标签

语义化标签

CSS：层叠样式表

css的引入方式

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

清除内外边距,获取所有标签

字体和文本样式

字体：

字体大小

字体粗细

字体样式

字体类型

层叠性

复合属性

水平居中对齐 text-aling:center

文本修饰

行高line-height

颜色取值

选择器进阶

复合选择器

后代选择器

并集选择器

交集选择器

hover伪类选择器

背景相关属性

背景复合

复合写法：推荐：background：color image repeat position

元素显示模式之块级元素

元素显示模式之行内元素

元素显示模式之行内块元素

元素显示模式转换

html嵌套规范

css特性

背景的复合写法

盒子模型

padding内边距

css3盒子模型

margin外边距

合并现象

margin的塌陷问题（重要）

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

结构伪类选择器

结构伪类选择器之公式(重要)

易错点

伪元素::before&::after

标准流（文档流）

几种居中总结

浮动

浮动的不良影响

css书写顺序（重要）

清除浮动

1.给父级设置高度

2.额外标签法

3.单伪元素清除法

4.双伪元素清除浮动（常用）

5.给父元素设置overflow : hidden

注意

复合写法：`推荐：background：color image repeat position`