孤雁+-CSDN博客

原创 Web前端基础（十）：CSS实现水平垂直居中的方式

CSS实现水平垂直居中的方式

2022-04-06 10:05:32 1771

原创 Web前端基础（九）：CSS的position属性与其他

一、margin负值的使用方法在margin-bottom: -1px;border-bottom: 1px solid black;然后在包含的这个块中写——overflow: hidden;二、position定位、z-indexposition：static（默认）\inherit（继承）\fixed（相对于窗口定位）\relative（相对定位）\absolute（绝对定位）position：fixed; 设置：top: ; bottom: ; left: ;

2022-03-29 17:56:31 691

原创 Web前端基础（八）：CSS模块开发细则

设计普通模块流程？选择标签——布局样式——文本样式——代码优化一、空隙问题多个行元素并排显示，默认状态下，行元素之间会存在间隙，这个间隙由HTML文件中的空格引起，解决方案是给行元素设置浮动。二、浮动对元素的影响可以让块元素并排显示；在不设置宽高的情况下，宽高由内容决定；元素会脱离文档流；行元素浮动，可以设置宽高；三、a 标签的4个伪类:link ( a标签还未被访问的状态 – href 属性 ):visited ( a标签已被访问过的状态 ):hover ( 鼠标悬停在a

2022-03-22 15:24:29 1006

原创 React系列（七）：React属性、事件与共享

本文主要讲解React中关于属性的使用、React特有的标签获取以及React共享的使用等，具体如下：React的State属性React的Props属性React事件绑定与数据双向交互React组件的复用及验证React组件的RefsReact独立组件之间共享操作 Mixins1、State属性React的状态机，用于改变自身模块的数据；state作用域只属于当

2018-02-07 09:54:35 908

原创 Web前端基础（七）：CSS选择器进阶

1、后代选择器使用多个选择器的组合来找到要控制的标签；类名为wrap中的div里面的span标签样式；选择器直接用空格隔开。/*样式如下：*/.wrap div { background-color: skyblue;}div class="wrap"> div>01div> div>02div>div>效果解释：类名wrap的div

2018-02-07 09:53:59 299

原创 Web前端基础（六）：盒模型的用法—margin详解

1、正常元素设置两个元素设置纵向外边距后，外边距会重叠，两元素间的距离是较大的那个纵向margin值。两个元素设置横向外边距后，两个元素间的距离是外边距相加之和。——设置横向，如在div中嵌套span。2、脱离文档流设置如果两元素浮动，两元素之间的距离为外边距相加之和。3margin负值的使用方法在margin-bottom: -1px;border-bottom

2018-02-05 10:29:56 1097

原创 React系列（六）：React组件基础与生命周期

本文主要讲解React中关于组件的使用、React特有的JSX语法以及React生命周期的使用等，具体如下：React的虚拟DOMReact组件React多组件嵌套React的语法—JSXReact的生命周期1、React的虚拟DOMinnerHTML: render html string + 重新创建所有 DOM 元素Virtual DOM: render Vi

2018-01-31 09:29:21 278

原创 Web前端基础（五）：清浮动方法与优缺点

1、如何对待美工对于靠谱美工，美工图精确度约0px。对于不靠谱的美工，要与产品经理沟通，并用邮件往来。2、浮动对文档的影响浮动会导致当前元素脱离文档流，此时会对父级产生影响；子元素浮动，父级元素会出现高度为0的现象，这个现象叫做高度塌陷；3、清浮动的方法：3.1 需要清浮动的情况：子标签浮动后，父标签的高度无法被撑开，所以需要清浮动；新加入的标签...

2018-01-30 09:09:30 369

原创 React系列（五）：NodeJS模块化操作

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。es6中新增了两个命令export和import，export命

2018-01-29 16:45:06 1383

原创 Web前端基础（四）：HTML元素的分类与嵌套规则

1、HTML元素分为三大类1）块状元素网页框架基本结构块：html、body、frameset、frame、noframe、iframe表单结构块：form、filedset、legend布局结构块：div段落结构块：p标题结构块：h1-h6列表结构块：ol、ul、dl、dt、dd、menu、dir居中结构块：center预定义结构块：pre引用结构块：blockqu

2018-01-29 09:21:52 353

原创 Web前端基础（三）：网页布局与样式入门

1、网页开发流程（整体——>局部）1）分析各个模块，切图2）了解代码书写规范3）整体布局4）详细布局5）样式处理6）网页的优化和细节方面的处理2、如何开发网页1）div没有语义性，主要用于布局，独占一行显示 h标题标签; 列表：ul、ol、dl，里面的列:li; 段落：p;2）CSS层叠样式表，是一组格式设置规则，主要用于控制WEB页面的外

2018-01-26 16:36:27 4406

原创 React系列（四）：ECMAScript6.0的使用（下）

随着google和firfox以及node6.0对ES6的支持，ES6语法的定稿使它越来越受到关注，尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析，为后续的React知识点做好铺垫，主要内容如下：default, rest：函数默认值，变量展开import, export：导入，输出as：修改变量名* ：模块整体加载**Map的使用方式Set的

2018-01-26 09:42:49 389

原创 Web前端基础（二）：HTML5与网页入门

1. 网站布局DIV用于布局，Table用于显示数据，这是现在最基本的设计原则。1.1 Table 布局缺点：1、 Table主要呈现数据和处理数据，如果用于布局，使SEO优化（搜索引擎优化）较差；2、不利于网站维护；3、标签嵌套层级较多，代码冗余量较大。优点：1、容易上手；2、 table在不同浏览器中都得到了很好的兼容；3、可以形成复杂的变化，

2018-01-25 15:28:11 331

原创 React系列（三）：ECMAScript6.0的使用（上）

随着google和firfox以及node6.0对ES6的支持，ES6语法的定稿使它越来越受到关注，尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析，为后续的React知识点做好铺垫，主要内容如下：let, const：块级作用域—声明变量class, extends, super：类，继承，指代父类arrow functions：箭头函数templ

2018-01-25 14:08:09 438

原创 Web前端基础（一）：PhotoShop与图片认知

本文包含对前端开发中页面重构的理解、常用图片格式的认知、开发过程中图片选择、简要的PS技术等。1、页面重构就是“将美工图转换成html代码在WEB页面显示出来”，这一过程可以直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。对于靠谱美工，美工图精确度约0px。对于不靠谱的美工，要与产品经理沟通，并用邮件往来。工作内容一般是“分析美工图—

2018-01-24 16:13:55 600

原创 React系列（二）：React环境安装与初始化

React环境安装与初始化本文主要对React项目的初始化与环境配置进行讲解，其中涉及到NodeJS的安装与使用、前端自动化构建工具——webpack的使用与配置、React项目的初始化配置等。NodeJS安装项目初始化 React环境配置webpack配置1、NodeJS安装打开Node官网：http://nodejs.cn/。进入下载页面，选择与自己电脑相对应的文

2018-01-24 15:39:55 537

原创 React系列（一）：React简介与初始化

本文包含对前端热门框架——React的简单介绍、相关的前置知识点的梳理、以及React的版本选择。React官网与开源地址前置知识点梳理版本选择与React体验React是什么？React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的

2018-01-23 14:11:20 481

原创 JavaScript之引入方式

JavaScript文件的引入方式与CSS引入方式类似，主要也是分为三种：标签内联、内部写入、外部引入......

2017-11-06 15:53:12 485

原创 JavaScript与Java的关系

虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。

2017-11-06 15:49:28 421

原创 JavaScript的追根溯源

Netscape发明了JavaScript当Netscape Navigator崭露头角时，Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的试验被称为Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而Nombas丝毫没有料到它的理念将会成为万维网的一块重要基石。当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，

2017-10-30 18:00:09 280

JesyWu的博客