从零玩转Html5前端开发
小韩同学哇
创达网络工作室创始人
展开
-
纯HTML+CSS实战之图片水印方案一
效果如图所示:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片水印方案一</title> <style> *{原创 2019-01-22 14:19:38 · 4241 阅读 · 1 评论 -
HTML5前端开发入门之CSS 2D转换模块实战
效果图: 代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D转换模块案例实战</title> <style> *{原创 2019-01-08 15:25:42 · 157 阅读 · 0 评论 -
HTML5前端开发入门之CSS 2D转换模块
2D转换模块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>55-2D转换模块</title> <style> *{原创 2019-01-08 15:24:01 · 142 阅读 · 0 评论 -
纯HTML+CSS实战之高级字体的实现
本次分享内容较为基础,主要知识点便是css中盒子及文字阴影的应用字体效果如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS高级字体的实现</title>原创 2019-01-13 08:51:34 · 490 阅读 · 0 评论 -
纯HTML+CSS实战之实现带图标的二级导航菜单
效果图如上代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯CSS实现带图标的二级导航菜单</title> <style>原创 2019-01-12 12:37:21 · 5839 阅读 · 0 评论 -
HTML5前端开发入门之CSS过渡模块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>54-过渡模块</title> <style> div{ width:原创 2019-01-02 17:12:40 · 146 阅读 · 0 评论 -
HTML5前端开发入门之使用a标签伪类选择器进行导航条实战
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>53-a标签伪类选择器导航条实战</title> <style> *{原创 2019-01-02 17:11:33 · 794 阅读 · 0 评论 -
HTML5前端开发入门之a标签的伪类选择器
a标签的伪类选择器1.通过我们的观察发现a标签存在一定的状态1.1默认状态,从未被访问过1.2被访问过的状态1.3鼠标长按的状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的 3.格式:a:link{} 修改从未被访问过状态下的样式a:visited{} 修改被访问过的状态下的样式a:hover{} 修改鼠标悬...原创 2019-01-02 17:08:56 · 281 阅读 · 0 评论 -
HTML5前端开发入门之定位流子绝父相团购页面实战
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>49-团购界面</title> <style> *{ margin:原创 2018-12-30 17:42:29 · 579 阅读 · 0 评论 -
HTML5前端开发入门之CSS定位流
定位流1.定位流分类1.1相对定位1.2绝对定位1.3固定定位1.4静态定位(默认情况下元素就是静态定位)相对定位2.什么是相对定位?相对于自己在原来标准流中的位置进行移动 格式:position: relative;top: 20px;left: 20px; 3.相对定位注意点3.1相对定位是不脱离标准流的,会继续在标准流中占有一部...原创 2018-12-30 17:40:54 · 139 阅读 · 0 评论 -
HTML5前端开发入门之网易注册界面实战
代码如下:图片可通过谷歌浏览器在网易邮箱官网直接下载<!DOCTYPE html><html lang="en" xmlns:http="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>网易邮箱注册原创 2018-12-30 17:33:28 · 1081 阅读 · 0 评论 -
HTML5前端开发入门之CSS浮动流
浮动流浮动流脱标1.什么是浮动元素的脱标? 脱标:脱离标准流 当某一个元素脱标以后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标 2.浮动元素脱标之后会有什么影响? 如果前面一个元素浮动了,而后面一个元素没有浮动, 那么这个时候前面的一个元素就会盖住后面的一个元素浮动元素排序规则1.浮动元素排序规则1.1相同方向上的浮动元素,先浮...原创 2018-12-30 17:24:15 · 187 阅读 · 0 评论 -
HTML5前端开发入门之CSS浮动实战
如下图所示的浮动练习实战代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>42-浮动练习</title> <style> bo原创 2018-12-30 17:24:35 · 193 阅读 · 0 评论 -
纯HTML+CSS实战之百度搜索框实例
效果图如图所示: 代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作搜索框</title> <style>原创 2019-01-14 09:27:46 · 9524 阅读 · 5 评论 -
纯HTML+CSS实战之图片水印方案二----主图做背景
效果如图所示 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片水印方案二-主图做背景</title> <style>原创 2019-01-24 12:24:28 · 3386 阅读 · 0 评论 -
纯HTML+CSS实战之仿微信聊天界面制作
效果图如下: 主要运用了之前实战项目中的三角形制作和before及after伪类选择器知识(其中头像图片采用30px*30px图片)代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作仿微原创 2019-01-16 09:49:22 · 22850 阅读 · 19 评论 -
纯HTML+CSS实战之制作相框效果
效果如图所示主要运用了盒子阴影,图片阴影,边框属性三个要点代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作相框效果</title> <原创 2019-01-21 13:24:33 · 8037 阅读 · 1 评论 -
纯HTML+CSS实战之仿ios开关按钮
效果图如上:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css仿ios开关按钮</title> <style>原创 2019-01-10 09:50:11 · 1049 阅读 · 0 评论 -
纯HTML+CSS实战之三角形的制作
先制作左图样式,再根据需求制作右图三角形 代码如下: 此处主要使用transparent属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作三角形</title>原创 2019-01-15 09:26:59 · 324 阅读 · 0 评论 -
纯HTML+CSS实战之单/复选框美化
效果图美化可根据自己需求进行修改,此处旨在传播方法代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯CSS单/复选框美化</title> <sty原创 2019-01-09 10:13:41 · 924 阅读 · 0 评论 -
HTML5前端开发入门之CSS书写格式
Css书写格式1.行内样式可以直接将CSS代码写到开始标签中<div style="color:red">我是div></div> 2.内嵌样式可以在一对head标签中写上一对style标签,然后在style标签中编写CSS代码 3.外链样式-----企业开发中一般使用外链样式可以单独新建一个.css的文件,把css代码写在这个文件...原创 2019-01-08 16:06:20 · 323 阅读 · 0 评论 -
HTML5前端开发入门之CSS 背景属性补充
背景属性补充背景尺寸属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>65-背景尺寸属性</title> <style> *{原创 2019-01-08 16:05:50 · 166 阅读 · 0 评论 -
HTML5前端开发入门之3D长方体轮播 实战
效果图如上,一个3D轮播长方体广告代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D转换模块之长方体轮播图</title> <style&am原创 2019-01-08 15:57:55 · 547 阅读 · 0 评论 -
HTML5前端开发入门之CSS 3D转换模块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>62-3D转换模块</title> <style> *{ margin原创 2019-01-08 15:55:14 · 174 阅读 · 0 评论 -
HTML5前端开发入门之无限翻滚广告图实战
效果图如上:图片不停向左偏转且相互连接代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无限翻滚图片实战</title> <style>原创 2019-01-08 15:50:01 · 396 阅读 · 0 评论 -
HTML5前端开发入门之CSS动画模块
动画模块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>60-动画模块</title> <style> *{ mar原创 2019-01-08 15:47:11 · 117 阅读 · 0 评论 -
HTML5前端开发入门之CSS盒子阴影和文字阴影
盒子阴影和文字阴影1.如何给盒子添加阴影box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影; 2.注意点:2.1盒子的阴影分为内外阴影,默认情况下就是外阴影2.2快速编写阴影只需要编写三个参数即可box-shadow:水平偏移 垂直偏移 模糊度;默认情况下阴影的颜色和盒子内容的颜色一致 3.如何给文字添加阴影text-shad...原创 2019-01-08 15:45:52 · 609 阅读 · 0 评论 -
HTML5前端开发入门之CSS清空默认边距 行高和字号属性
清空默认边距1.为什么要清空默认边距(外边距和内边距)在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等,所以在企业开发中,编写代码之前第一件事就是情况默认的边距 2.格式:*{ margin:0; padding: 0;} 3.注意点: 通配符选择器会找到(遍历)当前界面中的所有标签,所以性能不好 所以以后在企业开发中可以从h...原创 2018-12-30 17:11:12 · 2628 阅读 · 0 评论 -
HTML5前端开发入门之CSS盒子box-sizing属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子box-sizing属性</title> <style> .content{原创 2018-12-30 17:06:40 · 948 阅读 · 0 评论 -
HTML5前端开发入门之CSS后代选择器及子元素选择器
后代选择器和子元素选择器后代选择器1.什么是后代选择器?作用:找到指定标签的所有后代标签,设置属性 格式:标签名称1 标签名称2{ 属性:值;}先找到名称叫做标签名称1的标签,然后再在这个标签下面去查找所有名称叫做标签名称2的标签,然后再设置属性div p{} 注意点:1.后代选择器必须用空格隔开2.后代不仅仅是儿子,也可以包括孙子/重...原创 2018-12-21 08:28:28 · 774 阅读 · 0 评论 -
HTML5前端开发入门之CSS id选择器及class类选择器
Id选择器和class类选择器Id选择器1.什么是id选择器?作用:根据指定的id名称找到对应的标签,然后设置属性格式:#id名称{ 属性:值;} 注意点:1.每个HTML标签都有一个属性叫做id,也就是每个标签都可以设置id2.在同一个界面中id的名称是不可以重复的3.在编写id选择器中一定要在id名称前面加上#4.id名称是有一定规范的...原创 2018-12-21 08:26:15 · 790 阅读 · 0 评论 -
HTML5前端开发入门之CSS标签选择器
标签选择器1.什么是标签选择器作用:根据指定的标签名称,在当前页面中找到所有该名称的标签,然后设置属性 格式:标签名称{ 属性:值;} 注意点:1.标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签2.标签选择器无论标签藏得多深都能选中3.只要是HTML中的标签都可以作为标签选择器...原创 2018-12-21 08:24:57 · 105 阅读 · 0 评论 -
HTML5前端开发入门之CSS文本属性及颜色控制属性
文本属性1.文本装饰属性格式:text-decoration: underline;取值:underline:下划线line-through:删除线overline:上划线none:什么都没有,最常见的用途就是用于去除超链接的下划线快捷键:和文字属性快捷键同理 tdu+tab == text-decoration: underline; 2.文本水平对齐的...原创 2018-12-21 08:23:33 · 541 阅读 · 0 评论 -
HTML5前端开发入门之CSS文字属性
文字属性1.规定文字样式的属性 格式:font-style: italic; 取值: normal:正常的,默认是正常的 italic:倾斜的 快捷键: fs+tab键 == font-style:italic; fsn+tab键 == font-style:normal; 2.规定文字粗细的属性 格式:font-weight: bold; 取值:...原创 2018-12-21 08:21:45 · 155 阅读 · 0 评论 -
HTML5前端开发入门之CSS固定格式
固定格式1.格式:<style type="text/css"> 标签名称{ 属性名称:属性对应的值; } </style> 2.注意点:1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)2.style标签中的type属性其实可...原创 2018-12-21 08:20:18 · 266 阅读 · 0 评论 -
HTML5前端开发入门之a标签和base标签以及假链接和锚点的应用
##a标签-作用:就是用于控制页面与页面之间的跳转的-格式:<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>-属性:a标签中有一个target属性,这个属性的作用就是专门用于如何跳转 _self:用于在当前选项卡中跳转,也就是不新建页面跳转 _blank:用于新的选项卡中跳转,也就是新建界面跳转 a标签中还有一个t...原创 2018-12-15 17:49:22 · 467 阅读 · 0 评论 -
HTML5前端开发入门之注释,img标签及br标签
##HTML注释-作用:解释某一段程序或者某一行代码是什么意思,方便程序猿之间的交流。-格式:<!--xxxxxx-->-注意点:-注释的内容不会在浏览器中显示,注释是写给我们开发者看的。-如何在webstorm中中快速添加注释 -快捷键:ctrl+/ ##img标签-作用:img标签中的img其实是image的缩写-所以img标签的作用就是告诉...原创 2018-12-14 08:52:52 · 994 阅读 · 0 评论 -
HTML5前端开发入门之字符实体
##字符实体1.在HTML中对空格/回车/tab不敏感,会把多个空格/回车/tab当作一个空格来处理 2.什么是字符实体?在HTML中有的字符是被HTML保留的,有的HTML字符在HTML中是有特殊含义的是不能在浏览器中直接显示出来的,那么这些东西要想显示出来就必须要通过过字符实体 &nbsp;空格,一个&nbsp;就是一个空格,有多少个就有多少个空格...原创 2018-12-19 16:10:04 · 275 阅读 · 0 评论 -
HTML5前端开发入门之marquee标签以及html中被废弃的标签
##marquee标签1.什么是marquee标签?作用:跑马灯格式:<marquee> 内容(图片或者文字)</marquee>属性:direction:设置滚动方向 left/right/up/downscrollamount:设置滚动速度,值越大,速度越快loop:设置滚动次数,默认情况下无限循环behavior:设置滚动类型,slide...原创 2018-12-19 16:09:16 · 5656 阅读 · 0 评论 -
HTML5前端开发入门之详情概要标签
##详情概要标签1.什么是详情和概要标签?作用:利用summary标签来描述概要信息,利用details标签来描述详细信息默认情况下是折叠展示,想看见详情必须点击 格式:<details> <summary>概要信息</summary> 详细信息...原创 2018-12-19 16:07:10 · 245 阅读 · 0 评论