css 五边形,六边形,八边形

css 五边形,六边形,八边形
css 五边形,六边形,八边形,需要考虑如下效果如何实现? <html> <head> <style> .sixedge{ height: 24px; width: 55px; position:relative; background-color: #FFF; border-top:1px solid green; border-bottom:1px solid green; margin-left:40%; } .sixedge:after{...

css3效果:波浪效果

css3效果:波浪效果
实现效果 如图所示: 首先得准备三张图,一张是浅黄色的背景图loading_bg.png,一张是深红色的图loading.png,最后一张为bolang.png。 css代码 body{background:#ffe894;} .loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repeat left top;margin:30px auto;} .loading{width:113px; height:111px;position:relative; -webkit-mask-image:url(loading.png);} .show{ ...

解决页面使用overflow: scroll在iOS上滑动卡顿的问题

解决页面使用overflow: scroll在iOS上滑动卡顿的问题
故事背景:最近的一次开发中,使用到了overflow:scroll 属性来滑动div。信心满满的以为不会出现任何问题,看来还是太清高自傲了,于是写下这篇随笔特此总结一番。 如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接或扫描二维码后滑动文字区域查...

ul因为li浮动而没有被撑开

ul因为li浮动而没有被撑开
不清除浮动的一个常见危害是高度塌陷。关于高度,下面说这么几种情况: 如果父元素已经规定了度,不会高度塌陷,但可能会溢出(如果子元素总高度超过父元素的话) 如果父元素没有规定高度: 2.1 如果所有子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保不住子元素 2.2 如果存在没有浮动的子元素,父元素高度取决于没有浮动的子元素,所以如果浮动子元素更高的话,还是会塌陷 ...

移动端html5视频开发指南

移动端html5视频开发指南
随着html5的兴起,相信大家对html5中视频的解决方案都比较感兴趣,现将我们在开发视频应用的过程中遇到的坑总结如下,希望大家喜欢 在页面添加一个视频 <video src="demo.webm" type="video/webm"> <p>您的浏览器不支持video元素.</p> </video> 为video元素指定多个视频格式并不是所有的浏览器都支持同一种格式,source可以让开发者为video元素指定多个视频格式 ...

移动web前端meta通用设置

移动web前端meta通用设置
<!-- 页面字符编码 --> <meta charset="utf-8"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- 关键字描述 --&...

前端的一些简单优化技巧

前端的一些简单优化技巧
前端的一些简单优化技巧 下面将自己对于性能优化的一些见解与大家分享;     1.精灵图       最基本的是尽可能的将背景图片做成精灵图,减少图片的请求,所以一般web工程师的另一项基础本能就是精灵图的制作。     2.css选择器优化 在css中要尽量的使用子代选择器>,少使用后代选择器,使用后代选择器时,搜素引擎会将所有的后代元素都进行搜索,如果我们使用子代选择器时,可以将搜索的范围缩小,从而...

求解!webkit-line-clamp 样式在A标签中间 加 省略号

求解!webkit-line-clamp 样式在A标签中间 加 省略号
至于为什么的话不了解,目测是一个 WebKit 的 bug,可以找大大帮你看看 WebKit 源代码。   display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden 解决方法的话 StackOverflow 有: html - Webkit Line Clamp truncates link in the middle 文字外面包一个其他标签(span/p 都可以)似乎就可以绕过去了。  

box阴影生成图片

box阴影生成图片
box阴影生成图片 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>box阴影生成图片</title>     <style>         .box{             width: 1px;             height: 1px;             border: 1px solid red;             margin: 100px;             box-shadow: 0px 0px 1px rgba(255,255,0,1), 0px 1px 1px rgba(0,25...

解决国内gem不能用的问题

解决国内gem不能用的问题
最近在安装SASS的时候,用到gem命令,但是运行出行如下错误! C:\Users\len>gem install sass ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError) Errno::ETIMEDOUT: A connection attempt failed because the connected party di d not properly respond after a period of time, or established connection failed because connected host has failed to respond. - connect...
Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录