css 实现球里装水

【css 实现球里装水】的更多相关文章

<template> <div class="container"> <div class="wave"></div> </div> </template> <script> export default { } </script> <style lang="scss"> .container { position: abs…

有很多人做界面会经常发现设计师设计出这样的界面: 咋一看是一个文本框里加了一个按钮,经过谷歌之后,未发现在文本框里可以添加按钮. 但可以通过div来实现它. 我的做法是先做一个大小的div,然后用带里面大小的图片作为背景,然后在div中并排依次添加一个文本框.和按钮,要求按钮同时覆盖在查找图片上, 然后设置文本框和按钮的的性质属性为空即可. 我的源码为: HTML: <div class="divleft"> <input type="text"…

用DIV+CSS做网页里要设置body和*规定内容

body{}表示是对body标签的设置,就是<html><head></head><body></body></html> 里面的body. *{}表示对页面所有元素的设置,一般我们会设置*{margin:0px;padding:0px}来表示所有元素的margin和padding为0: 这两个的设置一般是为了页面标签的初始化,因为不同的浏览器默认标签有一些不同的属性.比如chrome默认li有margin-left:30px;的属性…

一张图看懂css的position里的relative和absolute的区别

position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).nherit:从父元素继承 position 属性的值.fixed:生成绝对定位的元素,相对于浏览器窗口进行定位.(即滚动浏览器的时候,元素永远固定显示在窗口可视区的某个位置). 比较常用而且会引起初学者迷惑的是absolute和r…

如何在编辑器里添加CSS或JS代码

//编辑器里代码模式下的代码 <scripttype="text/javascript"> //my code.... </script> //编辑器里可视化模式下的代码 <scripttype="text/javascript"> // <![CDATA[ //my code.... // ]]> </script> 最近在使用Wordpress做一个网站项目,需要在后台编辑器里添加自定义的JS脚本和CS…

关于css里大于号（>)的用法

之前用的css没涉及到这个问题,今天看到.知道大概用法,但不知道和普通的后代选择器有什么区别.到网上找了,其实w3c的css文档里有很详细明确的介绍(http://www.w3school.com.cn/css/css_selector_child.asp). 这里写下全做加深印象: 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector). 例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写: h1…

html5悬浮球效果

自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq做的.所以这里要引用js文件.我引用的是jquery-1.8.2.js PublicJs.js 主要是判断是否是手机端,来确定是使用点击或触摸事件用的 var PublicJs = {}; PublicJs.IsPhone = function () {//判断是否是手机浏览器 try { if (…

2015第10周五CSS—2

经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大.解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性.测试代码如下: <html> <head> <title>Demo</title> &…

css应用视觉设计

应用视觉设计:创建一个 CSS 线性渐变 HTML元素的背景色并不局限于单色.css还提供了颜色过渡,也就是渐变.可以通过background里面的linear-gradient()来实现线性渐变,下面是它的语法: background:linear-gradient(gradient_direction,颜色1,颜色2,颜色3,...) 第一个参数指定了颜色过渡的方向-它的值是角度,90deg代表垂直渐变,45deg的渐变角度和反斜杠方向差不多.剩下的参数指定了渐变颜色的顺序: 例子: bac…

CSS布局 ——从display，position， float属性谈起

页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul…

CSS中加号、星号及其他符号的作用

在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好.不幸的是, 我们并不是生活在理想的世界里,浏览器们布满了BUG和不一致.创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法.通过使用BUG和未实现的CSS,开发者就能够为不同的浏览器应用不同的规则.HACK和FILTER是开发者强有力的武器.了解各种常用的HACKS以及它们如何工作,是件重要的事,但什么时候用和什么时候不用它们,也是件同等重要的事情. CSS filter或者hack是一种代码,用来根据浏览器类型,…

ACM 找球号(一）

找球号(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0<=i<=100000000),编号可重复,现在说一个随机整数k(0<=k<=100000100),判断编号为k的球是否在这堆球中(存在为"YES",否则为"NO"),先答出者为胜.现在有一个人想玩玩这个游戏,但他又很懒.他希望你能帮助他取得胜利. 输入第一行有…

161010、在大型项目中组织CSS

编写CSS容易. 编写可维护的CSS难. 这句话你之前可能听过100次了. 原因是CSS中的一切都默认为全局的.如果你是一个C程序员你就知道全局变量不好.如果你是任何一种程序员,你都知道隔离和可组合的模块是构建可维护系统的关键. 为了试图帮助人们构建可维护的CSS,已经有很多CSS指南了:SMACSS, OOCSS, BEM, ITCSS, ACSS, CCSS,Atomic Design, Maintanable CSS, rscss, 并且可能还有更多. 那么,CSS的问题是什么? spa…

160901、在大型项目中组织CSS

编写CSS容易. 编写可维护的CSS难. 这句话你之前可能听过100次了. 原因是CSS中的一切都默认为全局的.如果你是一个C程序员你就知道全局变量不好.如果你是任何一种程序员,你都知道隔离和可组合的模块是构建可维护系统的关键. 为了试图帮助人们构建可维护的CSS,已经有很多CSS指南了:SMACSS, OOCSS, BEM, ITCSS, ACSS, CCSS,Atomic Design, Maintanable CSS, rscss, 并且可能还有更多. 那么,CSS的问题是什么? spa…

解耦HTML、CSS和JavaScript

当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需要的. 当今的一些大型互联网公司,由于越来越多的人会接触到日益增加的前端代码,它们会试图去坚持代码的模块化.这样更改程序的部分代码,并不会无意中过多地影响后续不相关部分的执行过程. 防止意想不到的后果不是一个容易解决的问题,尤其是HTML,CSS和JavaScript本质上是相互依赖的.更糟糕的是,…

CSS 声明( Declarations )

CSS 声明1可以为空,或者由 CSS 特性( property ),后加一个冒号 ":",跟着是一个特性的值构成.中间可以有空格将它们隔开. 可用以下方式表达: property : value; 其中 property 指代的是所有 CSS 特性,value 指的是这个特性的值. 例如: p{ height:100px; } 其中,height 是特性,而 "100px" 是值.CSS 声明的基础是 CSS 特性. CSS 特性( properties ) CS…

谈谈CSS的布局，display、position、float

前言前端一直是我的一个很大的缺憾,这段时间痛顶思痛,决定好好的把前台的东西加强,这不,在学习了一段时间js之后,在做一些小练习,却发现最基本的一些css知识却还不了解,所以便有了这篇博文. 块级元素与行内元素首先谈谈人们经常提及的块级元素和行级(内联)元素 p, ul, form, div等元素被称为块级元素,这些元素显示为一块儿内容(会自动换行),span, input 等元素称为行内元素,这两者主要区别就是块级元素会从上到下一个个垂直排列,每个自占一行,如下即使两个div之间没任何元素,…

解决div里插入img下边缝隙问题

<html> <head> <title> new document </title> <meta name="author" content="胡超" /> <meta charset="utf-8"/> <style type="text/css">/*解决div里插入img下边缝隙问题 1.容器div font-s…

js和css内联外联注意事项

简单说:这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!! 问题:起因是网上看到一个css的表格样式,觉得挺好看,就打算放在自己的Asp.Net程序里,开始的时候我放在aspx文件里,显示正常然后我就打算把css和js放在独立的文件里,这时候浏览器就疯掉了,显示的效果跟原先内联的时候完全不同,就好像压根没有看到我的css样式表一样,但是有部分样式又被执行了,有部分样式又被忽略了,比如表头的th…

css如何让表格table的边框为1像素呢

在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为1像素呢? 其实很简单,给table使用css样式 border-collapse: collapse; 这个样式的意思就是“为表格设置合并边框模型” 这个属性经测试,支持一下浏览器: 下面我写一个案例 CSS /*重点就是要在table上加border-collapse: colla…

nyoj 86 找球号（一）

点击打开链接找球号(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0<=i<=100000000),编号可重复,现在说一个随机整数k(0<=k<=100000100),判断编号为k的球是否在这堆球中(存在为"YES",否则为"NO"),先答出者为胜.现在有一个人想玩玩这个游戏,但他又很懒.他希望你能帮助他取得胜利. 输入第…

CSS布局 ——从display，position， float属性谈起(转)

CSS布局 ——从display,position, float属性谈起页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块…

常见前端面试题之HTML/CSS部分

转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? Doctype是document type(文档类型)的简写,是用来说明所用的XHTML或HTML是什么版本的.XHTML1.0 提供了三种DTD声明可供选择,分别是: 1.过渡的(Transitional,也叫混杂模式):要求比较宽松,允许继续使用HTML4.01的标识,完整声明为 <!DOCT…

称球问题(zt)

下面说的这个问题可能大家都看到过,它是这么描述的: 现在有n(n>=2)个球,n个球外观一模一样,但是重量有区别,其中有且仅有一个球的重量比其它n-1个球要重,现在有一个天平,天平是完好无损的,问最少需要称多少次才能确定哪个球的重量较重? 初一看这个问题,感觉有点复杂,不知道从何入手.一般情况下,解决类似的问题需要简化问题,然后从中发现规律,从而解决整个问题.可以先假设有2个球,那么称一次就可以知道哪个球重:当有3个球时,也可以通过一次称量就可以确定哪个球重,因为假如放在天平上的球一样重,那么剩…

打造自己的reset.css

http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言每每有新项目,第一步就是应当使用一个reset.css来重置样式.滥用不如不用,直接拿个现成的reset.css过来将导致后期各种离奇bug的发生.所以最好还是自己写一个reset.css,并且要明白每一条reset都是用来做什么的.reset.css本意就是重置样式,我始终建议把.clearfix放入layout…

nyoj 86 找球号(一）

找球号(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0<=i<=100000000),编号可重复,现在说一个随机整数k(0<=k<=100000100),判断编号为k的球是否在这堆球中(存在为"YES",否则为"NO"),先答出者为胜.现在有一个人想玩玩这个游戏,但他又很懒.他希望你能帮助他取得胜利.…

CSS 布局Float 【4】

一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘.浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样.<CSS Mastery>里作者画了几个图非常有意思,可以帮助我们理解浮动的表现. 不浮动 <div style="border: solid 5px #0e0; width:300px;"> …

Laravel 加载 js css image 文件

写在前面的话: 1.前提是需要使用blade模板引擎 2.css js image 文件夹建在laravel 的 public 目录下面 3.生成的路径默认都是相对路径 A: 加载css文件 (用下面的格式把正常的link替换掉) {{ HTML::style('css/custom.css') }} 在页面里生成的样子如下 <link media="all" type="text/css" rel="stylesheet" href=&q…

不容错过的20段CSS代码

Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里.或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜. 1. CSS Resets 网络上关于CSS重置的代码非常多.本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就…

CSS架构目标

擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.无需使用表格.尽可能少的使用图片.如果你是个名副其实的高手,你可以快速把最新和最伟大的技术应用到你的项目中,比如媒体查询.过渡.滤镜.转换等.虽然这些都是一个真正的CSS高手所具备的,但CSS很少被人单独拿出来讨论,或者用它去评估某个人的技能. 有趣的是,我们很少这样去评价其他语言.Rails开发人员并不会因为其代码比较规范,就认为他是一名优秀的开发人员.这仅仅是个基准.当然,他的代码得必须规范.另外,还需集合其…