关注
分享
web
June.1
人生在世须尽欢！
展开
-
web基础学习（三）CSS 盒子模型、浮动、定位
盒子模型、浮动、定位是页面用处比较多的算是一个重点。上一节：HTML、CSS—下一节一、盒子模型：border、padding、margin网页的盒子模型尺寸大小受各个版本的浏览器影响,在实际的开发过程中。 在多个内核的浏览器下进行测试。以免项目上存在不兼容的问题。 border 、border-top 、 border-bottom 、border-left 、bord...原创 2019-03-29 14:17:54 · 535 阅读 · 0 评论 -
web基础学习（十六）响应式图片
第一种写法旧标准响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下，image自动加载不同的图片。用法如下：<img src="image-128.png" srcset="image-256.png 2x" />新标准按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕...原创 2019-04-02 16:25:14 · 252 阅读 · 0 评论 -
web基础学习（一）HTML
HTMLHyper Text Markup Language 超文本标记语言HTML发展历史了解所有HTML都遵循W3C标准。即：万维网联盟行业标准的制定者HTML页面主结构本部分知识点实战demo.html<!--html版本声明--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi...原创 2019-03-29 10:02:18 · 389 阅读 · 0 评论 -
web基础学习（十五）CSS3响应式布局
1.视口下面这段代码控制页面是否可以响应布局<meta name="viewport" content="width=device-width,initial-scale=1.0">2. 媒体查询常用的屏幕尺寸从小到大如下所示老智能机: 320px-480px智能手机： ≥ 480px平板电脑： ≥ 768px中等屏幕(桌面显示器)： ≥ 992px...原创 2019-04-02 15:29:05 · 283 阅读 · 0 评论 -
web基础学习（十四）CSS3多列布局
多列（ Multi-column ）是一个CSS3新增布局模块，官方称为Multiple column layout，可以比较轻松的实现多列布局。column-widthcolumn-width：<length> | auto设置列的宽度column-countcolumn-count：<integer>设置列的个数columns...原创 2019-04-02 14:24:23 · 718 阅读 · 0 评论 -
web基础学习（十三）CSS3弹性盒模型布局
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。一、弹性容器(flex container也就是父级元素)父级元素共有6个属性下面详细对这几个属性分析布局讲解flex-direction设置主轴方向，确定弹性子元素排列方式flex-direction：row | row-...原创 2019-04-02 13:56:33 · 407 阅读 · 0 评论 -
web基础学习（十二）CSS3之动画过渡实用案例
1. 云层渐变效果2. 圆环旋转3. 满月星空4. 手风琴5. 动态侧边栏6. 摇摆子菜单导航条源码地址原创 2019-04-02 12:38:31 · 812 阅读 · 0 评论 -
web基础学习（十一）CSS3之3D六面体动画案例
3D动画中两个知识点：perspective、transform-styleperspectiveperspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。注释：perspective 属性只影响 3D 转换元素。transfor...原创 2019-04-02 10:43:25 · 738 阅读 · 0 评论 -
web基础学习（十）CSS3之 @keyframes 、animation
css3新增属性@keyframes（关键帧），可以帮助开发者不必依赖JavaScript，只使用css代码完成动画制作那么如何使用@keyframes呢?这里有两个重要知识点：1.@keyframes 定义关键帧语法：@keyframes 两帧动画名称 { from {top:0px;} to {top:200px;} }@keyframes 多帧动画名称 { 0% { tr...原创 2019-04-02 10:07:10 · 454 阅读 · 0 评论 -
web基础学习（九）CSS3 练习transition、transform的5个小案例展示
1.对角拉开蒙层<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { ...原创 2019-04-02 08:53:06 · 675 阅读 · 1 评论 -
web基础学习（八） CSS3的 transition、transform
1. transform 2D、3D转换transform 属性语法 ：transform: none|transform-functions; 详细查看2. 过渡过渡属性手册timing-function 的属性使用transition: property duration timing-function delay;property 指定CSS属性的name，transi...原创 2019-04-02 09:00:23 · 13555 阅读 · 0 评论 -
web基础学习（七）CSS3的background-origin、background-clip、resize
1. background-clip 指定背景图像的绘画区域background-clip: border-box|padding-box|content-box; 属性前提设置背景border-box ：默认属性,背景包含边框内边距和内容padding-box：背景不包含边框,但包含内边距和内容content-box：背景不包含边框,内边距,只包含内容2. backgro...原创 2019-04-01 14:42:05 · 307 阅读 · 0 评论 -
web基础学习（六）CSS3 文字阴影、文本溢出、服务器字体
1、给文字加阴影语法： text-shadow: h-shadow v-shadow blur color;h-shadow ：必需。水平阴影的位置。允许负值。v-shadow ：必需。垂直阴影的位置。允许负值。blur ： 可选。模糊的距离。color ：可选。阴影的颜色。2、文本溢出处理固定用法：overflow: hidden; 溢出隐藏text-over...原创 2019-04-01 14:02:23 · 12450 阅读 · 0 评论 -
web基础学习（五）CSS3 选择器
选择器参考手册以下是常用选择器实战演示包含注释：关系选择器div > h2 子元素选择器 div 下面的子级h2h3 + p 相邻标签选择器标签不一致,选择h3相邻的一个p标签ul li + li 相邻标签选择器标签一致亲兄弟标签,选择li相邻的所有 li标签div h3 ~ p 同级标签选择器 h3相邻所有p标签属性选择器a[target] a标签含有targe...原创 2019-04-01 12:46:25 · 400 阅读 · 0 评论 -
web基础学习（四）HTML5的主结构元素、表单
一、 主结构元素HTML5主结构更改<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>learnvue</title> </head> <body> <div>...原创 2019-03-29 16:20:00 · 449 阅读 · 0 评论 -
web基础学习（二）HTML、CSS
HTML查看上一节内容菜鸟课程 Form 表单本部分Form知识点实战demo.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=...原创 2019-03-29 12:44:27 · 273 阅读 · 0 评论