你的位置:首页 > 网页设计
左侧固定 右侧自适应
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 ...
【】小技巧】CSS文字两端对齐
需求如下,红框所在的文字有四个字的、三个字的、两个字的,如果不两端对齐可以选择居中对齐,或者右对齐。但是如果要像下面这样两端对齐呢?我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度,三个字也可以,但是,像上图中&ldquo;122账号&rdq ...
Bootstrap插件
2017-09-23 18:00:10

Bootstrap插件

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>声明式触发手风琴</title> <link rel=" ...
web前段canvasjs图表制作一
关于web图表制作的方法有很多种,大家可以去网上这里我就介绍我经常使用的一种方法CanvasJS,这也是一款非常容易掌握并且好用的一种方法。 首先可以去网上下载canvasjs.js插件。下载路径 1:关于折线图制作方法: ...
注册页面
2017-09-23 14:00:13

注册页面

HTML代码 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 < ...
美化自适应按钮
2017-09-23 14:00:08

美化自适应按钮

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">&l ...
H5实现注册功能
2017-09-23 13:00:15

H5实现注册功能

HTML代码 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> ...
bootstrap 常用类名
2017-09-23 13:00:07

bootstrap 常用类名

Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签网格选项row :行col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])col-*-offset-* :列偏 ...
ionic基本环境的搭建(差点引发命案)
1.下载版本大于6的Node.jshttps://nodejs.org/en/个人喜欢下载最新版本安装成功后可以用命令行工具输入node -v和npm -v分别查看node、npm版本 2.下载安装cnpmnpm install -g cnpm --registry=h ...
分享几道经典的javascript面试题
这几道题目还是有一点意思的,大家可以研究一番,对自己的技能提升绝对有帮助。1、调用过程中输出的内容是什么function fun(n, o) { console.log(o); return { fun : function(m) { return fun(m, n); ...
css3新增动画
2017-09-22 15:00:09

css3新增动画

1、transiition过渡:样式改变就会执行transition(1)格式:transiition:1s width linear,2s 1s height;(2)参数:transition-property 要运动的样式 (all || [attr] || no ...
jQuery实现table中两列CheckBox只能选中一个
//html<table id="unit"> <tr> <th>选项一</th> <th>选项二</th> <th>姓名</th> </tr> ...
第一页下一页12345678910下10页末页第6/227页,总共:13570条数据