CSS3
关注
分享
扫一扫
文章平均质量分 58
邢晋宇
前端工程师
Github地址:https://github.com/XingJYGo
展开
-
css常用小技巧:css input 如何去掉点击后出现的边框
// css属性outline:none;原创 2018-05-21 21:10:00 · 5056 阅读 · 0 评论 -
css教程系列6：行高和字体大小
1 CSS line-height 属性代码：p.small {line-height:70%}p.big {line-height:200%}运行后：70%与200%宽高 2 CSS font-size 属性h1 {font-size:250%;}h2 {font-size:200%;}p {font-size:100%;} 两者特点：1 一行文字行高和父元素高度一致的时候，垂直居中显示2 ...原创 2018-05-25 23:01:05 · 5376 阅读 · 0 评论 -
css教程系列5：px、em、rem区别介绍
1 PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1. 浏览器无法调整px单位的字体，以em或rem为字体单位可调整字体。 2 EMem是相对长度单位。EM特点1. em的值并不是固定的；2. 行高：n倍的 em = n *父级元素的像素px大小（若无则*浏览器的默认字体）。3 REMrem是CSS3新增的一个相对单位（root em，根em），也是相对...原创 2018-05-23 19:29:41 · 178 阅读 · 0 评论 -
css教程系列4：input 去掉外边框,placeholder的字体颜色、字号
1 input 标签去除外边框：在进行webAPP开发时，input外边框非常影响美观，去除外边框方法如下：<input style="border: 0px;outline:none;cursor: pointer;" type="text" placeholder="请输入手机号">解释：“border: 0px；” 去除 placeholder 外的边框“outline:non...原创 2018-05-23 19:29:39 · 919 阅读 · 0 评论 -
css教程系列3：Flex 布局教程：Flex-demos（转）
上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codep...转载 2018-05-23 19:29:38 · 145 阅读 · 0 评论 -
css教程系列2：Flex 布局教程：Flex 语法（转）
Flex 布局教程：语法篇网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就...原创 2018-05-23 19:29:34 · 213 阅读 · 0 评论 -
css教程系列1：position定位:absolute/relative/fixed
1 【Positioning(定位)】Positioning作用：指定了元素的定位类型。position包括四个值：static，relative，fixed，absolute。css定位解析：元素可以使用的顶部top，底部bottom，左侧left和右侧right属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 2 【position...原创 2018-05-23 19:29:32 · 219 阅读 · 0 评论 -
HTML教程系列之：link与title
【link】标签：外联导入样式例1：<link rel="stylesheet" type="text/css" href="theme.css" />解释：link ：可以外联导入css的样式，使css与HTML分离。前端页面布局清晰。href：css路径；type：css类型。 【title】：定义文档的标题（注：<title> 标签是 <head> 标签中..原创 2018-05-23 19:29:30 · 893 阅读 · 0 评论 -
HTML教程系列之：HTML5头部常用介绍
HTML5头部常用介绍：【DOCTYPE html】声明文档类型为HTML5文件。 【meta标签】<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。注意：<meta> 标签永远位于 head 元素内部。例1：keywords：告诉浏览器你的网页的关键字是什么：用于SEO 搜索时优化排序的meta 标签&...原创 2018-05-23 19:29:27 · 636 阅读 · 0 评论 -
在使用webstorm打开本地项目文件夹的html文件时，浏览器提示404错误
错误原因：在使用webstorm打开本地项目文件夹的html文件时，浏览器提示404错误。错误分析：文件夹命名内包含“+”，此特殊符号导致浏览器解析错误。改正方案：去掉特殊符号“+”...原创 2018-05-23 19:29:24 · 5854 阅读 · 0 评论 -
css教程系列7：盒子模型理解
1 盒子模型1.1盒子模型的盒子： 以博客园页面为例： 1.2盒子内部构造：边框(border)、内容(content)、填充(padding)、边界(margin)---CSS盒子模式都具备这些属性。 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。 ...原创 2018-05-25 23:01:12 · 175 阅读 · 0 评论 -
css教程系列9：内边距（padding）和外边距（margin）
1 css总结9：内边距和外边距通过css总结8：盒子模型可知：内边距（padding），外边距（margin）。可以影响盒子在浏览器的位置。1.1 padding使用：{padding：上 右 下 左} 示例：div {padding: 50px 10px 20px 30px} - 上内边距是 50px，右内边距是 10px，下内边距是 20px，左内边距是 30px常用单位：padding-b...原创 2018-05-25 23:01:17 · 704 阅读 · 0 评论 -
css教程系列10：父标签没有定义高度，盒子异常移动
1 问题：在父标签没有定义高度的情况下，嵌套的盒子浮动后，父标签下面的元素发生位置错误。2 解决方法：2.1（大厂网页常用方法） 添加额外元素： 即：父标签下添加一个元素（.clearfix），去清除浮动 .clearfix:after{ content: ""; display: block; height: 0rem; line-height:...原创 2018-05-25 23:01:23 · 407 阅读 · 0 评论 -
css教程系列20:TCP通信协议WebSocket
HTML5 WebSocket1 介绍:WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过...原创 2018-05-26 22:39:00 · 251 阅读 · 0 评论 -
css教程系列19:HTML5 Canvas(画布)
1 <canvas> 标签定义图形，比如图表和其他图像。 例1:简单使用:<canvas id="Canva" width="200" height="100" style="background: yellowgreen"></canvas> 2 Canvas 坐标canvas 是一个二维网格。canvas原创 2018-05-26 22:38:58 · 523 阅读 · 0 评论 -
css教程系列18：HTML 表单和inut各个常用标签
1 HTML 表单和输入1.1 HTML 表单介绍表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置:例子:表单内的 文本输入框<form>.<input type="text">.<...原创 2018-05-26 22:38:56 · 538 阅读 · 0 评论 -
css教程系列17:HTML块级元素&amp;行内元素之分: &lt;div&gt; 和&lt;span&gt;
1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素。1.1 块级元素实例: <div> <h1>, <p>, <ul>, <table> 块级元素的特点: 独占一行,可设置宽高1.2 行级元素实例 :<span> <a> 行级元素特点:一行可排布多个,不可设置宽高.1.3 行内块元素原创 2018-05-26 22:38:52 · 867 阅读 · 0 评论 -
css教程系列15：CSS3 圆角
1 css圆角：1.1 浏览器支持：-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。1.2 属性 border-radius：代码如下：#rcorners1 { border-radius: 25px; background: #cecece; /*padding: 20px;*/ width: 50px; height: 50px;...原创 2018-05-25 23:01:47 · 177 阅读 · 0 评论 -
css教程系列14：CSS 分页实例
1 作用：如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。例1 ：以下实例演示了如何使用 HTML 和 CSS 来创建分页： 正常样式<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <原创 2018-05-25 23:01:51 · 172 阅读 · 0 评论 -
css教程系列13：CSS 伪类(Pseudo-classes)
1 伪类作用：CSS伪类是用来添加一些选择器的特殊效果。2 常用示例：2.1anchor伪类：代码： 正常语法：a{color:#FF0000;}/* 文字颜色 */ 伪类语法：a:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接...原创 2018-05-25 23:01:35 · 163 阅读 · 0 评论 -
css教程系列12：CSS Float(浮动)
1 定义：CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。2 解释：浮动的元素，浮在界面上，脱离了HTML文本流。 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本...原创 2018-05-25 23:01:31 · 137 阅读 · 0 评论 -
css教程系列11：css的overflow问题
1 排版时经常遇到块级元素内容overflow，怎么妥当处理是一个关键。 overflow的常用属性： 代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>overflow</title>原创 2018-05-25 23:01:27 · 178 阅读 · 0 评论 -
css常用技巧:input提示文字；placeholder字体修改
1 很多网站都需要更改 <input>内部的placeholder 文字颜色属性:下面来介绍下这个技巧. 2 源代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>input输入框提示文字</title>原创 2018-05-23 19:28:33 · 14113 阅读 · 0 评论