- 博客(60)
- 收藏
- 关注
RSS订阅原创 纯HTML+CSS实战之图片水印方案二----主图做背景
效果如图所示 代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片水印方案二-主图做背景</title> <style>
2019-01-24 12:24:28
3350
原创 纯HTML+CSS实战之图片水印方案一
效果如图所示:代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片水印方案一</title> <style> *{
2019-01-22 14:19:38
4192
1
原创 纯HTML+CSS实战之制作相框效果
效果如图所示主要运用了盒子阴影，图片阴影，边框属性三个要点代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作相框效果</title> <
2019-01-21 13:24:33
7876
1
原创 纯HTML+CSS实战之仿微信聊天界面制作
效果图如下： 主要运用了之前实战项目中的三角形制作和before及after伪类选择器知识（其中头像图片采用30px*30px图片）代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作仿微
2019-01-16 09:49:22
22649
19
原创 纯HTML+CSS实战之三角形的制作
先制作左图样式，再根据需求制作右图三角形 代码如下： 此处主要使用transparent属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作三角形</title>
2019-01-15 09:26:59
280
原创 纯HTML+CSS实战之百度搜索框实例
效果图如图所示： 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css制作搜索框</title> <style>
2019-01-14 09:27:46
9406
5
原创 纯HTML+CSS实战之高级字体的实现
本次分享内容较为基础，主要知识点便是css中盒子及文字阴影的应用字体效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS高级字体的实现</title>
2019-01-13 08:51:34
452
原创 纯HTML+CSS实战之实现带图标的二级导航菜单
效果图如上代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯CSS实现带图标的二级导航菜单</title> <style>
2019-01-12 12:37:21
5741
原创 纯HTML+CSS实战之仿ios开关按钮
效果图如上：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css仿ios开关按钮</title> <style>
2019-01-10 09:50:11
1005
原创 纯HTML+CSS实战之单/复选框美化
效果图美化可根据自己需求进行修改，此处旨在传播方法代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯CSS单/复选框美化</title> <sty
2019-01-09 10:13:41
862
原创 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
306
原创 HTML5前端开发入门之CSS 背景属性补充
背景属性补充背景尺寸属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>65-背景尺寸属性</title> <style> *{
2019-01-08 16:05:50
149
原创 HTML5前端开发入门之3D长方体轮播 实战
效果图如上，一个3D轮播长方体广告代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D转换模块之长方体轮播图</title> <style&am
2019-01-08 15:57:55
515
原创 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
157
原创 HTML5前端开发入门之无限翻滚广告图实战
效果图如上：图片不停向左偏转且相互连接代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无限翻滚图片实战</title> <style>
2019-01-08 15:50:01
362
原创 HTML5前端开发入门之CSS动画模块
动画模块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>60-动画模块</title> <style> *{ mar
2019-01-08 15:47:11
103
原创 HTML5前端开发入门之CSS盒子阴影和文字阴影
盒子阴影和文字阴影1.如何给盒子添加阴影box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影; 2.注意点：2.1盒子的阴影分为内外阴影，默认情况下就是外阴影2.2快速编写阴影只需要编写三个参数即可box-shadow:水平偏移 垂直偏移 模糊度;默认情况下阴影的颜色和盒子内容的颜色一致 3.如何给文字添加阴影text-shad...
2019-01-08 15:45:52
557
原创 HTML5前端开发入门之CSS 2D转换模块实战
效果图： 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D转换模块案例实战</title> <style> *{
2019-01-08 15:25:42
138
原创 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
124
原创 HTML5前端开发入门之CSS过渡模块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>54-过渡模块</title> <style> div{ width:
2019-01-02 17:12:40
123
原创 HTML5前端开发入门之使用a标签伪类选择器进行导航条实战
代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>53-a标签伪类选择器导航条实战</title> <style> *{
2019-01-02 17:11:33
770
原创 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
246
原创 HTML5前端开发入门之定位流子绝父相团购页面实战
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>49-团购界面</title> <style> *{ margin:
2018-12-30 17:42:29
553
原创 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
123
原创 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
1009
原创 HTML5前端开发入门之CSS浮动实战
如下图所示的浮动练习实战代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>42-浮动练习</title> <style> bo
2018-12-30 17:24:35
160
原创 HTML5前端开发入门之CSS浮动流
浮动流浮动流脱标1.什么是浮动元素的脱标？ 脱标：脱离标准流 当某一个元素脱标以后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标 2.浮动元素脱标之后会有什么影响？ 如果前面一个元素浮动了，而后面一个元素没有浮动， 那么这个时候前面的一个元素就会盖住后面的一个元素浮动元素排序规则1.浮动元素排序规则1.1相同方向上的浮动元素，先浮...
2018-12-30 17:24:15
143
原创 HTML5前端开发入门之CSS清空默认边距 行高和字号属性
清空默认边距1.为什么要清空默认边距（外边距和内边距）在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中，编写代码之前第一件事就是情况默认的边距 2.格式：*{ margin：0; padding: 0;} 3.注意点： 通配符选择器会找到（遍历）当前界面中的所有标签，所以性能不好 所以以后在企业开发中可以从h...
2018-12-30 17:11:12
2581
原创 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
888
原创 HTML5前端开发入门之CSS盒子模型及其宽高
盒子模型及其宽高1.什么是css盒子模型？css盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子 结论1.在HTML中所有的标签都可以设置宽度/高度 == 指定可以存放内容的区域内边距 == 填充物边框 == 现实中的手机盒子自己外边距 == 盒子与盒子之间的间隙 1.内容宽度和高度就是通过标签的width/height属性...
2018-12-23 20:41:09
496
原创 HTML5前端开发入门之CSS边框属性及内外边距属性
边框属性1.什么是边框？边框就是环绕在标签宽度和高度周围的线条 2.边框属性的格式2.1连写（同时设置四条边的边框）border: 边框的宽度 边框的样式 边框的颜色; 快捷键：bd+ 按下 tab == border: 1px solid #000; 注意点：1.连写格式中，颜色属性可以省略，省略之后默认就是黑色2.连写格式中样式不能省略，...
2018-12-23 20:40:25
846
原创 HTML5前端开发入门之CSS背景属性及精灵图
背景属性1.如何在css中设置标签背景颜色？在css中有一个background-color：属性，就是专门用来设置标签的背景颜色的 取值：具体的单词rgbrgba十六进制 2.如何在css中设置标签背景图片？在css中有一个background-image：url（）;的属性 就是专门用于设置背景图片的 注意点： 1.图片的地址必须放...
2018-12-23 20:39:16
598
原创 HTML5前端开发入门之CSS元素的显示模型及转换
Css元素的显示模型在HTML中HTML将所有的标签分为两类，分别是容器级和文本级在css中也将所有的标签分为两类，分别是块级元素和行内元素 1.什么是块级元素块级元素会独占一行 2.什么是行内元素行内元素不会独占一行 容器级的标签div h ul dl li ... 文本级的标签span p buis stong em ins del .....
2018-12-23 20:38:22
198
原创 HTML5前端开发入门之div和span
Div和span1.什么是div？作用：一般用于配合css完成网页的基本布局 2.什么是span？作用：以后版用于配合css修改网页中的一些局部信息 3.div和span有什么区别？1.div会单独的占领一行，而span不会单独占领一行2.div是一个容器级别的标签，而span是一个文本级的标签 4.容器级的标签和文本级的标签的区别？容器级的标签中可...
2018-12-23 20:37:14
717
原创 HTML5前端开发入门之CSS的三大特性（继承性，层叠性，优先级）
Css的三大特性（继承性，层叠性，优先级）1.什么是继承性作用：给父元素设置一些属性，子元素也可以使用，这个我们称之为继承性注意点：1.并不是所有的属性都可以继承只有以color/font-/text-/line开头的属性才可以继承2.在CSS的继承中，不仅仅是儿子可以继承，只要是后代都可以继承3.CSS继承性中的特殊性3.1 a标签的文字颜色和下划线是不能继承的...
2018-12-23 20:36:38
309
原创 HTML5前端开发入门之CSS通配符选择器
通配符选择器1.什么是通配符选择器？作用:给当前界面上的所有标签设置属性 格式：*{ 属性：值;} 注意点：由于通配符选择器是设置界面上所有的标签的属性 所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差 所有在企业开发中一般不会使用通配符选择器...
2018-12-22 20:49:07
828
原创 HTML5前端开发入门之CSS属性选择器
属性选择器1.什么是属性选择器？作用：根据指定的属性名称，找到对应的标签然后设置属性 格式：[attribute]作用：根据指定的属性名称找到对应的标签，然后设置属性 [attribute=value]作用：找到有指定属性，并且指定属性的值等于value的标签，然后设置属性最常见的应用场景，就是用于区分input属性例如：input[tye=...
2018-12-21 17:15:50
191
原创 HTML5前端开发入门之CSS序选择器
序选择器CSS3中新增的选择器中最具代表性的就是序选择器1.同级别的第几个:first-child 选中同级别中的第一个标签:last-child 选中同级别中的最后一个标签:nth-child(n) 选中同级别中的第n个标签:nth-last-child(n) 选中同级别中的倒数第n个标签:only-child 选中父元素中唯一的元素:nth-child(odd)...
2018-12-21 17:15:13
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人