你的位置:首页 > 网页设计
CSS盒子模型之详解
2017-10-13 03:00:35

CSS盒子模型之详解

前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。一、css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距 ...
[js高手之路]html5 canvas动画教程
综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 1 <head> 2 <meta charset='utf-8' /> 3 <title>canvas ...
《移动Web前端高效开发实战》笔记4
路由是一个单页应用的核心,大部分前端框架都实现了一个复杂的路由库,包括动态路由,路由钩子,组件生命周期甚至服务器端渲染等复杂的功能。但是对于前端开发者而言,路由组件的核心是URL路径到函数的映射,了解了这个概念,便可以亲自实现一个简单的路由功能。1.路由的原理路由(Route)在 ...
css3弹性盒模型flex快速入门与上手(align
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content.一、align-content:多行的副轴对齐方式含义多行的副轴对齐方式可选值stretch | flex-start | center | fl ...
轻量级音乐播放器搭建 1
轻量级音乐播放器搭建 1 好长时间没有写东西了,包括目前使用的这个博客,只能说是一个半成品把,已经半年多没有进行维护了,结果随手点几下进就能发现一大堆问题。现在又要挖一个新的坑,我想要编写一个轻量级的音乐播放器。有点类似于豆瓣FM这样的。目前的定位是比较简单的那种(因为我对其 ...
假设高度已知,左右宽度固定,实现三栏布局的5种方法
俗话说好记性不如烂笔头,写代码也是一样的道理,看过的东西如果不写一遍真的在脑子里呆不了多久。所以工作这么久慢慢把以前记录过的知识搬上来,一是为了分享,二是更好的总结!好了话不多说,进入正题。第一种方法:float 1 <style> 2 *{ 3 padding ...
NodeJS学习笔记之Http模块
2017-10-13 03:00:16

NodeJS学习笔记之Http模块

一,开篇分析首先“Http”这个概念大家应该比较熟悉了,它不是基于特定语言的,是一个通用的应用层协议,不同语言有不同的实现细节,但是万变不离其宗,思想是相同的,NodeJS作为一个宿主运行环境,以JavaScript为宿主语言,它也有自己实现的一套标准,这篇文章我们就一起来学习一 ...
【HTML基础】表格和表单
2017-10-03 01:00:18

【HTML基础】表格和表单

本次博客的主要内容如下:meta和link表格表单meta和linkmetameta的属性有两种:name和http-equiv。name属性主要用于描述网页内容,对应与网页内容。1.关键字,当搜索引擎在爬取内容的时候,会根据关键字判断:<head> <titl ...
【HTML基础】常用基础标签
从今天开始学习一些前端的知识,从HTML开始,争取每天都积累一点。 什么是HTML?HTML(HyperText Markup Language,超文本标记语言),所谓超文本就是指页面内可以包含图片、链接、甚至音乐等非文字元素,HTML不是一种编程语言,而是一种标记语言,会用 ...
H5如何做手机app(移动Web App)?图片轮播?ionic、MUI
移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python)1 MUI-轻量APP框 ...
【HTML基础】语法1
2017-10-02 01:00:08

【HTML基础】语法1

从今天开始学习一些前端的知识,从HTML开始,争取每天都积累一点。 什么是HTML?HTML(HyperText Markup Language,超文本标记语言),所谓超文本就是指页面内可以包含图片、链接、甚至音乐等非文字元素,HTML不是一种编程语言,而是一种标记语言,会用 ...
左侧固定 右侧自适应
2017-10-01 21:00:15

左侧固定 右侧自适应

左侧浮动,右侧margin-left值为左侧宽即可。由于左侧浮动,左侧盒子脱标,右侧仍在标准文档流,右侧盒子宽度是剩下的宽度,效果为右侧自适应。右侧内容可居中,常规用法即可。需注意的是左侧浮动,右侧不能继续浮动。如果两边盒子都浮动,由于右侧盒子宽度不固定,默认为内容撑开宽度。若浮 ...
text
2017-10-01 20:00:08

text

对于text-align来说,一般我们都是使用居中这个属性值,突然今天需要达到这样一个效果:对,就是“上海活动”这四个字在所在的区域均匀分布1 <li class="current">2 <h3>上海活动</h3>3 & ...
css禁止文字被选中
2017-10-01 17:00:22

css禁止文字被选中

有时候,为了让用户有更好的体验,需要禁用掉文本选中功能比如:使用a标签模拟按钮,如果不禁用掉文本选中功能,那么双击时会选中文字,用起来很不爽。多数情况下,只需要使用CSS样式就可以实现这个功能啦:1 body{2 -o-user-select: none;3 -moz-use ...
html基础笔记
2017-09-30 18:00:10

html基础笔记

1  HTML简介  HTML:超文本标记语言(hypertext markup language);  由浏览器直接解析执行(没有编译过程);  超文本:音频、视频、图片都成为超文本;  标记:<英文单词或者字母>称为标记。htm ...
css动画之旅
2017-09-30 16:00:08

css动画之旅

今天学习了一个css实现弹性菜单的效果,感觉还不错。闲话不说,直接上代码....下面是页面的HTML代码: 1 <div class="menu"> 2 <div class="btn btn-trigger"> ...
JSP的内置对象及方法
2017-09-30 15:00:07

JSP的内置对象及方法

request表示HttpServletRequest 对象。它包含了有关浏览器请求的信息,并且提供了几个用于获取cookie,header, 和session 数据的有用的方法。response 表示HttpServletResponse 对象,并提供了几个用于设置送回浏览器的 ...
[js高手之路] html5 canvas动画教程
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下:[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法[js高手之路] html5 canvas系列 ...
《移动Web前端高效开发实战》笔记3
在项目的开发过程中,统一的代码风格对于项目的可协作性以及可维护性来说相当重要,因此可以采用一些插件来进行代码风格的检查。本例中的源文件包含两类:Sass文件和采用ECMAScript 6规范的JavaScript文件。在Gulp中,采用gulp-eslint和gulp-sass- ...
iview给radio按钮组件加点击事件
<RadioGroup v-model="formValidate.phone"> <Radio label="phone">商家电话</Radio> <Radio label=&q ...
#前端的挑战——单页应用的体验
---恢复内容开始---##什么是单页应用所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面(一个html),所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。##为什么会有单页应用我们知道ajax技术的产生,一部分原因就是为了让访问网页的用户在不 ...
Angular表格神器“ui
2017-09-29 18:00:12

Angular表格神器“ui

HTML: (代码仅用于解释得更清楚,并未完全展示)<!doctype html><html ng-app="app"> <head> <script src="http://ajax.googleap ...
使用纯css实现波浪效果
2017-09-29 18:00:11

使用纯css实现波浪效果

有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现。首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色(水的颜色);内层div颜色设置为白色,加上圆角,圆角建议30%-45%之 ...
使用css写三角箭头
2017-09-29 18:00:09

使用css写三角箭头

.right-arrow{ width:6px; height:6px; align-self: center; border-right:1px solid #2ac795; border-left:2px solid transparent; border-top:2px s ...
[js高手之路] html5新增的定时器requestAnimationFrame实战进度条
在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解决什么问题?优势与特点:1)requestAnimationFrame会把每一帧 ...
(2017.9.27) 自定义列表项 list
今天给某公司做招聘专页。早上完成设计图,下午开始排版。页面套用了我之前做的某人才局的招聘页面,导航栏、banner 很快就出来了。这次内容里我有些地方用了列表,当然要用 <ul> <li> 标签。列表项(小圆点)做成绿色的小正方块,这时我想是不是有一个 C ...
css垂直居中的四种方法
2017-09-28 19:00:08

css垂直居中的四种方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中 ...
在HBulider中如何快速的生成有序(ol)和无序(ul)列表
首先你需要创建一个HTML文件,然后在body里面写入你要创建的类型(有序或者无序),然后列表的个数个人来定:  格式如下:      ul > li * 5 代表我要创建一个列表为5个的无序类型       然后按Tab键就可以快速生成你要 ...
Html(小试牛刀)
2017-09-28 18:00:07

Html(小试牛刀)

结构代码:<html><head></head><title></title><body>页面主体内容HTML超文本语言以标签为主编写前端页面。</body></html> ...
百度前端技术学院练习
2017-09-28 17:00:10

百度前端技术学院练习

一个假期过了,也有一段时间没写博客了。这开学之后还是要练一练,不然又生疏了。<!DOCTYPE html><html lang="en"><head> <link href="../css/任务6.css&q ...
【转载】如何让图片按比例响应式缩放、并自动裁剪的css技巧
原文: CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是把img宽度设为100%, 不设置高度,高度就会自动跟着高度缩放但是如果要达到的效果是,要让图片的宽高要按一定的比例显示,如1:1 、4:3 等, 然而图片尺寸不是这个比例,又不 ...
元素垂直水平居中
2017-09-28 15:00:15

元素垂直水平居中

1 已知宽高1.1 定位值上下左右给0 1 /* 父盒子垂直水平居中 */ 2 .box{ 3 background-color: #cccccc; 4 height: 200px; 5 width: 400px; 6 position: absolute; 7 top ...
图片下方空白
2017-09-28 15:00:10

图片下方空白

如果将图片竖直向下排列,会发现图片上边框与下边框之间有一小块空白,这是因为图片对齐方式导致的。HTML如下:1 <div>2 <img src="images/logo.png" alt="">3 <img ...
视觉表现理论知识
2017-09-28 15:00:07

视觉表现理论知识

终于可以知道视觉表现的实现方式,而不是一个一个的具体实现了,突然感到自己能够把握页面的整体布局了呢,似乎学到了表现背后的东西?以下是一个突然发现自己见识如此少的女汉子的嘶吼啊啊啊,刚刚注意到width设置的是内容区的宽度,增加 padding 或 margin 后会增加总体宽度啊 ...
《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
8.3.1 安装和配置运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:npm install gulp-cli –g然后,在项目根目录下创建package.json文件,命令如下:npm init根据引导配置项 ...
网页title旁边的小图片
2017-09-27 19:00:16

网页title旁边的小图片

网页title旁边的小图片设置,图片格式必须是.ico <link rel="icon" href="img/logo.ico" type="img/x-ico" /> ...
webpack 实用配置总结
2017-09-27 16:00:15

webpack 实用配置总结

1、webpack.config.js配置文件为://处理共用、通用的jsvar webpack = require('webpack');//处理html模板var htmlWebpackPlugin = require('html-webpack-pl ...
vue的iview列表table render函数设置DOM属性值的方法
{ title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:p ...
人机交互第一次
2017-09-27 13:00:10

人机交互第一次

人机交互第一次 2015080360031 王勇广最喜欢的平台:SteamWeGameBattleNet最喜欢干的事情:吃饭睡觉打豆豆 ...
position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代码了。 项目中用到position: fixed;z-index: ...
《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
1.整体缩放整体缩放可以用在营销活动页,营销活动可能因为设计美观需求必须使用背景图片而非背景色,因此需要考虑背景图适应屏幕大小。开发者可以用320像素的宽度作为基础宽度(高度可以固定),然后通过计算实际文档宽度来进行相应缩放。使用整体缩放布局开发的项目在加载过程中需要监听resi ...
Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, ...
the server responded with a status of 403 (Forbidden)
403跨域问题。看一下要访问的url. ...
选择输入框的应用
2017-09-26 12:00:07

选择输入框的应用

前段时间有一个需求,需要做一个选择输入框,类似百度的搜索框一样。由于本人也是菜鸟一枚,在网上找了一大堆,现给出两种比较好用的实现方式。第一种:基于html5的新特性效果如下图所示下面给出jsp的关键代码。这里需要注意的是 datalist的id必须和input的list属性值一致 ...
BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版
如上就是很多后台管理系统的母版页布局.左边一列模板.上面一列系统标识.空白处充填子页面以ASP.NET MVC为基础引入bootstrap.js.bootstrap.cssbody: <div> <ul > <li > <a ...
JavaWeb前端笔记
2017-09-26 09:00:06

JavaWeb前端笔记

day06  回顾:   bootstrap:      css框架,html/css/js集于一身,ie 6/7/8兼容有问题      开发响应式页面,使用于不同的上网设备      使用步骤:        1.导入bootstrap.css        2.导入jque ...
css动画
2017-09-26 02:00:17

css动画

今天就写一个css3抛物线的动画吧= =从左到右的抛物线动画,我们就暂且把动作分为匀速向右运动和变速的上下运动。水平匀速运动我们可以利用 translateX(x):定义 2D 转换,沿着 X 轴移动元素;以及linear:动画从头到尾的速度是相同的 这两个属性值来实现;上 ...
防止html5的video标签在iphone中自动全屏
问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源。  解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinline=true;        <video id="play ...
jsp文件和HTML互相引入的乱码问题
1.在jsp中用include指令引入HTML文件时遇到的问题:jsp、html都可以正确的显示,当jsp引入html时访问jsp页面HTML出现乱码,jsp原有的输出无乱码,解决方法:在HTML第一行加入:<%@ page language="java" ...
wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在给大家介绍一下这个滚动动画: 一、使用方法:1.下载animate.css2.下载wow.js3.引用文件,像这样:<link href="css/animate.min.css&q ...
CSS选择器中带点(.)怎么办?
在SharePoint中很多元素的ID都用点(.)来连接的,比如:<li id="Ribbon.Documents.EditCheckout" unselectable="on"> 熟悉css的都知道点(.)是用来标示类选择器的 ...
[js高手之路] html5 canvas系列教程
canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持。你可以参考这个网站,查看c ...
[js高手之路] html5 canvase系列教程
canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持。你可以参考这个网站,查看c ...
HTML5标签选择指引
2017-09-25 12:00:08

HTML5标签选择指引

...
webapck html
2017-09-25 11:00:08

webapck html

1、安装npm i html-loader --save-dev2、项目目录 layout文件夹下的footer.html文件为:<script type="text/javascript" src="http://cdn.bootcss. ...
静态页面如何实现 include 引入公用代码
一直以来,我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的,就像下面这样:<!-- index.php --><!DOCTYPE html><html lang=" ...
微信服务号开发
2017-09-24 20:00:25

微信服务号开发

最近帮朋友写了个微信服务号,服务号名字叫做十四行诗。没错是卖月饼的商城。简单介绍下微信登录,与官方文档不同,简单画了一下UML图 简单的说就是先建立了一个index.php(直接拍域名就过去了。),然后传一个appid,微信公众号后台能拿到<?php$appid ...
如何写好css系列之button
2017-09-24 17:00:07

如何写好css系列之button

现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要,因为基础有boostrap,组件库有:easyui,elementui,iview,ionic等等。但我个人练习自己如何写好一个 ...
如何实现两个文本框同时输入
如何实现两个文本框同时输入<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi ...
ionic基本环境的搭建
2017-09-24 14:00:11

ionic基本环境的搭建

1.下载版本大于6的Node.jshttps://nodejs.org/en/个人喜欢下载最新版本安装成功后可以用命令行工具输入node -v和npm -v分别查看node、npm版本 2.下载安装cnpmnpm install -g cnpm --registry=h ...
第一页下一页12345678910下10页末页第6/227页,总共:13581条数据