web前端自学之路
文章平均质量分 61
Jomsou
一名简单的技术宅.
博客地址:https://fe.u-tools.fun/
展开
-
CSS文本样式总结
本文纯属个人学习的总结。也懒得去码字了,所以就从买的正在学的书里截下图来,作者勿怪,要是觉得侵权请私信我,我会及时删除。在CSS中,关于文本样式属性如下: 使用“text-decoration:none”这个属性值可以去除a标签的下划线默认格式。学了它之后,我们应该放弃HTML中学习到的s标签(删除线)和u标签(下划线)。 text-align属性只针对文本文字和img标签,对其他标签无效。转载 2017-07-14 17:30:10 · 499 阅读 · 0 评论 -
用mpvue构建微信小程序
背景由于机器人协会进行鼓励大家多读书的活动,所以为了可以更好的、更有效果,所以我跟会长提了一个建议,做一个微信小程序,那么为什么是微信小程序呢? 1、现在微信小程序比较好,用户也比较多;利用微信小程序做推广,效果好; 2、小程序的痛点在于不需要在手机里额外安装app,利用微信提供的入口,用时扫码,用后清除; 3、开发周期与开发难度小于原生app。技术栈采用前后端分离 1、V...原创 2018-07-03 18:38:02 · 543 阅读 · 0 评论 -
以选项卡的故事扯扯js面向对象
在现在的网页中,选项卡(我自己这样子叫)是非常普遍的,也是比较基础,学了原型实现选项卡也挺久了,最近在学ES6,学了用类实现选项卡,今天就在此做个总结,别的废话也不多说。以“貌”说这货外貌——还好,长得挺帅 (自己理解的)选项卡:就是通过点击头部切换内容的货。怎么得到这货html代码<div id="div1"> <...原创 2018-07-03 18:37:00 · 166 阅读 · 0 评论 -
以运动框架写个轮播图
轮播图:就是图片自动切换式滚动。如下图所示。 效果banner思路 上一张图片按钮: oLeft - = width; 下一张图片按钮: oLeft += width; 注意点: 1.var judge2 = false; //用于后面按钮判断,防止切图过程中鼠标多次点击)=》这点用的比较巧妙。实现html代码:<div id="...原创 2018-07-03 18:36:12 · 440 阅读 · 0 评论 -
圣杯布局和双飞翼布局
圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。 圣杯布局实现的思路是: 1、将最外层的container的padding设置为 padding: 0 220px 0 200px;为左右两块让出空间; 2、将#middle, #left, #right三者设为浮动; 3、将middle的width设置为100%; 4、分别给#left设置margin-left,#r...原创 2018-07-03 18:35:11 · 453 阅读 · 0 评论 -
我叫浮动,我想讲讲我的故事
最近在整理回顾css的知识点,so我情不自禁地想以第一人称讲讲浮动的故事,这样可能有趣一点点。好了,以下从几个方面来讲。 1、我是谁?(什么是浮动?) 2、我为什么存在?(为什么要浮动?) 3、实现我的原理?(浮动的原理?) 3、我惹下的祸,怎么去解决?(如何清除浮动?) —————————————————————————————————————————————— 1、我是谁?(什么是...原创 2018-07-03 18:33:49 · 230 阅读 · 0 评论 -
从事件绑定聊到事件监听,再到事件委托
经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。So,what are these?事件绑定在JavaScript中,有三种常用的绑定事件的方法: 1、在DOM元素中直接绑定 <button onclick="greet()">点我</button> <script> ...原创 2018-07-03 18:32:54 · 158 阅读 · 0 评论 -
CSS盒子模型
目录:CSS 盒子模型(Box Model)CSS 边框CSS 轮廓CSS Margin(外边距)CSS Padding(填充)CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素原创 2017-08-11 17:21:57 · 484 阅读 · 0 评论 -
CSS清除浮动大全
CSS清除浮动大全共8种方法 在各种浏览器兼容问题上,这样让清除浮动更难了,下面总结8种清除浮动的方法: 浮动导致的问题:父级标签高度塌陷—其实就是没有高度下面八中方法:1、父级div定义 height<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>转载 2017-08-11 17:21:33 · 361 阅读 · 0 评论 -
史上最全的CSS hack方式一览
史上最全的CSS hack方式一览 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,转载 2017-08-11 17:21:01 · 502 阅读 · 0 评论 -
HTML学习记
HTML学习记HTML基础: HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为。HTML基本结构<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <原创 2017-08-11 17:17:55 · 649 阅读 · 0 评论 -
HTML 简介
HTML 简介HTML 实例实例php 中文网我的第一个标题我的第一个段落。实例解析DOCTYPE 声明了文档类型位于标签 与 描述了文档类型位于标签 与 为可视化网页内容位于标签 与 作为一个标题使用位于标签 与 作为一个段落显示 在HT转载 2017-06-27 10:18:02 · 318 阅读 · 0 评论 -
HTML 编辑器
HTML 编辑器HTML 编辑器推荐可以使用专业的 HTML 编辑器来编辑 HTML,php中文网为大家推荐几款常用的编辑器:Notepad++:https://notepad-plus-plus.org/Sublime Text:http://www.sublimetext.com/HBuilder:http://www.dcl转载 2017-06-27 12:10:38 · 500 阅读 · 0 评论 -
前端技术之小总结
一、前端开发核心技术 处于web 2.0时代,网页最主要有三部分组成:结构、表现、行为。也就对应HTML、CSS、JavaScript。1、HTML是什么? HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。2、CSS CSS,全称“(层叠样式表)”。以原创 2017-07-14 17:25:54 · 1156 阅读 · 0 评论 -
菜鸟小白的web前端开发的路线规划
身为一个刚从机械转到学程序的菜鸟小白,没有人教,就只能自己摸索着学了,以下就是我自己在简书上看到一些前辈写的文章后,自己总结出的学习路线规划,过程也难免会有错漏,望大神指正,不慎感激,写这些也只是为了总结知识点罢了。好了,废话不多说了。一、工具篇1.编辑软件:notepad++、editplus、 sublime_text、visual studio、Dreamweaver 2.浏览器:chor原创 2017-07-14 17:26:37 · 1176 阅读 · 1 评论 -
CSS字体样式总结
本文纯属个人学习的总结。 CSS中的字体属性。1.字体类型font-family 语法: font-family:字体名; 备注: 字体名指的是”微软雅黑”、”宋体”、”Times New Roman”等。比如”font-family:calibri;”。2.字体大小font-size 语法: font-size:像素值; 备注: 除了像素值为单位外原创 2017-07-14 17:28:31 · 600 阅读 · 0 评论 -
关于var、let、const的故事
对于一门编程语言来说,变量与常量是再正常不过的两种,JavaScript是一直解释型的弱类型语言。JavaScript中变量或者常量可以用var、let、const(后两者是ES6的新特性)。1.let、const基本用法 只在声明所在的块级作用域内有效{ let a = 1; var b = 1; const c = 1;}a//...原创 2018-07-03 18:38:50 · 224 阅读 · 0 评论