html+css
文章平均质量分 79
canglingyue
这个作者很懒,什么都没留下…
展开
-
less中解决CSS3的calc计算出错
最近在用less的时候发现CSS3的calc函数计算时会出现问题。问题 .mkt-hover{ width: calc(100% - 16px); }但是less自己就把它当表达式计算掉了,导致到浏览器那变成了 .mkt-hover{ width: calc(84%); }解决方法把calc()里面的表...原创 2018-04-02 14:33:34 · 1970 阅读 · 0 评论 -
一个前端写的php博客系统--支持markdown哦
起因最近买了个新的域名,同时在阿里云申请了免费的虚拟主机。。。借此机会就想搞个自己的博客站点,虽然之前也使用了hexo + github 、 WordPress 做过,但是我的阿里云虚拟主机实在是不知道怎么去搞hexo (也许根本就搞不起来,除非自己花钱买主机,哈哈)。。。WordPress总是感觉好笨重,运行起来一股的人到中年,气喘吁吁啊。。。百度之后,typeecho成了首选,但是markdow原创 2016-07-26 13:50:40 · 8819 阅读 · 9 评论 -
腾讯qq发起临时会话链接
1 XXX 2 或者url 更换为下面的链接tencent://Message/?Uin=你的qq&websiteName=qzone.qq.com&Menu=yes原创 2016-04-13 09:30:39 · 10903 阅读 · 1 评论 -
absolute 定位 右对齐
如果要将绝对定位元素相对父元素定位,就必须设置父元素为相对定位,如: .a{position:relative;background:green;} .b{position:absolute;right:0;top:0;background:red;}父元素,net920com ,其它一些内容。子元素原创 2016-05-17 23:13:13 · 8726 阅读 · 0 评论 -
CSS之writing-mode
### writing-mode的原本作用 `writing-mode` 就是用来实现文字可以竖着呈现的。 “` writing-mode .div2 { writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing原创 2016-06-30 14:05:11 · 852 阅读 · 0 评论 -
box-shadow与filter的drop-shadow
同样的参数值,表现效果有差异filter中的drop-shadow语法如下filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滤镜</title> <style> img{原创 2016-06-29 16:09:25 · 464 阅读 · 0 评论 -
前端工程师面试题汇总
HTMLDoctype作用?严格模式与混杂模式如何区分?它们有何意义?HTML5 为什么只需要写 ?行内元素有哪些?块级元素有哪些? 空(void)元素有那些?页面导入样式时,使用link和@import有什么区别?介绍一下你对浏览器内核的理解?常见的浏览器内核有哪些?html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?简述转载 2016-06-28 11:19:39 · 772 阅读 · 0 评论 -
html 标签详解(基础<!DOCTYPE> )
定义文档类型。标题内容区域 声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。原创 2016-03-28 14:35:32 · 445 阅读 · 0 评论 -
HTML5模拟齿轮动画
这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了,而且我们并没有用JavaScript,而是纯CSS3实现的。在线演示 源码下载HTML代码123456转载 2016-02-26 09:31:16 · 1052 阅读 · 0 评论 -
HTML 全局属性
: HTML5 新属性。属性描述accesskey设置访问元素的键盘快捷键。class规定元素的类名(classname)contenteditableNew规定是否可编辑元素的内容。contextmenuNew指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单原创 2016-03-30 17:02:47 · 395 阅读 · 0 评论 -
html 标签详解(基础<html> <title>)
1、 标签告知浏览器这是一个 HTML 文档。 标签是 HTML 文档中最外层的元素。 标签是所有其他 HTML 元素(除了 标签)的容器。HTML5 中,增加了一个新属性:manifest(定义一个 URL,在这个 URL 上描述了文档的缓存信息)。2、 标签定义文档的标题,在所有 HTML 文档中是必需的。原创 2016-03-30 17:01:28 · 560 阅读 · 0 评论 -
html 标签
文本元素<wbr> 如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。英文单词过长时使用<wbr>会根据浏览器的宽度适当的裁切换行。<p> 如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。</p><ins> 添加下划线,起到强调作用<s原创 2016-07-06 18:50:33 · 306 阅读 · 0 评论 -
CSS---Tips2背景
backgrounddiv{ background: red url(img.png) no-repeat scroll left top/100% border-box content-box;}对应的属性全称[background-color][background-image][background-repeat][background-attachment][background-原创 2016-07-08 16:32:14 · 382 阅读 · 0 评论 -
点击文字复制到剪切板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title原创 2017-09-29 16:42:00 · 1899 阅读 · 0 评论 -
CSS3实战1-文本属性text-shadow的用法
text-shadow 定义文本阴影或模糊效果。text-shadow属性在css2中已经定义了,但是在css3中又重新定义了,并且增加了不透明度的效果。基本语法text-shadow:none | <shadow> [ , <shadow> ]*<shadow> = <length>{2,3} && <color>?默认值:无适用于:所有元素动画性:是,除了内、外阴影切换时计算值:指定原创 2016-09-26 18:04:05 · 4202 阅读 · 0 评论 -
图片放上效果ImageHover.css
网页效果中经常会用到图片的hover效果,ImageHover.css 这个库为我们提供了多种的效果。兼容性插件是使用css3书写的,所以最好是对css3支持比较好的浏览器。如果需要考虑到兼容性问题,那么建议使用我自己写的jq版效果,虽然效果单一,但是兼容性更好。效果演示地址Demo:http://weber.pub/demo/160919/index.html下载直接下载链接:http://原创 2016-09-19 18:20:04 · 2612 阅读 · 0 评论 -
Emmet快捷键(前端必备快速编码工具)
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。示例下载官网地址:http://emmet.io/插件下载地址:htt原创 2016-09-06 13:40:42 · 3934 阅读 · 1 评论 -
CSS3的loader加载动画
纯CSS3书写的loader动画效果,当然可以搭配jq使用,还有react 和 Angular 版本浏览器支持效果演示地址纯CSS版演示地址:http://weber.pub/demo/160912/css.html搭配 Jquery 使用演示地址:http://weber.pub/demo/160912/jq.html下载直接下载链接:http://pan.baidu.com/s/1原创 2016-09-12 18:51:49 · 1526 阅读 · 0 评论 -
一个前端写的php博客系统3--文章的修改和删除
部署的地址我的博客地址:http://www.weber.pub/github 地址:https://github.com/baiyuming/byblog文章的修改文章的修改需要两步,第一步读取文章,第二步更新文章,更新完成后返回文章列表页读取博客控制器//编辑博客方法public function edit($id=0){ $Article = M('Article');原创 2016-08-09 13:35:41 · 1797 阅读 · 0 评论 -
ACM 地址
我们学各种编程语言的同学一定要来这些地方做些题看下自己的水平山东理工大学http://acm.sdut.edu.cn/南阳理工学院 http://acm.nyist.net/JudgeOnline/浙江大学 http://acm.zju.edu.cn 北京大学 http://acm.pku.edu.cn/JudgeOnline或者http://poj.org/ 天津大学 http://acm.tj原创 2016-08-20 14:00:26 · 1783 阅读 · 0 评论 -
hexo和github更配
如何在github 上搭建博客--安装hexo原创 2016-06-17 17:55:47 · 639 阅读 · 0 评论 -
【转】【译】让你的网站更炫酷的一些小 tips
原文链接 : 101 Ways to Make Your Website More Awesome 原文作者 : Nicholas Tart 译文出自 : 掘金翻译计划 译者 : 达仔 译文链接:https://github.com/xitu/gold-miner/blob/master/TODO/101-ways-to-make-your-website-more-awesome.转载 2016-07-09 09:52:37 · 1497 阅读 · 0 评论 -
CSS---Tips1文本样式
字体样式font-variant设置字体是否以小型大写字母显示。p{ font-variant: small-caps; /* 让小写字母以小型大写字母显示。*/}font字体设置简写组合方式。格式如下:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称;p{ font: bold italic 20px 楷体;}文本样式text-decoration设置文本出现下划线原创 2016-07-08 15:20:09 · 1746 阅读 · 0 评论 -
你很熟悉CSS,却没掌握这些CSS技巧
做前端开发的人都很熟悉CSS,一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成,因此CSS在开发中起到功不可没的作用,在我们频繁使用CSS过程中掌握一些技巧是必须的,本文分享了22个方便且很重要的CSS技巧,值得收藏! 混合模式 目前,Firefox 和 Safari 开始支持混合模式,就像 Photosho转载 2016-01-26 15:55:48 · 690 阅读 · 1 评论 -
让ICON生动起来 纯CSS实现带动画的天气图标
CSS3动画属性并不是很多,重点是你怎样把它运用起来并且运用好,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现。 本文想和大家分享一个比较有创意、实用的CSS天气图标动画,静态的天气图标看上去是很呆板,若加上动画,看起来会更加真实生动,以下例子就是很好的参考案例。 下面我们来做一个会下雨的天气图标实例,过转载 2016-01-26 15:41:33 · 3213 阅读 · 0 评论 -
CSS各行变色
#list1 li:nth-of-type(odd){background:#00CCFF;}/*奇数行*/#list1 li:nth-of-type(even){background:#FFCC00;}/*偶数行*/#list2 li:nth-child(4n+1){background:#00CCFF;}/*从第一行开始算起 每隔4个(包含第四个)使用次样式*/#list00000 l原创 2015-07-14 18:40:04 · 673 阅读 · 0 评论 -
DIV+CSS解决IE6,IE7,IE8,FF兼容问题
DIV+CSS解决IE6,IE7,IE8,FF兼容问题1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. 2.2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px!important;/*IE7,IE8,FF转载 2015-07-07 20:41:24 · 345 阅读 · 0 评论 -
如何在行内书写hover
onmouseover="this.style.cssText='position: absolute;margin-top: -166px;width: 200px;height: 60px;font-size: 25px;color: #FE852A;background-color: #1874BD;border: 2px solid #FE852A;border-radius: 4px;-原创 2015-07-10 15:43:52 · 19989 阅读 · 11 评论 -
CSS 设置圆角div和阴影效果
css 设置 div和图片 的圆角及阴影效果原创 2015-02-12 10:56:22 · 2877 阅读 · 0 评论 -
设置背景图的自适应
background-image: url(../images/bodybg.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%;原创 2015-07-07 18:53:56 · 354 阅读 · 0 评论 -
CodeIgniter 入门
如果您是一位 PHP 开发人员,在使用 PHP 编程语言时不难发现:大型项目可能会变得复杂。这并非 PHP 的缺点。是的,这种语言提供了丰富的特性,而且具有足够理想的弹性,可区分程序员之间的工作成果。在这种意义上,PHP 类似于 Perl,这是一些人喜欢它(而其他人鄙视它)的原因之一。任何曾经查看过遗留 PHP 项目的有经验的 PHP 开发人员都可以轻松判断出不同开发人员在项目不同阶段的工转载 2015-04-17 10:22:44 · 567 阅读 · 0 评论 -
使用jq+ajax向后台提交select input中的数据
1、html代码 做法: 清蒸 红烧 松子 干烧 口味: 2、jq代码function checkZuo(v){ alert(v); if(v) { $.post(api_url + "/main/addmenu", {zuofa: v}, 'json');原创 2015-05-09 10:23:57 · 3591 阅读 · 0 评论 -
图片横向自动滚动显示
css 文件@charset "utf-8";/* CSS Document */body,td,th { font-size: 12px; color: #666666;}img{ border:0px;}body { margin-left: 0px; margin-top: 35px; margin-right: 0px; margin-bottom: 0p原创 2015-04-03 12:55:34 · 547 阅读 · 0 评论 -
前端页面js调试
最近做前端的调试,很头痛。。。学的不好。。。。js代码调试思维一定要清晰,多尝试几次alert 还有先后顺序的问题原创 2015-03-04 11:27:03 · 452 阅读 · 0 评论 -
纯html版+jq版文字滚动效果
纯html版+jq版文字滚动效果原创 2015-02-15 13:08:43 · 685 阅读 · 0 评论 -
css中的content: "." 有什么用?为什么要用他?
有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV导致不能被撑开,在应用clearfix的元素的结尾添加content中的内容,就达到了撑开容器的目的 这段代码中的content: ".";有什么用,解决了什么问题,为什么要用他?.clearfix:after {clear: both;content: ".";display: block;he原创 2015-07-28 23:15:48 · 1164 阅读 · 0 评论 -
div靠底边对齐
margin-bottom是底部边距的意思,不是靠底部对齐... 先将容器的position设为relative; 然后将这个div的的样式添加position:absolute; bottom:0;原创 2015-07-28 23:14:48 · 17677 阅读 · 0 评论 -
position:absolute绝对定位能不能使之相对于容器右对齐?
如果要将绝对定位元素相对父元素定位,就必须设置父元素为相对定位,如: .a{position:relative;background:green;} .b{position:absolute;right:0;top:0;background:red;}父元素,net920com ,其它一些内容。子元素原创 2015-12-04 11:10:45 · 4655 阅读 · 0 评论 -
30+实用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档。除了那些解决常见的恼人的问题外,也包含了一些解决新问题的新技术。 1. 垂直对齐 如果你之前遇到过这个问题,你就应该知道它是多么的烦人,幸运的是,现在你可以使用CSS转载 2015-12-22 13:24:19 · 831 阅读 · 0 评论 -
40个重要的HTML5面试题及答案
内容介绍SGML(标准通用标记语言)和HTML(超文本标记语言),XML(可扩展标记语言)和HTML的之间有什么关系?什么是HTML5?为什么HTML5里面我们不需要DTD(Document Type Definition文档类型定义)?如果我不放入 标签,HTML5还会工作么?哪些浏览器支持HTML5?HTML5的页面结构同HTML4或者更前的HTML有什么区别?HTML5中的dat转载 2015-12-22 09:37:07 · 1993 阅读 · 0 评论