随笔分类 -  HTML+CSS

a标签的下载链接，如果是图片，点击链接是下载一个图片而不是直接打开，应该怎么办？(添加download属性)
摘要：a标签的下载链接，如果是图片，点击链接是下载一个图片而不是打开，应该怎么办？ 大家都知道，一个a标签如果链接的是一个文件而非图片，点击链接会直接下载这个文件；然而链接的是图片，点击链接就会直接打开图片，遇到一个需求是点击下载文件或者图片，而不是打开图片，这个时候就需要用到download属性了。HT 阅读全文
posted @ 2017-09-30 15:52 ErduYang 阅读(2804) 评论(0) 推荐(0)
(转) css3中的border-radius详解
摘要：转自：http://blog.csdn.net/liuyan19891230/article/details/50724630 border-radius: none　｜　length{1,4} [/ length{1,4} 其中每一个值可以为 数值或百分比的形式。 length/length　第一 阅读全文
posted @ 2017-06-01 17:22 ErduYang 阅读(363) 评论(0) 推荐(0)
纯css写的步骤条
摘要：步骤条很常见，但是网上很多都不太智能，不适合放在手机上的步骤条，应一位朋友的求帮忙，故写了一个可以加任意多个步骤，宽度仍然等比，超过屏幕还可以滑动的步骤条ui。具体展示如下： 于若需要请移步我的github，按照自己的需求自行修改。其中横向滑动可以参加另外一篇文章 ：css如何实现滚动条隐藏但鼠标仍 阅读全文
posted @ 2017-05-07 17:46 ErduYang 阅读(9124) 评论(0) 推荐(0)
css如何实现滚动条隐藏但鼠标仍然可以滚动
摘要：在做移动端项目的时候，有些时候需要元素超出屏幕可以滚动，为了美观需要隐藏滚动条。如果只需兼容chrome和safari，可以使用自定义滚动条的伪对象选择器——：：webkit-scrollbar。 具体使用即： element::webkit-scrollbar{display:none} 或者 e 阅读全文
posted @ 2017-05-07 17:07 ErduYang 阅读(8262) 评论(0) 推荐(0)
inline-block产生空白间隙的问题
摘要：在项目中遇到给设置display:inline-block属性出现空白间隙 如： 效果图： 解决办法：给父容器设置font-size:0; display:inlie-block的元素需要显示字体再额外加。 原因： 其实这个问题是我们写代码的习惯所造成的。平时我们写代码，为了使代码看上去“层级分明” 阅读全文
posted @ 2016-03-31 17:28 ErduYang 阅读(417) 评论(0) 推荐(0)
css3 媒体查询用法
摘要：参考资料http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml css3 media媒体查询用法总结http://www.ibm.com/developerworks/cn/web/wa-cssqueries/ css3媒... 阅读全文
posted @ 2015-10-30 17:30 ErduYang 阅读(242) 评论(0) 推荐(0)
表单
摘要：表单元素1 form 表单2 text 文本框password 密码radio 单选checkbox 复选submit 提交reset 重置button 按钮image 图片file 上传hidden 隐藏 label 标签为 input 元素定义标注 …… 这样点击后面的文本时候... 阅读全文
posted @ 2015-09-24 20:54 ErduYang 阅读(229) 评论(0) 推荐(0)
给body设置height:100%不起作用？
摘要：今天学习CSS3的渐变时，看到一个demo，就照着做，问题就来了。例子代码是这样的：效果图是这样的：我自己照着例子敲出来的效果是这样的：怎么回事啊？怎么跟例子效果不一样？代码明明一样啊，body的高度也设置了100%啊，左边红线怎么不是body高度？右键一看原来body只有18px。怎么回事，不是1... 阅读全文
posted @ 2015-09-22 17:35 ErduYang 阅读(626) 评论(0) 推荐(0)
表格
摘要：1.默认表格：2.给表格加上边框： css table{ margin: 50px auto; border: 1px solid #ccc; } th ,td{ border: 1px solid #ccc; } 效果： 注意... 阅读全文
posted @ 2015-09-21 23:37 ErduYang 阅读(186) 评论(0) 推荐(0)
CSS定位
摘要：1.relative相对定位 1>.不影响元素本身的特性(只是给元素加上position:relative属性元素本身不受影响) 2>.不使元素脱离文档流 3>.如果没有定位偏移量，对元素本身没有任何影响2.定位元素位置控制 top/left/right/bottom:定位元素偏移量3.ab... 阅读全文
posted @ 2015-09-10 23:10 ErduYang 阅读(208) 评论(0) 推荐(0)
清除浮动的几种方式
摘要：1.br元素结合clear属性清浮动案例:html: css: .div1{ border: 5px solid green; } .div2{ background: red; width: 200px; he... 阅读全文
posted @ 2015-08-08 18:34 ErduYang 阅读(164) 评论(0) 推荐(0)
css浮动原理和特性
摘要：float浮动原理 语法： float： left | right | none | inherit 原理： 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来float浮动特性 1.块元素在一排显示 2.内联元素支持宽高 3.默认内容撑开宽度 4... 阅读全文
posted @ 2015-08-07 00:03 ErduYang 阅读(610) 评论(0) 推荐(0)
前端规范
摘要：前端规范1、所有书写均在英文半角状态下的小写；2、id，class必须以字母开头；3、所有标签必须闭合；4、html标签用tab键缩进；5、属性值必须带引号；6、7、/* css注释 */8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；9、p,dt,h标签 里面不能嵌套块属性标签；... 阅读全文
posted @ 2015-08-05 23:39 ErduYang 阅读(163) 评论(0) 推荐(0)
块元素和内嵌元素
摘要：块元素和内嵌元素块的特征 1、默认独占一行 2、没有宽度时，默认撑满一排 3、支持所有css命令内嵌(内联、行内)的特征 1、同排可以继续跟同类的标签 2、内容撑开宽度 3、不支持宽高 4、不支持上下的margin和padding 5、代码换行被解析块和内嵌的转换di... 阅读全文
posted @ 2015-08-05 23:34 ErduYang 阅读(232) 评论(0) 推荐(0)
CSS重置样式
摘要：body,/*默认margin：8*/ p , /*默认margin：16*/ ul, /*默认margin：16*/ ol, /*默认margin：16*/ dl, /*默认margin：16*/ dd, /*默认margin：40*/ h1,h... 阅读全文
posted @ 2015-08-05 22:09 ErduYang 阅读(146) 评论(0) 推荐(0)
CSS background-position用法详解
摘要：语法：background-position: length || lengthbackground-position: position || position取值：length: 百分数|由浮点数字和单位标识符组成的长度值postion: top | center | bottom | left... 阅读全文
posted @ 2015-07-15 08:10 ErduYang 阅读(315) 评论(0) 推荐(0)