css框架

浏览器兼容性问题

北慕城南 提交于 2019-12-02 14:52:31
CSS兼容技巧 1: FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会. 可用important解决   2: 居中问题.    1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.)    2).水平居中. margin: 0 auto;(当然不是万能)   3: 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)   4: FF 和 IE 对 BOX 理解的差异导致相差 2px,还有设为 float的div在ie下 margin加倍等问题.   5: ul 标签在 FF 下面默认有list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)   6: 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.   7: 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 8: 针对firefox ie6 ie7的css样式 1:现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,   2:但是ie7对

Webpack 4.X 从入门到精通 - 第三方库(六)

耗尽温柔 提交于 2019-12-02 14:12:45
在开发的时候会时常用到第三方的库或者框架,比如耳熟能详的 jquery 。借助它们能提高开发效率,但是如何在 webpack 中使用呢。这篇文章介绍两个东西,如何使用第三方库以及如何提取第三方库。 使用第三方库 1、在入口文件当中直接导入 安装jQuery npm i jquery -S 目录结构如图: package.json 内容如下: { "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^1.0.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.4.1", "url-loader": "^1.0.1", "webpack": "^4.16.3"

Cesium官方教程13--Cesium和Webpack

回眸只為那壹抹淺笑 提交于 2019-12-02 13:58:29
原文地址: https://cesiumjs.org/tutorials/cesium-and-webpack/ Cesium 和 Webpack Webpack是非常强大非常流行的JavaScript 模块打包工具。它可以让开发人员以一种简单直观的 require 方式去加载各种页面需要的文件,极大的方便了开源人员对代码和资源文件进行结构化设计。当编译的时候,它会跟踪代码依赖性,把所有的模型打包到浏览器可以直接加载的一个或者多个bundles中。 在这个教程的前一半,我们创建一个简单的web项目,学会使用webpack,然后再去集成 Cesium npm模块。这是基于Cesium开发正式web项目的很好开端,但是它不是学习Cesium的最简单示例,可以看一下我们的新手入门。 在教程的后半部分,我们将讨论更多高级的webpack 配置参数,去优化使用Cesium的项目。 这个优化Cesium和Webpack集成的项目示例,可以查看官网webpack示例 代码库。 先决条件 对命令行,JavaScript语言和web开发需要有一个基本了解。 一个代码编辑器(IDE)。Cesium团队的开发人员都用 Webstorm, 但是 Sublime Text 等工具也可以。 安装了Node.js 。LTS版本最好,但是只要是v6以上都可以的。 创建一个基本的 webpack 程序 第一部分

web前端开发框架——Vue的知识总结(2)

烈酒焚心 提交于 2019-12-02 10:50:41
一、简介 Vue.js的定位是一个渐进式框架 前端三大mvvm框架之一,Vue上手比较快,只要你会HTML、css、js等一些基础就能轻松做开发。 vue官方文档 二、导入Vue.js库 <script src= "vue.js" ></script> 三、核心技术 1.cli方式写组件 组件的构成 template模板 script业务逻辑 style样式 组件的使用 1.创建组件.vue 2.导入并注册组件 3.使用组件 2.路由与视图 1)页面.vue 2)配置router.js path:"/cart" 路由对应的地址 name:"cart" 路由的名称 compon:Cart 路由地址对应的组件 3)路由指令 router-link 路由链接(切换) to="路由地址" 切换的地址 router-view 路由视图显示url对应的组件 4)路由的参数 1.router.js path:"/product/:id" 2.组件内部获取到参数 {{$route.params.id}} 5)路由编程跳转 router.js的配置 path:"product/:id" 组件内部获取到参数 {{$route.params.id}} 6)子路由 目标 article comment评论 detail参数 {path:"article", component:"Article",

响应式 Web 设计技巧

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-02 09:05:07
什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的挑战,我们无法估计用户的终端设备和网络状况,更不可能为每种设备都专门设计一套网站,如何实现 Web UI 在多终端中的适配呢?2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design",响应式网页设计提供了一种设计方法,可以使同一网站在智能手机、桌面电脑,以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸,合理地为现有及将来的各种设备提最佳的浏览体验。 http://mediaqueri.es/ 这是一个响应式设计创意收集网站,可以在上面查看到很多响应式设计实例,较多的网站都应用了 Mobile First 设计思想,先针对小视口设备进行设计,然后逐步对大视口设计进行渐进增强支持。 图 1. Froont 响应式设计网站截屏 这也意味着设计思维的转换,不应再执着于布局、线框等的具体大小,而应该考虑如何使用流体元素。与其根据不同设备的大小来设计页面,更着重考虑如何针对内容进行设计。抛弃像素,抛弃固定宽度,先从小屏幕进行设计,然后逐步增强针对大屏幕的设计 当然也需要引导客户

前端攻城狮学习笔记六:常见前端面试题之HTML/CSS部分(一)

廉价感情. 提交于 2019-12-02 08:57:17
Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义?   Doctype是document type(文档类型)的简写,是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择,分别是:   1、过渡的(Transitional,也叫混杂模式):要求比较宽松,允许继续使用HTML4.01的标识,完整声明为 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd" >   2、严格的(Strict):要求严格的DTD,不能使用任何表现层的标识和属性,完整声明为 <! DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >   3、框架的(Frameset):专门针对框架页面设计使用的DTD,如果页面中包含有框架,可以采用DTD,完整声明为 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3

VUE面试题笔试题常见考点

痴心易碎 提交于 2019-12-02 08:16:10
最近跳槽换工作,面试了一些公司,总结下常见的考点 vue生命周期 vue双向数据绑定原理 vuex模块功能 vue nextTick vue data为什么是函数 vue 路由 vue和其他框架对比 vue组件传值 vue keep-alive get post请求 css盒模型和IE盒模型 性能优化 安全性优化 缓存方法 项目中有没有遇到棘手的问题 css 居中方式 响应式布局 ES6 var let const css块级元素,行内元素,空元素 css选择器 来源: https://blog.csdn.net/weixin_41127584/article/details/102736846

前端基础习题一

[亡魂溺海] 提交于 2019-12-02 06:49:21
面试问题答案综合版 在线预览 http://blog.poetries.top/FE-Interview-Questions 第一部分:基础篇 第二部分:进阶篇 第三部分:高级篇 第四部分:通识篇 第五部分:精华篇 第六部分:精简篇 第七部分:综合篇 第一部分:基础篇 一、HTML、HTTP、web 综合问题 1 前端需要注意哪些 SEO 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减小, title 值强调重点即可,重要关键词出现不要超过 2 次,而且要靠前,不同页面 title 要有所不同; description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同; keywords 列举出重要关键词即可 语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页 重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取 重要内容不要用 js 输出:爬虫不会执行 js 获取内容 少用 iframe :搜索引擎不会抓取 iframe 中的内容 非装饰性图片必须加 alt 提高网站速度:网站速度是搜索引擎排序的一个重要指标 2 <img> 的 title 和 alt 有什么区别

web前端开发初级

…衆ロ難τιáo~ 提交于 2019-12-02 04:33:11
Web 页面制作基础 Web 的相关概念 WWW Website URL Web Standard Web Browser Web Server HTML 基础 标记语言 从 HTML 到 XHTML HTML 的基本结构 HTML 的相关基本定义 HTML 常用开发工具 HTML 的通用属性 HTML 的全局标准属性 HTML 的全局事件属性 HTML 主体元素 HTML 无语义元素 HTML 标题元素 HTML 段落元素 HTML 注释元素 HTML 格式化元素 HTML 图片元素 HTML 超链接元素 HTML 列表元素 HTML 表格元素 HTML 表单元素 HTML 框架元素 HTML 的预留字符 CSS 基础 什么是 CSS CSS 的历史 CSS 样式的基本使用 CSS 的两个特性 CSS 的基本语法 CSS 的选择器 元素选择器 通配符选择器 属性选择器 派生选择器/上下文选择器 id 选择器 类选择器 伪类选择器 伪元素选择器 CSS 的属性 CSS 背景属性 CSS 字体属性 CSS 文本属性 CSS 尺寸属性 CSS 列表属性 CSS 表格属性 CSS 内容元素 CSS 盒模型 CSS 内边距属性 CSS 值复制 CSS 外边距属性 CSS 边框属性 CSS 轮廓属性 布局属性 CSS 浮动属性 CSS 定位属性 JavaScript 程序设计

web自动化之前端知识

心已入冬 提交于 2019-12-02 03:05:10
下面这种写法只作用于这1个标签: 下面这种也是比较老的写法: 下面是常用的方式:把一个css样式放入到一个文件中,然后引用: 第三方引用的css一般是压缩过的,这样静态资源加载速度会比较快。 如果css中的值不固定,或者有空格,那么就不能通过css来定位元素。 引用的js也是压缩的。 一个非常底层的框架: 渲染效果非常快: 中国人开发的: 来源: https://www.cnblogs.com/lp475177107/p/11727863.html