![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS
We_jia
这个作者很懒,什么都没留下…
展开
-
HTML基础---标签
可以通过简单的HTML和CSS就可以做出自己想要网页,可以在敲出代码以后立马就可以去试效果,这种感觉很棒,也很有成就感。在之前学习的ps中也深深的体会到了这一点,所以要更系统的学习前端,作为以后求职的方向。希望自己能够学有所成,加油鸭!前端前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,将美工或UI提供的效果图通过HTML+CSS+...原创 2018-11-14 22:28:20 · 305 阅读 · 0 评论 -
CSS3---2D和3D转换
2D和3D的介绍在CSS3中可以为任意元素添加2D的变形,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换是使元素改变形状、尺寸和位置的一种效果。3D转换是基于二维变换的相同属性,如果熟悉二维变换,会发现3D变形的功能和2D变换的功能类似。CSS3中的3D变换主要包括以下几种,如: 3D位移、 3D旋转、3D缩放、3D矩阵。三维坐标系要想实现2D和3D的转换,首先我们要对三维坐标系...原创 2018-12-10 12:26:34 · 567 阅读 · 2 评论 -
CSS3---媒体查询与手机自适应
媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由 媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备。响应式设计需要使用媒体查询,如果没有CSS3的媒体查询模块,就...原创 2018-12-22 21:56:39 · 1502 阅读 · 0 评论 -
媒体查询与手机自适应的网站案例
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式, 可以直接在link中判断设备的尺寸,然后引用不同的css文件(具体可以参考我之前写过的关于媒体查询的博客)在做案例之前,我们要考虑好做几套样式,是否要满足pc端和移动端的设备要求,因为不同的设备需要不同的样式,所以我在做这个旅游网站的时候,准备了三种样式,来满足不同的需求。 ...原创 2019-01-11 13:26:47 · 791 阅读 · 9 评论 -
Canvas画图之烟花爆炸demo
效果展示canvas画图简单的烟花爆炸效果图如下:思路分析1.创建canvas元素2.创建小圆圈对象,因为圆圈都是一组属性相同的数据,所以将实例化的圆圈对象都存储在数组中,方便后边圆圈消失使用splice方法删除数组元素。注意:设置小圆圈的属性时,小球的颜色,大小(半径),数量都是不同的,要单独设置随机方法产生, //创建小圆圈随机颜色方法 this....原创 2019-02-23 17:12:44 · 1069 阅读 · 0 评论 -
HTML5之Canvas画图
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能一、创建canvas元素不管绘制直线还是图线等,都需要先创建canva元素//获取canvas元素var canvans=document.getElem...原创 2019-02-23 11:28:21 · 374 阅读 · 1 评论 -
HTML5之video播放器
效果展示video播放器案例效果图如下:说明:本案例并没有写浏览器兼容性,采用的是本地视频,使用火狐浏览器才能正常使用。谷歌浏览器必须用远程视频才行。思路分析1.首先添加 playing事件,在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发,使用duration 属性返回当前视频的长度,赋给进度条的最大值。2.添加timeupdate 事件,在音...原创 2019-02-23 17:17:25 · 1006 阅读 · 0 评论 -
CSS3---过渡和动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。过渡动画CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。当鼠标悬停到指定的 CSS 属性时,元素的样式改变,当指针移出元素时,它会逐渐变回原来的样式。一、过渡的属性属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性。 tr...原创 2018-12-13 23:02:37 · 316 阅读 · 0 评论 -
CSS基础---选择器
选择器基本写法选择器:{ 属性:值; 属性:值}标签选择器写法:标签{属性:值;}div{ width: 100px; height: 300px; border: 1px solid black; }特点:标签选择器定义以后,会将页面所有的元素都执行这个标签样式。class选择器...原创 2018-12-06 23:05:08 · 215 阅读 · 0 评论 -
CSS基础---CSS样式
CSS概述Cascading Style Sheets 叠层样式表 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有...原创 2018-11-15 18:26:18 · 256 阅读 · 1 评论 -
HTML+CSS 仿写京东网站界面
在学习了HTML和CSS以后,用俩天的时间仿写京东网站的部分界面,基本将之前学习的内容都应用到了,收货颇多,也对网站的布局有了更深的认识。总结整体的布局在开始写网站之前,要考虑整体的布局,事先将每一块的内容框架搭建好,后期就可以将每一块的内容填充好,包括css的样式。这样思路就比较清晰,不至于后面越做越乱。公共样式针对一样的内容,可以设置相同的样式,在需要的时候可以直接引入,不需要...原创 2018-11-21 20:10:22 · 9396 阅读 · 5 评论 -
HTML+CSS 仿写淘宝商城分类导航
效果图学会淘宝商城的分类导航以后,会发现大多数的电商网站都是这样的效果,在做其他网站时具体分析即可。首先我们要构思整个大框架的结构:左边是全部商品分类,在这个分类中主要是用了导航列表(ul li), 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位,把这个div分成左边小分类列表,右边图片广告) 这个分类导航其实比较简单,在我看来要重点理解相对定位,绝对定位,盒...原创 2018-11-21 21:47:45 · 4910 阅读 · 2 评论 -
CSS基础---文本类型
CSS文本样式css文本样式包含以下内容属性 名称 值 font-family 字体 中文字体需要嵌套在引号中,多字体使用英文逗号 font-size 字号 number,单位为px font-weight 字体粗细 normal-不加粗,bold-加粗,100-900(100-500属于细字体,600-900属于粗字体...原创 2018-11-22 21:12:52 · 294 阅读 · 0 评论 -
CSS基础---背景样式
背景颜色和属性background-color:背景颜色,可以针对布局标签以及整个body进行颜色控制,改变背景颜色,而css中的color则是控制文字的颜色。 background-image:背景图片,参数为url(),在括号中指定image所在的路径,在图片大小比区块大小小时,image会自动填充注意:background-image与img的区别:background-imag...原创 2018-11-23 09:46:06 · 296 阅读 · 0 评论 -
CSS3---边框
一、css简介CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。总的来说CSS3主要拥有以下几个新的亮点:高级选择器,圆角,多背景,自定义字体,动画与过渡,渐变色,box阴影,rgba颜色表示,文字阴影,图形化边界等。二、CSS...原创 2018-12-09 22:48:28 · 446 阅读 · 0 评论 -
CSS3---子元素选择器
子元素选择器的作用在之前的选择器中当我们遇到一个元素下有多个子元素时(针对list列表元素),我们在进行css控制时都是在每个子元素定义class,通过class来控制对应的子元素,这样做会很麻烦,子元素选择器也可以不用定义class也能控制子元素的作用。一、常见的子元素选择器:first-child 父元素的首个子元素:last-chil...原创 2018-12-09 21:04:37 · 9001 阅读 · 2 评论 -
CSS基础---盒子模型
盒子模型一、定义元素的宽高width和height指内容区域的宽度和高度元素实际宽度=左右外边距+左右边框+左右内边框+width;元素实际高度=上下外边距+上下边框+上下内边距+height;定义元素的宽和高需要使用下面属性:1、width宽度、height高度:固定的宽度和高度,当内容超出宽度和高度之后,不会自动填充扩展2、min-width最小宽度、min-h...原创 2018-12-06 22:45:16 · 269 阅读 · 0 评论 -
圣杯布局和双飞翼布局
三栏布局(包括圣杯布局和双飞翼布局)参考:https://blog.csdn.net/reslicma/article/details/86942182#_143圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...原创 2019-09-15 10:49:49 · 267 阅读 · 0 评论