- 博客(18)
- 收藏
- 关注
RSS订阅原创 选项卡页面
1) Add HTML<div class="page-tabs"> <button class="tablink" id="defaultOpen">页面1</button> <button class="tablink">页面2</button> &
2018-07-24 16:23:29
556
原创 元素居中
水平垂直居中方式1：居中元素Add CSSposition: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);居中元素根据内容给出宽度，也就是说可以居中包裹的子元素，但子元素宽度如果宽度超出550px将自动换行。方式2：居中元素Add CSSwidth: 600px;height: 6...
2018-07-24 13:26:33
107
原创 响应图片
响应图片，鼠标移入，图片逐渐放大10%1) Add HTML<div class="img-responsive"> <div class="img-frame"> <img style="background-image: url(https://i.imgur.com/vHlJFwT.jpg)"/> <
2018-07-23 19:31:05
237
原创 按钮
鼠标移入逐渐改变按钮背景颜色和边框颜色1) Add HTML<div class="button-wrap"> <div class="button">按钮</div></div>2) Add CSS /* 效果背景 */ body{ background-image:...
2018-07-23 15:31:21
97
原创 注册模块
手机号注册模块1) Add HTML<div class="register_wrap"> <form action="#" method="post"> <h2>注册</h2> <input type="text" placeholder="
2018-07-23 11:19:17
372
原创 搜索框
鼠标移入放大镜图标，逐渐显示搜索框1) Add HTML<!--使用Bootstrap字体图标--> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFe...
2018-07-22 23:55:44
232
原创 搜索框
鼠标点击搜索输入框，搜索框左侧拉伸73个像素1) Add HTML<!--使用Bootstrap字体图标--><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIF...
2018-07-22 22:49:14
208
原创 轮播图
1) Add HTML<div id="slider-bar"> <div id="imgs-box"> <ul> <li><img src="https://i.imgur.com/4Fk8z2L.jpg" alt=""><
2018-07-21 15:35:08
137
原创 菜单按钮
菜单按钮点击菜单图标改变它的形状为"X"1) Add HTML<div class="container"> <div class="bar1"></div> <div class="bar2"></div> <div class=&q
2018-07-21 13:37:36
558
原创 前端面试题
HTML CSS 部分1、什么是盒子模型？所有HTML元素都可以视为一个盒子，在CSS中谈论设计和布局时会经常使用术语“盒子模型”。盒子模型本质上就是一个包装HTML元素的盒子。它包括：padding（边距），border（边框），margin（外边距）和content（实际内容）。2、简述src与href的区别href（Hypertext Reference的缩写）超文本引用，在...
2018-07-19 15:39:57
1125
原创 CSS hack(CSS 滤器)
CSS 滤器CSS 滤器是一个编程技术，指根据浏览器的版本、功能来隐藏或显示CSS 标记语言。各浏览器对层叠样式表行为的解释以及W3C标准 的支持不同。有时 CSS 滤镜也用来在多个渲染效果不同的浏览器中取得一致的表现。前缀 滤镜此滤镜使用浏览器前缀样式代码，而这些代码会被其它浏览器忽略。所以 -moz-color:red; 定义将在所有 Gecko 浏览器中显示红色，而其它浏览器则为...
2018-07-17 20:33:19
193
1
原创 URL
简介统一资源定位符（或称统一资源定位器/定位地址、URL地址等[1]，英语：Uniform Resource Locator，常缩写为URL），有时也被俗称为网页地址（网址）。如同在网络上的门牌，是因特网上标准的资源的地址（Address）。它最初是由蒂姆·伯纳斯-李发明用来作为万维网的地址。现在它已经被万维网联盟编制为因特网标准RFC 1738。在互联网的历史上，统一资源定位符的发明是一...
2018-07-17 20:07:59
339
1
原创 XML历史和用途
简介可扩展标记语言（英语：Extensible Markup Language，简称：XML），是一种标记语言。标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用像XML这样由相关人士自由决定的标记语言，这就是语言的可扩展性。XML是从标准通用标记语言（SGML）中简化修改出来的。它主要...
2018-07-17 18:17:57
641
1
原创 HTML历史
简介超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面[1]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言...
2018-07-17 18:02:26
2103
1
原创 HTML实体
HTML Symbol Entities（HTML 符号实体）Example（范例）<p>I will display &copy;</p><p>I will display &#169;</p>结果：I will display ©I will display ©常用实体：Result Des...
2018-07-17 14:32:25
183
1
原创 完整CSS实体参考
Complete CSS Entity Reference（完整CSS实体参考）Example（范例）：<style> h2:after { content: '\00A7'; } </style><body> <h2>I will display </h2></bod...
2018-07-17 13:49:01
12383
1
原创 WebStorm安装_破解指南
WebStorm是一款前端开发工具，功能强大！！非轻量级！！ 官网 https://www.jetbrains.com/webstorm/下载下载方式1：Webstorm官网，下载链接直达 https://www.jetbrains.com/webstorm/ 点击DOWNLOAD按钮即可直接下载最新版。 下载方式2：我的百度网盘(WebStorm-2018....
2018-07-12 14:44:16
3362
原创 WebStorm常用快捷方式
WebStorm常用快捷键/快捷方式常用快捷键/快捷方式Ctrl+/ 注释/**+Enter JS函数注释Ctrl+Alt+Insert 创建新文件End 光标移至末尾Home 光标移至最前面Alt+上下拖动鼠标 多行同级输入相同内容Ctrl+R 文字替换Ctrl+F 文字查找Ctrl+D 复制光标所在行Ctrl+X 剪切光标所在行（我经常利用它删除当前行）Ctr...
2018-07-06 23:27:06
345
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人