Css
vue 单独页面body css 样式设置
给某个page下template中的第一个div设置如下样式：.body-bg{position:absolute;width:100%;height:100%;top:0;left:0;overflow-y:auto;background-color:#000;} 示例：<template>&l...
(8/24) 图片跳坑大战--css中的图片处理
前言：此节的开展是在上一节的基础上进行的，（每一节都是从无到有编写关于此节的知识），最后会附上相关完整代码。上一节 在src目录下新建一个images文件夹，把需要的图片放入images文件夹。图片下载在index.html文件中增加一个放置div的标签（需要注意的是这里修改的是src下的index.html...
(5/24) 模块化：实现快速CSS文件打包
写在前面：为了兼容，此处的webpack版本为3.6.0、webpack-dev-server版本为2.9.7、css-loader版本为2.0.0、style-loader版本为0.23.1，若在下列安装后运行出错，一般是版本问题，可以安装此处的指定版本来解决。webpack把多个文件打包到一个js里，可以减少htt...
(12/24) css进阶：sass文件的打包和分离
这里需要在项目目录下用npm安装两个包。node-sass和sass-loader，（也可以使用cnpm安装）因为sass-loader依赖于node-sass，所以需要先安装node-sassnpminstall--save-devnode-sassnpminstall--save-devsass-loader注意：...
(11/24) css进阶：Less文件的打包和分离
写在前面：在前面我们对css打包和分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。Less可以运行在Node或浏览器端。Less知识学习<divid="less_part">le...
(9/24) 图片跳坑大战--css分离与图片路径处理
在上一节当中，我们把小图片打包成Base64格式（打包到了js当中）。我们也算是对webpack对图片的打包有个基本了解。本节我们准备把css从JavasScript代码中分离出来,这会遇到两个问题，一是如何分离，二是分离之后的图片路径问题，下面我们逐一破解。有些简单的交互页面中，你的JavasScript页面代码会非...
纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单。3d响应式菜单，希望对大家有所帮助。在线赞赏效果。在线编辑代码，或者下载收藏。html文件例如以下<ulclass="menu"><li><atitle=...
CSS3设置内容超过一定长度后自动折行
在用编辑器保存的数据到数据库的时候经常是在我们的内容前后加一个P标签，但是出来之后是一行，有时候会超过边框的宽度，所以研究了如何折行,如下代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>...
CSS3动画(重要)
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。实例:@keyframesmyfirst{...
CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript. CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。应用于宽度属性的过渡效果，时长为2秒：div{transition...
CSS3 3D 转换
CSS3允许您使用3D转换来对元素进行格式化。在本章中，您将学到其中的一些3D转换方法：rotateX()rotateY()rotateX()方法，围绕其在一个给定度数X轴旋转的元素div{width:100px;height:75px;background-color:red;border:1pxsolidblack...
CSS3 2D 转换
CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。 在本章您将了解2D变换方法：translate()rotate()scale()skew()matrix()<!DOCTYPEhtml><html><head><metacharset="ut...
CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性：text-shadowbox-shadowtext-overflowword-wrapword-break CSS3中，text-shadow属性适用于文本阴影。您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：<style>h1...
CSS3 渐变（Gradients）
参考:http://www.runoob.com/css3/css3-gradients.html CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变（gradients），你可以减少下载的事件和宽带的使用。此外，...
CSS3边框与背景
参考:http://www.runoob.com/css3/css3-tutorial.html CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。一些最重要CSS3模块如下：选择器盒模型背景和边框文字特效2D/3D转换动画多列布局用户界面 1.CSS3边框: 用CSS3，你可以...
