*MaybE
*MaybE

HTML+CSS实战--品优购

品优购

  • 一、品优购项目规划
    • 1.1 网站制作流程
    • 1.2 品优购整体项目介绍
    • 1.3 品优购项目的学习目的
    • 1.4 开发工具以及技术栈
      • 1.4.1 开发工具
      • 1.4.2 技术栈
    • 1.5 品优购项目搭建工作
      • 1.5.1 需要创建如下文件夹
      • 1.5.2 需要创建如下文件
      • 1.5.3 模块开发
    • 1.6网站favicon图标
      • 1.6.1. 制作favicon图标
    • 1.7 网站TDK三大标签SEO优化
      • 1.7.1title网站标题
      • 1.7.2 description网站说明
      • 1.7.3 keywords关键字
  • 二、品优购首页制作
    • 2.1 常用模块类名命名
    • 2.2 快捷导航shortcut制作
    • 2.3 header制作
    • 2.4 nav 导航制作
    • 2.5 footer 底部制作
    • 2.6 main 主体模块制作
    • 2.7 推荐模块制作
    • 2.8 楼层区floor制作
  • 三、品优购列表页制作
    • 3.1 结构搭建
    • 3.2 列表页header和nav修改
    • 3.3 列表页主体 sk_container
  • 四、品优购注册页制作
    • 4.1 注册页类名命名
    • 4.2 注册页面布局
    • 4.3 registerarea 布局
  • 五、web服务器
    • 5.1 什么是web服务器
    • 5.2 本地服务器
    • 5.3 远程服务器
    • 5.4 将自己的网站上传到远程服务器上

一、品优购项目规划

1.1 网站制作流程

HTML+CSS实战--品优购_第1张图片

1.2 品优购整体项目介绍

  • 项目名称：品优购
  • 项目描述：品优购是一个电商网站，我们要完成pc端首页，列表页，注册页的制作

1.3 品优购项目的学习目的

  1. 电商类网站比较综合，里面需要大量的布局技术，包括布局方式，常见效果以及周边技术。
  2. 品优购项目能复习，总结，提高前面所学的基础
  3. 写完品优购项目，能对实际开发中制作pc端页面流程有个整体的感知
  4. 为后期做移动端项目做铺垫

1.4 开发工具以及技术栈

1.4.1 开发工具

vscode、fw、chrome

1.4.2 技术栈

  • 利用html5+css3手动布局，可以大量使用h5新增标签和样式
  • 采取结构和样式相分离，模块化开发
  • 良好的代码规范有利于团队更好的开发协作，提高代码质量

1.5 品优购项目搭建工作

1.5.1 需要创建如下文件夹

HTML+CSS实战--品优购_第2张图片

1.5.2 需要创建如下文件

HTML+CSS实战--品优购_第3张图片

1.5.3 模块开发

所谓的模块开发：将一个项目按照功能划分，一个功能一个模块，互不影响
模块化开发具有重复使用、更换方便的优点

  • 代码也是如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
  • 这里典型的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式
  • 模块化开发具有重复使用、修改方便等优点
    HTML+CSS实战--品优购_第4张图片
    common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式

1.6网站favicon图标

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或标签上
目前主流的浏览器都支持favicon.ico图标

1.6.1. 制作favicon图标

  1. 把品优购图片切成png图片
  2. 把png图片转化为ico图标，可以借助于第三方网站，例如比特虫
  3. favicon图标放到网站根目录下
  4. HTML页面引入favicon图标
  • 在HTML页面里面的元素之间引入代码

1.7 网站TDK三大标签SEO优化

SEO优化汉译为搜索引擎优化，是一种利用搜索引擎规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站进行深度优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
页面必须有三个标签来符合SEO优化
HTML+CSS实战--品优购_第5张图片

1.7.1title网站标题

title具有不可替代性，是我们页内的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！

1.7.2 description网站说明

简要说明我们网站主要是做什么的
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“xxx网作为…”、“电话：010…”之类的语句
例如：

1.7.3 keywords关键字

keywords是页面关键词，是搜索引擎的关注度之一
keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式

对于我们前端人员来说，我们只需要准备好这三个标签，里面的具体内容，有专门的SEO人员来准备

二、品优购首页制作

网站的首页一般都是使用index命名，比如index.html 或者 index.php
我们开始制作首页头部和底部的时候，根据模块化开发，样式要写到common.css里面

2.1 常用模块类名命名

以下是我们约定的命名模块
HTML+CSS实战--品优购_第6张图片

2.2 快捷导航shortcut制作

在这里插入图片描述

  • 通栏的盒子命名为shortcut，是快捷导航栏的意思。注意这里的行高，可以继承给里面的子盒子
  • 里面包含版心的盒子
  • 版心盒子里面包含1号左侧盒子左浮动
  • 版心盒子里面包含2号右侧盒子右浮动

2.3 header制作

在这里插入图片描述

  1. header盒子必须要有高度
  2. 1号盒子是logo标志定位
  3. 2号盒子是search搜索模块定位
  4. 3号盒子是hotwords 热词模块定位
  5. 4号盒子是shopcar购物车模块
  • count统计部分用绝对定位去做
  • count统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
  • 一定要注意左下角不是一个圆角，其余三个是圆角

logoSEO优化

  1. logo里面首先放一个h1标签，目的为了提权，告诉搜索引擎，这个地方很重要
  2. h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
  3. 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
    • 方法1：text-indent移动盒子外面（text-indent: -9999px），然后overflow: hidden ，淘宝的做法
    • 方法2: 直接给font-size: 0;就看不到文字了，京东的做法
  4. 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

2号盒子是search搜索模块定位
HTML+CSS实战--品优购_第7张图片
3号盒子是hotwords 热词模块定位
4号盒子是shopcar购物车模块

2.4 nav 导航制作

在这里插入图片描述

  • nav盒子通栏有高度，而且有个下边框
  • 1 号盒子左浮动，dropdown
  • 2 号盒子左浮动，navitems导航栏组
  • 1 号盒子有讲究，根据相关性 里面包含.dt和.dd两个盒子

2.5 footer 底部制作

  • footer页面底部盒子通栏给一个高度和灰色的背景
  • footer里面有个大的版心
  • 版心里面包含1号盒子，mod_service是服务模块，mod是模块的意思
  • 版心里面包含2号盒子，mod_help是帮助模块
  • 版心里面包含3号盒子，mod_copyright是版权模块

2.6 main 主体模块制作

以前书写的就是模块化中公共的部分
main主体模块是index里面专有的，需要注意新的样式文件index.css

  • main盒子宽度为980像素，位置距离左边220px（margin-left），给了高度就不用清除浮动
  • main里面包含左侧盒子，左浮动，focus焦点图模块
  • main里面包含右侧盒子，右浮动，newsflash新闻快报模块
    HTML+CSS实战--品优购_第8张图片
    newsflash新闻快报模块
  • 1号盒子为news新闻模块 高度为165px
  • 2号盒子为lifeservice生活服务模块 高度为209px
  • 3盒子为bargain特价商品

news新闻模块

  • 注意，这里我们分为上下两个模块，但是两个模块都用div
  • 1号盒子news-hd新闻头部模块，给一个高度和下边框
  • 2号盒子news-bd新闻主题部分，里面包含ul和li还有链接
    HTML+CSS实战--品优购_第9张图片

2.7 推荐模块制作

HTML+CSS实战--品优购_第10张图片

  • 大盒子recom推荐模块 recommend
  • 里面包含两个大盒子，浮动即可
  • 1号盒子recom-hd
  • 2号盒子recom-bd，注意里面的小竖线

2.8 楼层区floor制作

注意这个floor，不要给高度，内容有多长算多少
第一楼是家用电器模块：里面包含两个盒子

  • 1号盒子box_hd，给一个高度，下面有个边框，里面分为左右2个孩子
  • 2号盒子box_bd，不要给高度HTML+CSS实战--品优购_第11张图片
  1. box_hd模块
  • 有高度可以不用清除浮动
  • 左边h3，盒子左浮动
  • 右边tab-list，右浮动，因为用到tab切换效果，所以里面要用ul和li来做
    在这里插入图片描述
  1. Tab栏原理-布局需求
    HTML+CSS实战--品优购_第12张图片
    tab_list 决定tab_content的显示

三、品优购列表页制作

3.1 结构搭建

  1. 列表页面是新的页面，我们需要新建页面文件list.html
  2. 因为列表的头部和底部基本保持一致，所以我们需要把首页中的头部和底部的结构复制过来
  3. 头部和底部也需要样式因此list.html中还需要引入common.css
  4. 需要新的list.css样式文件，这是列表也专门的样式文件

3.2 列表页header和nav修改

HTML+CSS实战--品优购_第13张图片

  • 秒杀盒子sk（second kill）定位即可
  • 1 号盒子左浮动sk_list里面包含ul和li
  • 2号盒子左浮动sk_con里面包含ul和li

3.3 列表页主体 sk_container

HTML+CSS实战--品优购_第14张图片

  • 1号盒子sk_container给宽度1200，不要给高度
  • 2号盒子sk_hd，插入图片即可
  • 3号盒子sk_bd，里面包含很多ul和li

四、品优购注册页制作

4.1 注册页类名命名

注册页面：register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化

名称 说明
注册专区 registerarea
注册内容 ref-form
错误的 error
成功的 success
默认的 default

4.2 注册页面布局

HTML+CSS实战--品优购_第15张图片

4.3 registerarea 布局

HTML+CSS实战--品优购_第16张图片

五、web服务器

5.1 什么是web服务器

服务器（我们也称主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型的不同，服务器又分为文件服务器、应用程序服务器、web服务器等。
web服务器一般是指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等web端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
以下服务器我们主要指的是web服务器
根据服务器在网络中位置的不同，又可分为本地服务器和远程服务器

5.2 本地服务器

我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问你的品优购网站了

5.3 远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。
远程服务器通常是别的公司为我们提供一台电脑，我们只要把网站项目上传到这台电脑上，任何人都可以通过域名访问我们的网站了

5.4 将自己的网站上传到远程服务器上

申请一个免费的远程服务器 http://free.3v.do/
1、去免费空间网站注册账号
2、记录下主机名、用户名、密码、域名
3、利用cutftp软件上传网站到服务器
4、在浏览器中输入域名，即可访问我们的品优购网站了（http://bj960928.3vzhuji.net/）

你可能感兴趣的:(HTML5+CSS3,css,css3,html5,html)

  • Html、Css3动画效果 蔚一 htmlcss3前端
    文章目录第九章动画9.1transform动画9.2transition过渡动画9.3定义动画第九章动画9.1transform动画transform2D变形translate()：平移函数，基于X、Y坐标重新定位元素的位置scale()：缩放函数，可以使任意元素对象尺寸发生变化rotate()：旋转函数，取值是一个度数值skew()：倾斜函数，取值是一个度数值div{transform:tran
  • 2018-06-15 h5开发记录 superKelly
    php加载流程php->html->js+cssphp1.smarty赋值$smarty->assign("loadMsg",array('pic'=>'error','footDesc'=>'ec:'.$res));$smarty->caching=false;2.发起请求$url=Config::getApiActivityUrl().'/activity/anniversary/getGue
  • node模块 weiweiweb888 前端javascriptbootstrap
    模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
  • Webpack | vite | Rollup | Gulp | Grunt 比较 前端阿彬 前端实用知识学习webpackgulp前端vite打包工具
    前言模块化管理工具和自动化构建工具是不同的。两者主要体现在侧重点不一样。自动化构建工具侧重于前端开发的整个过程的控制管理（像是流水线）。而模块化管理工具更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块。Webpackwebpack可以说是当前最流行的模块化管理工具和打包工具。其通过loader的转换，可以将任何形式的资源视作模块。它还可以将各个模块通过
  • 【网络安全】如何预防xss 不会代码的小徐 web安全xss安全
    XSS(Cross-SiteScripting，跨站脚本攻击)是一种代码注入攻击。攻击者通过在目标网站注入恶意脚本，使其在用户浏览器中执行，从而窃取用户敏感信息如Cookie和SessionID。CSS在前端已经被用了，为了避免歧义用了XSS作为缩写。XSS的本质是恶意代码与网站正常代码混在一起，浏览器无法分辨它们的可信度，最终导致恶意代码被执行。XSS的危害浏览器无法区分恶意代码和正常代码，它们
  • HTML5 ＜video＞常用属性、时间、方法及基础使用说明 Wu Youlu java前端javascript
    简介HTML元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。标签也可用于播放音频，但播放音频用更加适合。元素支持三种视频格式：MP4,WebM,和Ogg:MP4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebM文件Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件基础写法Yourbrowserdoesnot
  • Java好资源网址推荐 学习&实践爱好者 Java学习编程资料java开发语言
    Java好资源网址推荐Java官方教程https://docs.oracle.com/javase/tutorial/index.htmlJavaDocumentationhttps://docs.oracle.com/en/java/JavaSELicensingUserManualhttps://www.oracle.com/java/technologies/javase/licensing
  • camera hal John_chaos Android系统层
    https://www.cnblogs.com/blogs-of-lxl/p/10651611.html
  • 微店构造订单页面，自动化抢票 安替-AnTi 付费文章
    文章目录前言前文回顾接口构造订单页面构造下单抢购页面构造前言之前的文章写过微店抢票如何构造订单页面分析，这篇文章在之前的基础上，进行抢票。前文回顾接口构造我们以楠溪江·星巢秘境音乐节ROCKTOWN这个购票链接进行分析。链接如下：https://shop967587296.v.weidian.com/item.html?itemID=4409563229&wfr=wxBuyerShare&shar
  • HTML提交表单给python 一壶浊酒.. 前端开发htmlpython前端
    python代码fromflaskimportFlask,request,render_template,redirect,url_forapp=Flask(__name__)@app.route('/')defform():#渲染表单页面returnrender_template('./index.html')@app.route('/submit_form',methods=['POST'])
  • Django Admin管理后台导入CSV 背着吉他去流浪 django服务器python
    修改管理模型，代码如下：classCsvImportForm(forms.Form):csv_file=forms.FileField()@admin.register(Hero)classHeroAdmin(admin.ModelAdmin,ExportCsvMixin):...change_list_template="entities/heroes_changelist.html"defge
  • CSS中inset属性详细讲解 OEC小胖胖 css前端
    CSS中的inset属性是一种用于定位和调整非static定位元素的缩略属性。它是四个单独属性的简写，这些属性是top、right、bottom和left。通过inset属性，可以同时设置这些属性的值，简化代码书写。1.属性语法inset属性的语法如下：/*单个值*/inset:|;/*两个值*/inset:||;/*三个值*/inset:|||;/*四个值*/inset:||||;①单个值当提供
  • java用poi操作excel .xls和.xlsx格式 躁动的青年 poijava操作excelpoixlsx
    jxl主页http://www.andykhan.com/jexcelapi/index.htmljxl似乎不支持2007,2010jxl读取excel2010报错jxl.read.biff.BiffException:UnabletorecognizeOLEstreamatjxl.read.biff.CompoundFile.(CompoundFile.java:116)atjxl.read.b
  • 小米note 9 4GV12.0.50 深度精简系统内置APP IT佳佳 安卓
    echo====================打印服务==================adbshellpmuninstall--user0com.android.printspoolerecho====================HTML查看==================adbshellpmuninstall--user0com.android.htmlviewerecho====
  • how to resolve install mysql always notice‘You must reset your password using ALTER USER statement before executing this statement.’ WXL_JIANSHU
    现象：#[YoumustresetyourpasswordusingALTERUSERstatementbeforeexecutingthisstatement.](http://www.cnblogs.com/debmzhang/p/5013540.html)修复：安装完mysql之后，登陆以后，不管运行任何命令，总是提示这个step1:SETPASSWORD=PASSWORD('yournew
  • unity打包android工程文件,Unity2018使用Gradle打包Android Zz 911
    https://docs.unity3d.com/2018.4/Documentation/Manual/android-gradle-overview.html所用版本unity2018.4.19打包流程：使用unity的gradle导出工程，在导出的工程中添加androidstudio生成的库工程以及做其他的设置，使用gradle打包最终的apk。下面是在这个过程中遇到的一些问题进行记录。1.
  • python项目实战之基于深度学习的电影评论情感分析系统 什么任性 python深度学习开发语言djangoflaskhtml5javascript
    一、引言在信息爆炸的时代，用户生成的内容（UGC）如社交媒体、博客和论坛上的评论等，已经成为产品或服务口碑的重要来源。情感分析是一种自然语言处理（NLP）技术，用于识别和提取文本中的情感信息，从而理解大众对特定话题的态度。基于深度学习的电影评论情感分析系统能够自动分类评论的情感倾向，如正面、负面或中性，为电影制片人、营销人员和观众提供有价值的见解。二、技术栈和框架前端HTML/CSS:用于构建静态
  • django views视图 18790970257 jsonxhtmlpython
    视图函数简称视图，本质上是一个简单的python函数，它接受web请求并且返回web响应；响应的内容可以是HTML网页、重定向、404错误、XML文档或图像等任何东西，但是，无论视图本身是个什么处理逻辑，最好都返回某种响应视图函数的代码写在哪都无所谓，只要它在你的python目录下面，但是通常我们约定将视图放置在项目或应用程序目录中的名为views.py的文件中。1、一个简单的视图下面是一个返回当
  • ASP.NET Core 入门教学十六 防止常见的Web攻击 充值内卷 asp.net前端后端
    在ASP.NETCore中，防止常见的Web攻击是非常重要的，以确保应用程序的安全性。以下是一些常见的Web攻击类型及其防范措施：1.跨站脚本攻击（XSS）跨站脚本攻击（XSS）是一种通过在网页中注入恶意脚本来攻击用户的浏览器的技术。为了防止XSS攻击，可以采取以下措施：输入验证：对用户输入进行严格的验证和清理。输出编码：在将用户输入的数据插入到HTML页面中时，进行适当的编码。ASP.NETCo
  • base64在html页面显示图片的方式 hanpenghu
  • WebAPI DOM文档对象模型 znhyXYG javascript前端开发语言
    DOM（文档对象模型）是一个可以改变网页内容、结构、样式的处理可扩展标记语言的接口一、获取元素方法：1、根据ID获取2、根据标签名获取3、根据类名获取（html5新增）4、querySelector获取（html5新增）5、querySelectorAll获取（html5新增）6、获取特殊元素（body、html）ID获取方法：document.getElementById(); 2019-9-9
  • chapter01 Java语言概述 知识点Note 月下绯烟 Javajava开发语言
    JavaSEJavaEEJavaME大数据Java基础常用技术栈mysqlJDBCSSMspring+springmvc+mybatisLinuxnacosHadoopFlinkJAVAEE消息队列rabbitMQdocker数据库redisspringbootspringcloudsshstruts+spring+hibernate过时技术栈很少用JAVA虚拟机jvm分布式微服务高并发常见dos
  • JavaScript - Api学习 Day1（WebApi、操作DOM对象） 你会魔法吗✧(≖ ◡ ≖✿) HTML+CSS+JSjavascript学习开发语言
    应用编程接口(API)是编程语言中提供的结构，允许开发者更轻松地创建复杂的功能。、webapi是一套操作网页内容(DOM)与浏览器窗口(BOM)的对象Js由ECMAScript、DOM、BOM三个部分组成。文章目录零、前言0.1变量声明壹、WebAPI的认识1.1作用1.2什么是DOM1.3什么是DOM对象主要概念：示例代码：二、获取DOM对象2.1根据CSS选择器获取DOM元素2.1.1`que
  • 人脸识别技术框架 weixin_30314813 人工智能
    1、人脸检测（确定人脸的位置）。2、人脸关键点（确定眼睛，嘴角等特征位置）。3、人脸几何校正（把人脸通过缩放、旋转、拉伸等图像变化到一个比较标准的大小位置）。4、人脸光学校正（滤波，去除一些对光照敏感的面部特征）。5、人脸特征提取（包括LBP,HOG,Gabor等）。6、人脸识别转载于:https://www.cnblogs.com/lanye/p/3620621.html
  • Web+Tomcat+Servlet+MySQL实现登录页面【JavaWeb笔记一】 YuBooy JavaWeb学习笔记javajdbcjavaweb
    目录功能描述：实现框图：具体实现过程一、环境搭建服务器环境搭建：页面部分环境搭建：数据库部分环境搭建：二、代码实现过程1、创建一个带表单提交的html页面（login.html）2、在web.xml文件下绑定Servlet的对象类3、创建java（LoginServer.java）类来执行Servlet操作4、jdbc完成数据库部分操作（Demo.java）5、通过测试@Test完成数据库的连接测
  • Solidity 盲拍案例 黄靠谱
    参考https://solidity.readthedocs.io/en/latest/solidity-by-example.htmlhttps://ethfans.org/wikis/Solidity-%E6%96%87%E6%A1%A3--%E7%AC%AC%E4%B8%89%E7%AB%A0秘密竞拍每个竞价者提供一份或者几份大于自己投标价的保证金，然后发送多个竞标价（其中有1个是有效的，其
  • python web自动化 gaoguide2015 自动化脚本webhtml
    1.python爬虫之模拟登陆csdn(登录、cookie)http://blog.csdn.net/yanggd1987/article/details/52127436?locationNum=32、xml解析：Python网页解析：BeautifulSoup与lxml.html方式对比（xpath）lxml库速度快，功能强大，推荐。http://blog.sina.com.cn/s/blog
  • Spark 3.5.1 升级 Java 17 异常 cannot access class sun.nio.ch.DirectBuffer 敏叔V587 sparkjavanio
    异常说明使用Spark3.5.1升级到Java17的时候会有一个异常，异常如下SLF4J:Failedtoloadclass"org.slf4j.impl.StaticLoggerBinder".SLF4J:Defaultingtono-operation(NOP)loggerimplementationSLF4J:Seehttp://www.slf4j.org/codes.html#Static
  • 2020-12-05 幸福大黑鸭
    IT1.LeetCode：存在重复元素Java编写2020-12-05（217.存在重复元素）2.《Java从入门到精通》明日科技：P331~335阅读记xmind笔记，并自己实现实例。知识点之前确实都学过，但还是再系统复习一下吧。3.《Semantic-awareWorkflowConstructionandAnalysisforDistributedDataAnalyticsSystems》：
  • 使用fabric.js简简单单实现一个画板 小草先森tyro 前端
    什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型，以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别，假设我们想在一个画布上画一个红色的矩形：//原生canvasapi//有一个id是c的canvas元素varcanvasEl
  • 多线程编程之join()方法 周凡杨 javaJOIN多线程编程线程
    现实生活中，有些工作是需要团队中成员依次完成的，这就涉及到了一个顺序问题。现在有T1、T2、T3三个工人，如何保证T2在T1执行完后执行，T3在T2执行完后执行？问题分析：首先问题中有三个实体，T1、T2、T3， 因为是多线程编程，所以都要设计成线程类。关键是怎么保证线程能依次执行完呢？   Java实现过程如下： public class T1 implements Runnabl
  • java中switch的使用 bingyingao javaenumbreakcontinue
    java中的switch仅支持case条件仅支持int、enum两种类型。 用enum的时候，不能直接写下列形式。 switch (timeType) { case ProdtransTimeTypeEnum.DAILY: break; default: br
  • hive having count 不能去重 daizj hive去重having count计数
    hive在使用having count()是，不支持去重计数   hive (default)> select imei from t_test_phonenum where ds=20150701 group by imei having count(distinct phone_num)>1 limit 10;  FAILED: SemanticExcep
  • WebSphere对JSP的缓存 周凡杨 WAS JSP 缓存
          对于线网上的工程，更新JSP到WebSphere后，有时会出现修改的jsp没有起作用，特别是改变了某jsp的样式后，在页面中没看到效果，这主要就是由于websphere中缓存的缘故，这就要清除WebSphere中jsp缓存。要清除WebSphere中JSP的缓存，就要找到WAS安装后的根目录。        现服务
  • 设计模式总结 朱辉辉33 java设计模式
    1.工厂模式   1.1 工厂方法模式 (由一个工厂类管理构造方法)      1.1.1普通工厂模式(一个工厂类中只有一个方法)      1.1.2多工厂模式(一个工厂类中有多个方法)      1.1.3静态工厂模式(将工厂类中的方法变成静态方法) &n
  • 实例：供应商管理报表需求调研报告 老A不折腾 finereport报表系统报表软件信息化选型
    引言 随着企业集团的生产规模扩张，为支撑全球供应链管理，对于供应商的管理和采购过程的监控已经不局限于简单的交付以及价格的管理，目前采购及供应商管理各个环节的操作分别在不同的系统下进行，而各个数据源都独立存在，无法提供统一的数据支持；因此，为了实现对于数据分析以提供采购决策，建立报表体系成为必须。 业务目标 1、通过报表为采购决策提供数据分析与支撑 2、对供应商进行综合评估以及管理，合理管理和
  • mysql 林鹤霄
    转载源：http://blog.sina.com.cn/s/blog_4f925fc30100rx5l.html mysql -uroot -p ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)   [root@centos var]# service mysql
  • Linux下多线程堆栈查看工具(pstree、ps、pstack) aigo linux
    原文：http://blog.csdn.net/yfkiss/article/details/6729364   1. pstree pstree以树结构显示进程$ pstree -p work | grep adsshd(22669)---bash(22670)---ad_preprocess(4551)-+-{ad_preprocess}(4552)  &n
  • html input与textarea 值改变事件 alxw4616 JavaScript
    // 文本输入框(input) 文本域(textarea)值改变事件 // onpropertychange(IE) oninput(w3c) $('input,textarea').on('propertychange input', function(event) {      console.log($(this).val()) });  
  • String类的基本用法 百合不是茶 String
      字符串的用法;     // 根据字节数组创建字符串 byte[] by = { 'a', 'b', 'c', 'd' }; String newByteString = new String(by);         1,length()  获取字符串的长度     &nbs
  • JDK1.5 Semaphore实例 bijian1013 javathreadjava多线程Semaphore
    Semaphore类        一个计数信号量。从概念上讲，信号量维护了一个许可集合。如有必要，在许可可用前会阻塞每一个 acquire()，然后再获取该许可。每个 release() 添加一个许可，从而可能释放一个正在阻塞的获取者。但是，不使用实际的许可对象，Semaphore 只对可用许可的号码进行计数，并采取相应的行动。 S
  • 使用GZip来压缩传输量 bijian1013 javaGZip
            启动GZip压缩要用到一个开源的Filter：PJL Compressing Filter。这个Filter自1.5.0开始该工程开始构建于JDK5.0，因此在JDK1.4环境下只能使用1.4.6。         PJL Compressi
  • 【Java范型三】Java范型详解之范型类型通配符 bit1129 java
        定义如下一个简单的范型类，   package com.tom.lang.generics; public class Generics<T> { private T value; public Generics(T value) { this.value = value; } }
  • 【Hadoop十二】HDFS常用命令 bit1129 hadoop
    1. 修改日志文件查看器   hdfs oev -i edits_0000000000000000081-0000000000000000089 -o edits.xml cat edits.xml   修改日志文件转储为xml格式的edits.xml文件，其中每条RECORD就是一个操作事务日志   2. fsimage查看HDFS中的块信息等 &nb
  • 怎样区别nginx中rewrite时break和last ronin47
    在使用nginx配置rewrite中经常会遇到有的地方用last并不能工作，换成break就可以，其中的原理是对于根目录的理解有所区别，按我的测试结果大致是这样的。 location /    {         proxy_pass http://test; 
  • java-21.中兴面试题 输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等于 m bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; public class CombinationToSum { /* 第21 题 2010 年中兴面试题 编程求解： 输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等
  • eclipse svn 帐号密码修改问题 开窍的石头 eclipseSVNsvn帐号密码修改
    问题描述：      Eclipse的SVN插件Subclipse做得很好，在svn操作方面提供了很强大丰富的功能。但到目前为止，该插件对svn用户的概念极为淡薄，不但不能方便地切换用户，而且一旦用户的帐号、密码保存之后，就无法再变更了。 解决思路：      删除subclipse记录的帐号、密码信息，重新输入
  • [电子商务]传统商务活动与互联网的结合 comsci 电子商务
          某一个传统名牌产品，过去销售的地点就在某些特定的地区和阶层，现在进入互联网之后，用户的数量群突然扩大了无数倍，但是，这种产品潜在的劣势也被放大了无数倍，这种销售利润与经营风险同步放大的效应，在最近几年将会频繁出现。。。。        如何避免销售量和利润率增加的
  • java 解析 properties-使用 Properties-可以指定配置文件路径 cuityang javaproperties
    #mq xdr.mq.url=tcp://192.168.100.15:61618; import java.io.IOException; import java.util.Properties; public class Test { String conf = "log4j.properties"; private static final
  • Java核心问题集锦 darrenzhu java基础核心难点
    注意，这里的参考文章基本来自Effective Java和jdk源码 1)ConcurrentModificationException 当你用for each遍历一个list时，如果你在循环主体代码中修改list中的元素，将会得到这个Exception，解决的办法是： 1)用listIterator, 它支持在遍历的过程中修改元素， 2)不用listIterator, new一个
  • 1分钟学会Markdown语法 dcj3sjt126com markdown
    markdown 简明语法 基本符号 *,-,+ 3个符号效果都一样，这3个符号被称为 Markdown符号 空白行表示另起一个段落 `是表示inline代码，tab是用来标记 代码段，分别对应html的code，pre标签 换行 单一段落( <p>) 用一个空白行 连续两个空格 会变成一个 <br> 连续3个符号，然后是空行
  • Gson使用二（GsonBuilder） eksliang jsongsonGsonBuilder
    转载请出自出处：http://eksliang.iteye.com/blog/2175473 一.概述     GsonBuilder用来定制java跟json之间的转换格式   二.基本使用 实体测试类： 温馨提示：默认情况下@Expose注解是不起作用的,除非你用GsonBuilder创建Gson的时候调用了GsonBuilder.excludeField
  • 报ClassNotFoundException: Didn't find class "...Activity" on path: DexPathList gundumw100 android
    有一个工程，本来运行是正常的，我想把它移植到另一台PC上，结果报： java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.mobovip.bgr/com.mobovip.bgr.MainActivity}: java.lang.ClassNotFoundException: Didn't f
  • JavaWeb之JSP指令 ihuning javaweb
      要点   JSP指令简介  page指令  include指令    JSP指令简介    JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出，而只是告诉引擎如何处理JSP页面中的其余部分。 JSP指令的基本语法格式： <%@ 指令 属性名="
  • mac上编译FFmpeg跑ios 啸笑天 ffmpeg
    1、下载文件：https://github.com/libav/gas-preprocessor， 复制gas-preprocessor.pl到/usr/local/bin/下， 修改文件权限：chmod 777 /usr/local/bin/gas-preprocessor.pl 2、安装yasm-1.2.0 curl http://www.tortall.net/projects/yasm
  • sql mysql oracle中字符串连接 macroli oraclesqlmysqlSQL Server
    有的时候，我们有需要将由不同栏位获得的资料串连在一起。每一种资料库都有提供方法来达到这个目的： MySQL: CONCAT() Oracle: CONCAT(), || SQL Server: + CONCAT() 的语法如下： Mysql 中 CONCAT(字串1, 字串2, 字串3, ...): 将字串1、字串2、字串3，等字串连在一起。 请注意，Oracle的CON
  • Git fatal: unab SSL certificate problem: unable to get local issuer ce rtificate qiaolevip 学习永无止境每天进步一点点git纵观千象
    // 报错如下： $ git pull origin master fatal: unable to access 'https://git.xxx.com/': SSL certificate problem: unable to get local issuer ce rtificate   // 原因： 由于git最新版默认使用ssl安全验证，但是我们是使用的git未设
  • windows命令行设置wifi surfingll windowswifi笔记本wifi
    还没有讨厌无线wifi的无尽广告么，还在耐心等待它慢慢启动么 教你命令行设置 笔记本电脑wifi： 1、开启wifi命令 netsh wlan set hostednetwork mode=allow ssid=surf8 key=bb123456 netsh wlan start hostednetwork pause 其中pause是等待输入，可以去掉 2、
  • Linux（Ubuntu）下安装sysv-rc-conf wmlJava linuxubuntusysv-rc-conf
    安装：sudo apt-get install sysv-rc-conf 使用：sudo sysv-rc-conf 操作界面十分简洁，你可以用鼠标点击，也可以用键盘方向键定位，用空格键选择，用Ctrl+N翻下一页，用Ctrl+P翻上一页，用Q退出。     背景知识 sysv-rc-conf是一个强大的服务管理程序，群众的意见是sysv-rc-conf比chkconf
  • svn切换环境，重发布应用多了javaee标签前缀 zengshaotao javaee
    更换了开发环境，从杭州，改变到了上海。svn的地址肯定要切换的，切换之前需要将原svn自带的.svn文件信息删除，可手动删除，也可通过废弃原来的svn位置提示删除.svn时删除。   然后就是按照最新的svn地址和规范建立相关的目录信息，再将原来的纯代码信息上传到新的环境。然后再重新检出，这样每次修改后就可以看到哪些文件被修改过，这对于增量发布的规范特别有用。   检出
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他