你的位置:首页 > 网页设计
纯CSS写正方形自适应宽高,且左侧高与正方形高保持一致
先上图虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈html:<div > <div > <div >le ...
响应式布局介绍
2017-09-21 14:00:12

响应式布局介绍

转自响应式布局 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题一个普通的自适应显示的三栏网页,当你用不同的终端来查看这 ...
offsetLeft,Left,clientLeft的区别
假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位 ...
【web】movie review——静态页面训练、css训练
实现样式要求: image:banner.png:generaloverview.png:background.png: bannerbackground.png: rottenbig.png: rottenbackground.png: fresh.g ...
HTML页面适配移动端常用配置
<meta charset="UTF-8">   <!-- initial-scale=1 初始缩放比例     maximum-scale=1 允许用户缩放到的最大比例     user-scalable=no 用户是否可以手 ...
清浮动
2017-09-21 10:00:13

清浮动

方法  对于标准浏览器来说,清浮动其实就两种方法,一种是在浮动元素下面添加新元素设置clear属性;另一种是触发包含块的BFC,使其包含浮动元素。而对于IE7-浏览器,则用到其特有属性haslayout【1】clear属性  [1]<div ></div> ...
a标签在实际工作中的应用
学习的时候,我们对a标签的认知:1、href属性添加一个地址,可进行页面的跳转 2、用锚点,制作页面内跳转和跨页面跳转(之前有写过一篇关于锚点的随笔 ...
使用JS实现图片轮播(前后首尾相接)
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码代码参考了一位已经写好了图片轮播功能的(再次表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能。效果如下: 1 <!DOC ...
关于html中图片上传预览的实现
本地图片预览第一种方法<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf ...
解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体、图片与图形模糊问题发生情况多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑。当然很多高端台式电脑也有高分辨率高dpi的显示器。 canvas在浏览器中的缩放原理如果没有设置style那么就以html的属性width,h ...
如何使用Flexbox和CSS Grid,实现高效布局
CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来。 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经 ...
html便民查询各个工具类实例代码分享(支持pc和移动端)
1 1.手机号码查询 2 3 <iframe id="api_iframe_51240" name="api_iframe_51240" src="" width="100%" height= ...
CSS深入理解之border_imooc张
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cssborde ...
CSS3选择器:nth
2017-09-20 12:00:22

CSS3选择器:nth

对于p:nth-child选择器,选择一个元素如果:这是个段落元素这是父标签的第二个子元素对于p:nth-of-type选择器,选择一个元素如果:选择父标签的第二个段落子元素:nth-of-type选择器,限制条件少 ...
webpack 通用模块(每个页面都用到的js)编译
1、项目目录 2、配置文件:webpack.config.jsvar htmlWebpackPlugin = require('html-webpack-plugin');var webpack = require('webpack');mod ...
便民查询各个工具类实例代码分享(支持pc和移动端)
1 1.手机号码查询 2 3 <iframe id="api_iframe_51240" name="api_iframe_51240" src="" width="100%" height= ...
webpack CommonsChunkPlugin 提取公共代码
1、项目结构2、部分代码module.jsconsole.log('module.js');index文件夹下的index.jsrequire('../module.js');console.log('首页-index文件');lo ...
前端angularJS利用directive实现移动端自定义软键盘的方法
最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样。先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面 ...
Vue.js项目模板搭建
2017-09-20 00:00:06

Vue.js项目模板搭建

前言从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人,我的首要任务就是设计 整体的架构 。一个良好的架构必定是具备丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手。所幸「Vue ...
a href=javascript:与a href=#
2017-09-19 22:00:09

a href=javascript:与a href=#

<a href="javascript:;"></a> <a href="#"></a>这两种写法。这两种写法到底有什么不同呢?用哪种来写更加规范呢?将href="#"是指 ...
CSS文档优化
2017-09-19 21:00:08

CSS文档优化

首先了解下CSS的渲染逻辑,它是从标记的最后一位开始搜索的,例如:.myclass li a,首选它会遍历所有的<a>,然后看哪些<a>之前有<li>,然后再看哪些<li>之前有.myclass。所以:1、层级太多会增加CSS渲染的 ...
webpack 引入jquery和第三方jquery插件
1、引入jqueryjQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可。index.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8 ...
前端实用功能:选项卡切换
工作过程中,遇到很多特别常用的小功能,但是写起来又比较费劲,于是一点一点整理出了一些使用频率较高的小功能,这里分享源码,希望对大家有帮助!选项卡切换 这个功能主要还是由display:block 与 display:none之间通过点击选项卡切换完成的html代码 ...
前端js优化方案(一)
2017-09-19 16:00:17

前端js优化方案(一)

最近在读《高性能javascript》,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博 >一、js优化之加载1、script标签放在底部,不要放在head标签;2、尽量减少js文件数量3、给script标签添加一个defer属性,def ...
npm install
2017-09-19 11:00:36

npm install

以npm安装testPlugin为例:1、npm install testPlugin:会把testPlugin包安装到node_modules目录中不会修改package.json之后运行npm install命令时,不会自动安装testPlugin 2、npm insta ...
一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)
你要的移动web前端都在这里!大前端方向:移动Web前端、Native客户端、Node.js、大前端框架:React、Vue.js、Koa 跨终端技术:HTML 5、CSS 3、JavaScript跨平台框架:React Native、Cordova前端工程化:Grunt、G ...
我与前端之间不得不说的三天两夜之html基础
易车网为您提供北京车市行情、北京汽车市场行情、北京汽车价格、北京汽车报价信息。北京车市最新报价,优惠信息,北京新车及经销商信息,北京汽车团购服务等,是您选车购车的第一网络平台
移动端fixed的元素抖动的问题
工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果;在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ浏览器、UC浏览器、360浏览器(这几个是ios最容易出问题的浏览器);问题:当用 ...
【前端小小白的学习之路】程序猿常用英语单词汇总
出自 id="__mceDel">void:[vɔid] 空的 main:[mein] 主要的 class:[klɑ:s] 类 system:[&lsquo;sistəm] 系统 out:[aut] 出,外,输出 print: ...
【前端小小白的学习之路】css3自适应布局单位vw,vh你知道多少?
视口单位(Viewport units)什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。视口单位中 ...
常用的标签文本标记
2017-09-18 17:00:06

常用的标签文本标记

分享一下这几天整理的常用的标签文本标记,都是一些基础知识:1、特殊的文本 转义字符: 空格: < : < less than > : & ...
webpack 编译图片文件 file
2017-09-18 15:00:11

webpack 编译图片文件 file

1、安装插件npm i file-loader --save-dev 2、项目目录 3、layer.less(图片位于less/css中 ).layer{ width: 600px; height: 200px; background-color: green; > ...
jsp笔记
2017-09-18 12:00:32

jsp笔记

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":& ...
webpack 编译模板文件
2017-09-18 11:00:49

webpack 编译模板文件

1、项目结构 安装loader:npm i html-loader --save-devnpm i ejs-loader --save-dev 2、模板文件layer.tpl<div class="layer"> <div> ...
webpack 编译html模板文件
2017-09-18 11:00:22

webpack 编译html模板文件

1、项目结构 安装loader:npm i html-loader --save-devnpm i ejs-loader --save-dev 2、模板文件layer.html<div class="layer"> <div&g ...
8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要。Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash。今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码,这些动画非常让人震撼,你也可以 ...
好用的几种常用的响应式设计让图片自适应的办法
Ethan Marcotte曾经在A List Apart上发表过一篇名为&ldquo;Responsive Web Design&rdquo;的文章,他当时就提出了响应式架构的概念(不少混迹技术圈的肯定看过这篇文章,这里就不再赘述了)。随着终端设备的日益丰富,无 ...
使用BootStrap框架设置全局CSS样式
一、排版标题HTML 中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。 <h1>这是一个h1标签</h1> ...
WEB跨域资源共享:Cross
2017-09-17 15:00:07

WEB跨域资源共享:Cross

跨域资源共享(CORS):浏览器同源策略中的同源指协议+域名+端口三者完全一致,其中任何一个不同即为跨域1. 浏览器同源政策是隔离潜在恶意文件的安全机制,限制信息传递和使用的边界,不是信息的保密机制。<img><script><link>以及表 ...
滚动字幕Marquee
2017-09-17 10:00:15

滚动字幕Marquee

基本语法 <marquee>滚动文字 </marquee> 文字移动属性的设置 方向<direction=#> #=left, right,up,down 方式<bihavior=#> #=scrol ...
css浮动Float
2017-09-17 00:00:16

css浮动Float

核心:浮动元素会脱离文档流并向左/向右移动,直到碰到父元素或者另外一个浮动元素。 float :left 向左浮动   right 向右浮动   none (默认)   inherit 继承父元素 float效果原效果图 换张图.....因为我 ...
table
2017-09-17 00:00:10

table

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>colgroup</title> ...
前端js优化方案(连续更新)
最近在读《高性能javascript》,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博 >一、js优化之加载1、script标签放在底部,不要放在head标签;2、尽量减少js文件数量3、给script标签添加一个defer属性,def ...
AngularJs  延时器、计时器
2017-09-16 13:00:06

AngularJs 延时器、计时器

1.$timeout延时器apptest.controller("main",function($scope,$timeout){ $scope.pink="pink"; $scope.box="第二个盒子"; $tim ...
css编写注意事项(不定时更新)
CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步。如果各位看官也有看法和建议,评论下,我也会更新进来,谢谢! 1、css选择符是从右到左进行比配的,例如 #nav li, ...
用canvas绘制android机器人
2017-09-15 23:00:08

用canvas绘制android机器人

大写的尴尬 …… <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用canvas绘制an ...
h5的本地存储——sessionStorage,localStorage
HTML5 提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据, ...
根据要求完成表单以及使用servlet处理表单 任务要求 掌握Servlet输出表单和接收表单数据(多值组件的读取)。
Servlet代码:package com.test;import java.io.IOException;import java.io.PrintWriter;import java.util.Arrays;import javax.servlet.ServletExcepti ...
ngnix入门配置
2017-09-15 16:00:09

ngnix入门配置

文件1.首先到ngnix下载页面下载你操作系统对应的ngnix压缩包 &nbsp src="http://images2017.cnblogs.com/blog/1030158/201709/1030158-20170915135045172-13308 ...
如何制作一个自适应手机、电脑、ipad的网页方法总结
进入2015年,手机上网的用户已经越来越多,已经赶超PC端。随着2G、3G、4G、免费WIFI和无线基站的不断普及,越来越多的人开始使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机 ...
webpack 处理CSS
2017-09-15 11:00:06

webpack 处理CSS

1、安装插件npm i style-loader css-loader --save-devnpm i postcss-loader --save-devnpm i autoprefixer --save-devnpm install postcss-import --save- ...
photoshop 切片工具进行切图
1、使用切片工具切图2、存储为web所用格式3、选择图片格式4、只保存切片(选择所有用户切片) 5、查看: ...
JAVAscript学习笔记 js计时器与倒计时 第六节 (原创) 参考js使用表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时</title></ ...
哈哈哈哈哈哈哈
2017-09-14 21:00:14

哈哈哈哈哈哈哈

平稳退化(优雅降级):首先使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级的浏览器进行限制,逐步衰减那些无法被支持的功能及体验。使用平稳退化技术时,你必须首先完整的实现了网站,其中包括所有的功能和特效。 然后再为那些无法支持所有功能的浏览器增加候选方案,使之在旧 ...
html留言功能
2017-09-14 17:00:08

html留言功能

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" ...
编写Servlet,验证用户登录,如果用户名与密码都为“admin”则验证通过,跳转欢迎页面,否则弹出提示信息“用户名或密码错误,请重新输入!”,点击“确定”后跳转至登录页面
java代码:(Test1)package com.test;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.serv ...
webpack 编译ES6插件babel
2017-09-14 16:00:30

webpack 编译ES6插件babel

1、安装babel-loader参考 >进入项目目录执行安装命名:npm install --save-dev babel-loader babel-corenpm install --save-dev babel-preset-latestbabel-preset-lat ...
angular4模块中标签添加背景图
一、现象一个全屏的&ldquo;走马灯&rdquo;每项需要添加背景图,在循环标签里需要动态添加行内样式 二、解决1、首先有一个图片数组,如:export class AppComponent { array = ["url(/assets/imag ...
canvas基础绘制
2017-09-14 12:00:10

canvas基础绘制

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>arc</title></ ...
JS保留两位小数 四舍五入函数
js 四舍五入函数 toFixed(),里面的参数 就是保留小数的位数。1 <script language="javascript"> 2 document.write("<h1>JS保留两位小数例子</h1& ...
第一页下一页12345678910下10页末页第7/227页,总共:13570条数据