网站常用效果

原创 2016年05月30日 10:29:12

设置透明度:(不影响层内容)background-color:rgba(255,255,255,0.15);

蓝色三角形:

.caret { width: 0;height: 0; border-width: 0 20px 20px; border-color: transparent transparent blue;border-style: none dotted solid;}

<div class="caret"></div>

修改input  readonly的样式

input[readonly]{}

最多显示两行,超出后显示...的写法:
    word-wrap: break-word;//可不写,这是英文单词换行的写法。
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

文字换行问题:
强制换行
    word-break: break-all;   只对英文起作用,以字母作为换行依据。
    word-wrap: break-word;   只对英文起作用,以单词作为换行依据。
    white-space: pre-wrap;   只对中文起作用,强制换行。
禁止换行
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 
chrome中input输入框背景为黄色:
-webkit-box-shadow: 0 0 0px 1000px white inset;


返回Top的写法:
$("html,body").animate({scrollTop:0},1000);
$("html,body").animate({scrollTop:$("#qy_name").offset().top},1000);//1000是ms,也可以用slow代替

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS 实现3D立体效果的首页轮播图(瞬间让你的网站高大上,逼格满满)

JS 实现3D立体效果的图片幻灯切换 html {background:#000} body, ul {margin:0;padding:0} li {list-style:none}...
  • cometwo
  • cometwo
  • 2016年01月03日 15:09
  • 7983

你也可以做一个小米魅族网站(WOW.js:WOW.js – 在页面滚动时展现动感的元素动画效果)

简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WO...
  • cometwo
  • cometwo
  • 2016年08月13日 17:45
  • 3059

机器学习 & python 使用k-近邻算法改进约会网站的配对效果

参考自:《Machine Learning In Action》第二章 ##############################################################...

初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果

了解到Javaweb的开发过程中一般都会涉及到前端的内容,所以这两天在网上找了一些前端的教程,对HTML、CSS和JavaScript有了一些基本的认识,这是自己尝试着写的一个小东西,全当练手了。功能...

seo能为企业网站带来哪些效果?

对于企业站来说seo对企提升企业站质量是非常明显的,也能使企业站对搜索引擎越来越友好,从而获取不错的排名,seo为企业网站带来的效果具体有以下: 1、通过seo,是企业站更有益于搜索引擎抓取和索引,...

经典网页设计:使用颜色滤镜效果的20个网站

大的背景图像已经成为了今年网页设计的趋势。在图像排布文本和按钮并很好的搭配相当具有挑战性。因此,设计师使用创意的 Photoshop 滤镜和渐变来在图像上创建一个遮罩,并在其上放置其他的网页设计元素。...

资源下载类网站-点赞效果

当我们去资源类的网站下载资源的时候有时候感觉某一个资源是你找了很久才找到的,可能一激动你就赏赞,我一般不会干,还不如赶快下载好资源呢,哈哈哈哈哈 不过一直很好奇这样的点赞下效果是怎么完成的,今天就搞...

使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表

在线演示  本地下载 今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表,将使用jQuery的jQuery Flip插件来实现特效。 HTML代码 这里我们使用socialwra...
  • jjfat
  • jjfat
  • 2012年04月10日 22:09
  • 930

[JS,NodeJs]个人网站效果代码集合

1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/中间部分...

仿商业网站——商品评分效果实现【提高篇】

看过之前的那一篇仿商业网站——商品评分效果的实现,就可能发现之前的那种实现方式还差一点点效果:就是当每个星星被focus的时候,星星最好有动态的变化,如下图: 鼠标focus后,星星的状态: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网站常用效果
举报原因:
原因补充:

(最多只允许输入30个字)