你的位置:首页 > 网页设计
webpack配置sass模块的加载
webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。  为了使用sass,我们需要安装sass的依赖包//在项目下,运行下列命令行npm install --save-de ...
HTML是什么与基础格式
html 又称 超文本标记语言。网页的本质其实就是html代码,通过浏览器,将html转换翻译成用户可以看得懂的展现丰富的页面。所以制作网站的本质,其实就是编写html代码。HTML基础格式<html><head> <!-- 编码一定要写哦! - ...
CSS中字距,词距,首行缩进,字体大小,排版相关问题的探讨
先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先。IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也不大。 div{ border: 1px solid black; ...
初探HTML5:制作一份邀请函,入门级,适用于新手。
初探HTML5:制作一份邀请函目的:制作这个简易的邀请函,只是为了让新手入门Web开发。在制作页面之前,我们先来看看整个邀请函的整体面貌。 一.首先编写HTML代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 ...
css伪类和伪元素的区别,:before和::before的区别
伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。(相当于一个特殊的 ...
css居中的方法
2018-10-28 css居中的方法
...
css 画图形大全
Square #square { width: 100px; height: 100px; background: red; }Rectangle #rectangle { width: 200px; height: 100px; background: red; ...
HTML与CSS入门经典(第7版) PDF下载高清完整原版
需要学习的朋友可以通过网盘免费下载pdf版Michael Morrison是一位作家、开发人员、玩具发明家,同时还是各种计算机技术图书以及基于Web的交互课程的作者。除了作家和自由职业者这个主业以外,Michael还与他的妻子Masheed一起创立了Stalefish Labs娱 ...
前端——基础
2018-10-28 前端——基础
HTMLhtml概述和基本结构html概述HTML是 HyperText Mark-up Language 的首字母简写意思是超文本标记语言,超文本指的是超链接,标记指的是标签html注释<!-- 这是一段注释 -->html标题标签<h1>这是一级标题& ...
CSS之2D转换模块
CSS 2D转换模块transform参考W3手册transform 属性向元素应用从2D 或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。格式:transform: none|transform-functions;常用取值:旋转 rotatetransform: ...
微信小程序:动画(Animation)
简单总结一下微信动画的实现及执行步骤。一、实现方式官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。因为小程序是数据驱动的,给这句话加上数字标注分为三 ...
倒计时5,4,3,2,1css实现(count down  from 5 to 1 using css)
//count down from 5 to 1, a useful animation. show the code to you: <!DOCTYPE html><html><style>#contain { width: 4 ...
弹性盒
2018-10-28 弹性盒
引自Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日链接 ...
Flex布局
2018-10-28 Flex布局
网页布局(layout)是 CSS 的一个重点应用。传统的布局方式有 float position display。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布 ...
初次使用vue
2018-10-28 初次使用vue
1,细数项目中使用的技术:vue, vue-router, vuex ,axios,vue-cli3, 快速建站。2,mock技术使用的express-mockjs 。由于cli3 最新版的话缺少webpack的两个配置文件夹缺少。config和build 两个文件。配置webp ...
Node.js——fs模块(文件系统),创建、删除目录(文件),读取写入文件流
1 /* 2 1. fs.stat 检测是文件还是目录(目录 文件是否存在) 3 2. fs.mkdir 创建目录 (创建之前先判断是否存在) 4 3. fs.writeFile 写入文件(文件不存在就创建,但不能创建目录) 5 4. fs.appendFile ...
css基础内容
2018-10-24 css基础内容
css基础内容CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定 ...
给网站头部添加视频海报
给网站头部添加视频海报 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title ...
CSS 书写规范
2018-10-24 CSS 书写规范
class 类名的命名应该以功能为依据;例如: .btn-danger; .btn-warningCSS组件一个组件==一个独立的功能模块针对一个组件,通过功能描述样式 组件命名,功能描述:left-menu组件中的内容 .left-menu .men ...
CSS实现文字两端对齐
最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图:当时也没有多想直接使用‘&ensp;’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了。 如图:这很明显‘&ensp;’已经无法满足我了,只好上&a ...
火狐浏览器下显示页面有点大的bug
做页面时候,发现火狐和腾讯QQ浏览器有个问题,就是会将页面显示的比较傻大,像点了缩放比例120%似的,事实上缩放比例是100%,没有动。甚至面对这个问题,连腾讯公司都没解决掉,也让我很困惑。比如:同样打开www.qq.com(任何网址都这样),发现火狐和腾讯qq浏览器显示偏大,而 ...
H5调拨打电话界面
<a href=”tel:15771791266 ”>拨打电话</a>切记不要用js调用 直接用a标签 苹果安卓塞班都能调起来 ...
(办公)百度api的使用
这个只是入门,详细的还得看官方的文  百度地图的“Hello, World”    开始学习百度地图API最简单的方式是看一个简单的示例。该示例帮助您快速了解百度地图API的基本使用,快速创建一张“我的地图”。  如下代码可以实现一个简单完整的全屏展示的地图Demo: ...
火狐浏览器下显示页面大小的bug
做页面时候,发现火狐(腾讯QQ浏览器一样)下有个问题,这个问题连腾讯新闻等都没解决掉,也让我很困惑。问题如下:同样打开www.qq.com,发现火狐和腾讯qq浏览器显示偏大,而360极速浏览器正常。比如,我设置一个div宽度100,高度100,里面文字大小14px,为什么在都是1 ...
设计之下PDF下载高清完整扫描原版
第1章 项目启动什么是项目做一个产品本身没有期限,我们不知道它什么时候会完结,由需求而生的产品必然随着市场的发展、生活的改变和公司的决策做出相应转型。所以前期挖掘出的需求有着一定时限,使得我们要建立特定项目去完成。设计产品是一个不断研究和创新的过程,而项目是一个事情,完成了即完结 ...
from表单提交之前数据判空
在input标签中写onclick事件,不管返回是真是假都会继续提交表单。使用onsubmit事件 <form action="login.html" method='post' onsubmit="return check() ...
vue 关于数组和对象的更新
在日常开发中,我们用的最多的就是 绑定数据<div v-for="item in data" :key="item.id"> <!-- 内容 --></div>如果你有ng的开发经验,假设 data 你要 ...
使用css完成物流进度的样式
使用css完成物流进度的样式效果: css样式:<style type="text/css"> ul li { list-style: none; } .package-status { padding: 18px 0 0 0 ...
css实现中间文字,两边横线效果
1. vertical-align属性实现效果:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。<div class="header"> <sp ...
自定义select 小三角
把select小三角换成自己的图片效果:css样式:<style> #my_select { display: flex; display: -webkit-flex; width: 120px; font-size: 24px; padding ...
自定义scoll样式
使用伪类自定义scroll样式效果: 代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport& ...
Vue创建头部组件示例
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" conte ...
WebSocket 理论知识整理
最近工作用到websocket, 之前虽然也用到了一些简单的东西,但是并没有认真整理一下。所以这次准备了解一下WebSocket.WebSocket产生的背景WebSocket是一种在单个TCP连接上进行全双工通信的协议. 这意味着双方可以同时进行通信和交换数据对于我们都非常熟悉 ...
使用rem编写自适应屏幕网页造成div被span撑高的解决办法
原始代码:<html><head> <meta charset="utf-8"> <meta content="ie=edge" http-equiv="x-ua-compatible&q ...
css的一些基础(一)
定位定位相关属性用于设置目标组件的位置,常用的定位相关属性如下。属性说明值position设置定位方法static、relative、absolute、fixedleft right为定位元素设置偏移量长度、百分比、autotop bottom z- ...
实现花瓣登陆静态页面
思路:  花瓣网    1、对页面进行分析&middot;  2、下载素材  3、对页面尺寸进行分析  4、实现 下载素材  将页面素材保存到本地,方法如下图   页面尺寸进行分析  只做了大概得尺寸,尺寸获取方法,使用截图得方法获取宽和高,注意获取过程中图 ...
团队合作前端书写习惯总结
CSS 规范CSS 书写规范class类: 小写字母,'-'分割;图片: 小写字母,‘-’或者‘_’ 分割;避免选择器嵌套层级过多,少于3级;不要随意使用id,id应该按需使用,而不能滥用;使用CSS缩写属性 ,比如padding:0 10px 5px 5px等等 ...
frameset 在 Google Chrome 中无法隐藏左边栏解决方法!
使用Frameset 框架,发现在IE下,<frameset name="mainDefine" cols="200,10,*" frameborder="NO" border="0" fram ...
css设置背景模糊
使用filter属性来设置模糊值效果: css样式: <style type="text/css"> .cover { width: 600px; height: 300px; position: relative; te ...
整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图:我的代码示例:<!--提示模态框--> <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLa ...
CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应。常用三种方法:定位浮动弹性盒布局 定位方式最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位置 1 <!DOCTYPE html> 2 <html lang=& ...
标签设置为inline
标签设置为inline-block后,如何消除标签之间的间隔。 例如: <div><ul> <li><a href="#">学习</a></li> <li> ...
sessionStorage 基本使用
sessionStorage 是浏览器数据存储的方法之一,用于临时保存同一窗口的数据,关闭窗口后sessionStorage 的数据将会不存在,它是以 key value 键值对的形式储存。 基本用法存值sessionStorage.test="1212" ...
css实现修改默认滚动条样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>scroll </titl ...
设计中的设计PDF下载高清完整扫描原版
最近在读《设计中的设计》一书,读到很多地方,我都感到很激动,内心充满很多美好的感悟,要将书合起来,慢慢想想,日后打开再读。需要学习的朋友可以通过网盘下载pdf版设计到底是什么?这是我对自身职能的基本疑 问。作为一名设计师,我无时不在寻找着答案。 随着科学技术的发展,世界发生了巨变 ...
HTML网页随笔笔记
文档设置标记 1.格式标记1.<br>强制换行标记让后面的文字、图片、表格等等,显示在下一行2.<p>换段落标记换段落,由于多个空格和回车在HTML中会被等效为一个空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含 ...
HTML新手推荐
2018-10-20 HTML新手推荐
对于前端的学习要先了解一下浏览器和html的发展史其次看看这篇文章:https://kb.cnblogs.com/page/129756/#chapter1我读到这句话时候感觉到了科技这个东西有很多时候并不是一家独大的。而现实生活中是需要互相学习的奇怪的是,并没有哪个正式公布的规 ...
sublime3 快速创建html模板
1 安装 Package Control1.1 ctrl + ` 呼出控制台1.2 复制(不要带最外层的双引号,该代码仅适用于sublime text 3)“import urllib.request,os; pf = 'Package Control.sublime-p ...
HMTL label标签
2018-10-19 HMTL label标签
label标签和特定表单控件关联之后,如果用户在 label 元素内点击文本,就会触发关联的表单控件。就是说,当用户选择该label标签时,浏览器就会自动将焦点转到和label标签相关的表单控件上。label标签常用于与checkbox或radio关联,以实现点击文字也能选中/取 ...
【echats】echats悬浮事件频繁触发、过于灵敏、快速抖动等异常现象,适用与tooltip有关
方案:transitionDuration设为0;如图,发现关闭tooltip后现象消失,猜测与tooltip有关。经过仔细观察,鼠标在快速移动时tooltip会延迟移动,就是这个时间差,让鼠标悬浮在了tooltip上面,导致tooltip浮层阻止了地图的hover事件,然后to ...
HTML基本标签
2018-10-19 HTML基本标签
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述 ...
Bootstrap表单验证插件bootstrapValidator使用方法整理
插件下载 src="https://images2015.cnblogs.com/blog/776126/201605/776126-20160531175932586-1762914169.jpg" alt=""> 下载地址:h ...
html和css入门  (二)
CSS基础什么是CSS简单来说,层叠样式表(Cascading Style Sheet)是一种专门用来控制界面外观风格的文档。CSS发展历史1996年 CSS 1.0 规范面世,其中加入了字体、样色等相关属性。1998年 CSS 2.0 规范推出,这个版本的 CSS 也是最广为人 ...
html和css入门  (一)
HTML简介什么是HTMLHTML 的全称为 超文本标记语言(Hyper Text Markup Language),这种语言给我们提供一种建立结构性文档的方法。通过表示结构性的标签语法,我们可以创建包含标题,段落,列表,图片以及其他内容的文档。简而言之,HTML语法是用来描 ...
CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer   导航:nav   侧栏:sidebar   栏目:colu ...
html常见标签和属性
主体 body中常见属性 属性 表格 列表 表单 其他 input字段属性 form字段属性 ...
实现DataTables搜索框查询结果高亮显示
DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据。关于DataTables的更多信息,请查看 >上面DataTable表格中的 ...
vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话,进行总结分享一下如何处理。在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用。方法一:引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩 ...
一些不常用但又很有用的css小tips
1.box-sizing:border-box  box-sizing有三个属性:content-box(默认值) || border-box || inhreit。第一个自然不用说,比如我们设置一个div,宽度和高度都是100px,此时你给它加了padding:2px和bord ...
css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器
高级选择器:后代选择器子代选择器并集选择器交集选择器一、后代选择器:  使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子)  也就是说,box类下的所有span标签 字体颜色都被设置为了红色.box span{ color:red; }二、子代选择器:  使用> ...
第一页下一页12345678910下10页末页第1/228页,总共:13630条数据