https://www.bilibili.com/video/BV14J4114768?p=390 代码：https://gitee.com/xiaoqiang001/html_css_material 文章目录 浏览器现状手机屏幕现状常见移动端屏幕尺寸移动端调试方法视口 viewport（布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport）meta 视口标签二倍图/多倍图（物理像素&物理像素比）背景缩放 background-size （cover覆盖、contain铺满【宽度或高度】）背景图片二倍图（原理跟上面二...
下拉及弹出式菜单是网站设计中常用导航形式，这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容，并能对内容进行合理的分类显示，是一种非常优秀的导航形式。 早期的下拉或弹出式菜单通过隐藏的layer或div来实现内容的隐藏，通过JavaScript脚本来响应用户的操作，目前也采用JavaScript+div或其它元素的形式来制作此类导航，不同的是整个导航都将使用符合标准的css布局来打造，不再使用表格来制作菜单，下拉式菜单是上面...
body 的背景图设置第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放background: url(imgs/1.jpg)no-repeat;background-position:center 0; 背景图的定位原点,由于body高不确定background-attachment:fixed; 背景图片保持固定,不会随页面滚动而滚动第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变首先给html 设置 height:100%;给body设置background: url(imgs/1.jpg) no-repeat;background-size: 100% 100%...
本篇文章主要介绍了CSS3中字体平滑处理和抗锯齿渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用css3字体平滑显示呢要知道，W3C对CSS中字体的抗锯齿渲染是有过考虑的，如font-smooth，不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异，总之，他并没有被选入Web标准。但是WebKit还是保留...
在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中实现这样的布局方式是简单可行的，只需在设置左栏的宽度即可，如上例中左右栏都采用了百分比实现了宽度自适应，而我们只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动，代码如下： 代码如下:#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20...
自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度和高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上div默认状态的占据整行的空间，便是宽度为100%的自适应布局的表现形式，一列自适应布局需要我们做的工作也非常简单，只需要将宽度由固定值改为百分比值的形式即可。 代码如下:#layout { border: 2px solid #A9C9E2;...
学完javascript，HTML，CSS，入门PHP&MySQL，看什么书？推荐一些入门的好书，中英文皆可，谢谢。------解决思路----------------------PHP+mysql开发实战------解决思路----------------------去实习------解决思路----------------------《PHP、MySQL和Apache编程导学》机械工业出版社------解决思路----------------------實踐比什麼都來的都強．．------解决思路----------------------可以去上班了
我是做PHP的，为什么我现在看这本书暂时毫无压力，为什么看《javascript》权威指南感觉很吃力呢？个人感觉基于对象的javascript 比纯面对对象的java难度要大得多啊回复内容：我是做PHP的，为什么我现在看这本书暂时毫无压力，为什么看《javascript》权威指南感觉很吃力呢？个人感觉基于对象的javascript 比纯面对对象的java难度要大得多啊JS与前两者差别较大的估计是： 面向对象、模块化、作用域，特别是面向对象，用了特别奇特的构...
在网站上，CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识，并提供一个在线demo。 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 box 的 div 元数，当鼠标 移动到 d...
?最近在项目中使用了一下webpack，所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack1.webpack一下自己就了，这绝对是一个重要的原因。2.然后我之前项目中都是通过requireJS，通过AMD来做到模块化开发。webpak不仅支持打包，而且支持AMD 和 CommonJS方式来做模块化开发，所以打算尝试一下webpack来实现模块化。 3.我的需求简单，适合新上手webpack，只需要生成上线目录，实现模块化，压缩代码等等 webpack实战 we...
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。 官网地址 http://lesscss.org/ less手册 www.lesscss.net/ bootstrap官网less介绍 http://less.bootcss.com/ 一、浏览器端环境搭建 github下载地址：https://github.com/less/less.js 1、js引入 搭建...
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。 一、前言 说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了A...
一、理解web标准含义--为什么采用web标准 *****将内容与样式分离 1、web标准是一系列标准，就是一系列技术标准在使用时，是组合应用【1】、结构化内容 xhtml【2】、表现化内容 css【3】、行为化内容 JavaScript 2、网页开发的小工具--火狐浏览器中的firebug工具--附加组件--搜索firebug作为web前端工作，要兼容的浏览器ie，火狐浏览器，谷歌刘浏览器，苹果浏览器等。网页是否有css样式，测试--在浏览器改变文字大小。 3、css定义技...
一.概述层叠样式表;可以对HTML的元素,进行控制,使HTML的元素展现的效果和位置更好;二.基本语法css规则由两个部分构成:选择器和语句语句规则:1.css选择器的名称区分大小写;属性名和属性值区分大小写;2.每条语句的结尾都要使用;,最后一行可以省略;3.注释格式:/**/4.css在html中写的代码需要使用style标签包裹起来;5.如果单独写一个css文件,则不需要使用style标签,所有的语句需要使用大括号包裹起来;6.如果属性值中包含空格,必须使用双...
在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节，直接进入下一节CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。1.基本语法规范 分析一个典型CSS的语句：p {COLOR:#FF0000;BACKGROUND:#FFFFFF}其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；样式声明写在一对大括号"{}"中；COLOR...