Html+Css应用
高达一号
这个作者很懒,什么都没留下…
展开
-
Html+CSS__margin 负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改。 负数给人总是一种消极、否定、拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用。这里说的负值主要指的是负margin。 关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2转载 2015-11-17 14:35:28 · 4456 阅读 · 0 评论 -
Html+CSS CSS(CSS3) 3种清除浮动的方法
应用DivCSS网页布局,经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。下面看今天的教程,此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景。*{margin:0;padding:0;}body{font:36px bold; color:#F00; edui转载 2016-03-22 16:39:43 · 3873 阅读 · 0 评论 -
Html+CSS text-indent 意义 负值用法与注意事项
为了语义化,我们可能会利用图片替换文字的方式来给我们的站点增色,举个栗子: 文字文字 p { text-indent: -2500px; // 小,在高分辨率宽屏下文字隐藏失败 //text-indent: -99999px; // 大,但可能存在性能问题,甚至被搜索引擎屏蔽转载 2016-02-15 15:17:00 · 2561 阅读 · 0 评论 -
CSS行高——line-height 文本的垂直居中(display:block;情况下)
初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识:顶线、中线、基线、底线DOCTYPE html>html> head>原创 2016-03-22 20:07:31 · 6274 阅读 · 0 评论 -
Html+CSS 疑难杂症一 Chrome记住密码后黄色背景 的解决方法
chrome 表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:input : -webkit-autofill {background-color : #FAFFBD ;background-image : none ;colo转载 2016-03-23 14:08:54 · 5585 阅读 · 0 评论 -
Java_Html_杂七杂八_路径中有/和无/的区别,../和./的区别
Java/Html中 有/ 和 无/ 的区别。Java项目中:不加 / 就是获取的当前路径,加 / 就是从根目录 获取子路径(根目录为WebRoot)。解释:通常在获取Resource的时候都是获取的不加斜杠的路径,所以如果想获取子路径,需要先添加”/“,之后在增加相应的路径。Html 项目中:原创 2015-11-26 10:45:48 · 1652 阅读 · 0 评论 -
前端_前端招聘面试题(1)
复制下链接:1. 较为基础(编程方面) http://finalshares.com/read-76892. 深度解析(整体思路) http://www.finalshares.com/read-7710?qq-100转载 2016-03-21 15:47:48 · 761 阅读 · 0 评论 -
Html+Css_div中的垂直居中布局
CSS中的vertical-align可以实现垂直居中布局,但是1.它只对行内元素即 display:block 的元素起作用,而对块级元素即 display:block 的元素并不起作用。2.它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像、这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。 但原创 2015-11-01 16:29:10 · 2243 阅读 · 0 评论 -
Html+CSS_居中布局的总结
学前端有一段时间了,居中布局是日常经常遇到的问题,在此对居中布局进行一个总结。水平居中垂直居中1.2.3.利用定位(position)实现 水平 垂直 居中根据 CSS权威指南 中对浮动元素的一些定位性质:在父元素不受限的情况下:父元素的width = 子元原创 2016-05-09 18:57:44 · 1750 阅读 · 0 评论 -
Html+CSS CSS浮动
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图:可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。注意,以上这些理论,是指标准流中的div。无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。显然标准流已经无法满足需求,这就要转载 2016-03-22 16:12:39 · 548 阅读 · 0 评论 -
Html+CSS 文本的强制换行
作为一个成长的菜鸟,总是不断遇到各种问题,今天博主遇到了一个问题。对于一般的div 自要设置了width; 如果容器里面的文字过多,则文章就会自动换行,但是如果输入连续的英文字符,则设置的width 不会生效,容器会被撑开。如博主去查了些资料,找到了原因:一般div超过宽度能换行,原因如下:对于div,p等块级元素正常文字的换行(亚洲文字原创 2016-04-01 15:27:07 · 35246 阅读 · 1 评论 -
Html+CSS 多列等高布局 padding补偿法 《精通CSS高级WEB标准解决方案》读书笔记
今天博主看了一种多列等高布局的方法,分享给大家。主要思想:原理:这种技术的关键是给每个框设置大的底内边距,然后用数值相似的负外边距消除这个高度。这会导致每个列溢出容器元素。如果把容器的overflow属性设置为hidden,列就在最高点被裁切。知识背景:1.background 会填充内边距 padding,而不会填充外边距 margin 。2.通过 overflow:hi原创 2016-03-31 23:14:34 · 2621 阅读 · 0 评论 -
Html+CSS input type=file 文件类型限制属性 accept (HTML 5)
网页上添加一个input file HTML控件:1input id="File1" type="file" /> 默认是这样的,所有文件类型都会显示出来,如果想限制它只显示我们设定的文件类型呢,比如“word“,”excel“,”pdf“文件 解决办法是可以给它添加一个acc原创 2016-03-31 12:06:40 · 17843 阅读 · 1 评论 -
Html+Css_相对于父div进行相对布局
对 父div 进行相对布局需要用到 postion 属性, 需要将父元素设置为relative, 并将子元素设置为absolute,此时不管进行放大缩小排版不会混乱position属性请参见W3shool截图如下:核心代码:.company_board{ position: relative; background-color: #999999;原创 2015-11-01 21:12:32 · 16047 阅读 · 1 评论 -
Html+Css__利用Css_Positon_fixed_实现的简单的浮动划窗
设置相对于浏览器定位的悬浮窗需要设置 position:fixed , 即相对于浏览器定位。并可利用:top, right, bottom, left进行设置。 截图如下:核心代码:/*边栏的属性*/.board_aside{ position: fixed; top:40%; left:90%;原创 2015-11-02 09:31:16 · 1751 阅读 · 0 评论 -
Html+Css_ 行内元素与块级元素比较全面的区别和转换
引言 一次偶然的面试遇到的题目,虽然当时知道块级元素和行内元素的区别,但是没有仔细去想。一、行内元素与块级元素块级元素列表定义地址定义表格标题定义列表中定义条目定义文档中的分区或节定义列表定义列表中的项目转载 2015-11-01 16:34:30 · 2781 阅读 · 0 评论 -
Html+Css_利用img 的usemap属性 和 map 以及 area(list) 对图像敏感区域定位
1.利用img 的usemap属性,利用usemap对应到map的name或者id。2.并在map标签里面嵌套多个area标签。3.不同的area里面的href 属性 以及相对于图像原点(0,0)的coords 属性不一致,可以实现不同区域定位到不同的网址。W3C原理讲解如下核心源码:纯html实现:原创 2015-11-02 11:28:47 · 5612 阅读 · 0 评论 -
Html+Css 纯CSS实现的导航 (精通CSS高级WEB解决方案)读书笔记
今天看书学习了纯粹的CSS实现的简易导航。实现效果如下:整体思路:1:二级导航基本思路:第一级 ul 的 li 中嵌套 第二级 的ul 与li , 并对 ul 设置 float:left ,让其中的 li 水平显示, 更改其默认垂直显示的行为。2:(核心代码)导航的浮动与隐藏: 将二级导航的li 初始时 进行 absolute 定位(相对于上一个已定位元素原创 2016-02-15 11:05:51 · 882 阅读 · 0 评论 -
Html+Css 纯CSS实现的文字提示 (精通CSS高级WEB解决方案)读书笔记
今天看了纯CSS实现的文本段落导航,特此记录一下:实现效果:基本思路:1.将要被提示的部分设置为position:relative; 相对于文档流进行偏离。 提示的内容设置为position:absolute; 脱离文档流进行定位(可以起到遮盖的效果)。 初始状态时,display:none; 将提示内容隐藏。 当鼠标悬浮的时候,利用伪类选择器, 将内原创 2016-02-15 12:01:54 · 1385 阅读 · 0 评论 -
Html+Css CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了。今天总算搞懂了,一定要记下来。在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%;上面这三句语句,都将转载 2016-02-15 14:58:56 · 25248 阅读 · 2 评论 -
Html+Css 链接状态变换的单图片实现(精通CSS高级WEB解决方案)读书笔记
需求 链接, 在点击,悬浮,访问过后需要进行图片的变换。常规做法; 利用伪类选择器,创建多个图片,在悬浮,点击的时候切换不同的图片高级: 上面做法存在一定缺陷,换图的时候可能出现闪烁下面讲解pixey 图片切换法(将多种状态放在一张图片中, 进行切换的时候,选择不同的位置,需要计算好尺寸)背景图如下 示例代码:原创 2016-02-15 14:39:31 · 1771 阅读 · 0 评论 -
Html+Css JavaEE highChart使用指南:
对图表的一些设置1. 图表的x轴 与 y轴互换,图表反转 : 图表反转指的是将图表的 x轴和 y轴进行对调操作,对应的只需要设置 chart.inverted = true 即可。示例: $(function(){ $('#container').highcharts({ chart: { type: 'column',转载 2016-03-16 16:42:51 · 682 阅读 · 0 评论 -
Html+CSS input type=file 文件标签的美化
2016-3-30 (HTML5)在页面上进行上传文件,大家都会用到 进行文件的上传,但是这么样会出现一个问题,如最简单的文字定制。不能通过value 设置值。这时候我们我们就遇到了上传按钮优化的问题。主要思路,给出一个 文本输入框 和 按钮 两个按钮,分别完成 原来的文字显示(按钮) 与 上传文件路径的显示(文本输入框的功能)。以下给出两种方式,原创 2016-03-30 14:15:54 · 23817 阅读 · 0 评论 -
Html+CSS hack技术介绍 以及常用hack
一、什么是CSS Hack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。1、属性级Hack:比转载 2016-03-22 20:44:05 · 1193 阅读 · 0 评论