html+css小技巧收集

 

1.鼠标移上去是出现一个window的保存收藏打印的那个小框框,能不能限制它的出现?

1. 在HEAD中加入
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

2. 图片上用新属性galleryimg
<img width=500 height=500 src=a.gif galleryimg="no">


3.div实现滚动条
(某些情况下可以替代iframe)

<style>
.gb { overflow:auto; white-space:normal; height:100px; padding:3px;}
</style>
<div class="gb"></div>
其中高度height和overflow是必须设置的!
ps:在IE下有的时候水平滚动条会出来,但是事实上,水平滚动条不没有实际的用途,貌似这个是IE的bug,解决方法:
overflow-x: hidden

加上这个.把水平滚动条隐藏掉~

4.用css来实现三角形

<style>
.t{
width:50px;
border-style:solid;
border-color:#a6a2f7 #fff;
border-width:50 50px 0px 50px;
}
</style>
<span class="t"></span>

5. 用vml来画圆角...

<html xmlns:v>
<head>
<style>
v/:* {behavior: url(#default#VML);}
#lone {
width:200;
height:70px;
}
</style>
</head>
<body>
<v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">
<!--arcsize 弧度值 fillcolor 圆的填充色 strokecolor 圆的边框色 strokeweight 边框大小-->
</body>
</html>

6 . IE下,当使用了FLOAT之后.用margin-left和margin-right 会变成用双倍的数值
例子:
margin-left:10px; 实际的效果是20PX;
解决的方法:(1),用display:inline;(2)用clear:float
方法1适应的范围比较广一些,(2)的话.只适合那些可以清除浮动的元素.不能清除的,不能用~


7.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

8.IE5和IE6的BOX解释不一致IE5下

div{width:300px;margin:0 10px 0 10px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

这个/**/是IE5和firefox都支持但IE6不支持.

9.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}


10。div+css布局用了float之后背景不能延伸的解决方案

<div style="clear: both; font-size: 0;"></div>

原因:背景的自适应高度并不继承float的高度,背景会继承float底线所在容器中的位置高度,所以背景一定会找到最后一个标签去测定,这样我们在如上的标签,这个标签中什么也不放。也就是一个没有高度的空容器,这样它就可以把背影拉下来了。


11.用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/

IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数。

12.未知大小的图片在一个已知大小容器中的水平和垂直居中
这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE分别写了二套简单的样式。

IE使用inline-blocks,非IE使用table-cell and vertical-align。
CSS

/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}<!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->

xhtml

<div class="holder"><span id="edge"></span> <span id="container"><img src="graphics/homework.jpg" alt="" /></span>
</div>


13 .在IE里面元素浮动之后.原来的边距(margin)会加倍,但是FF等就不会.
解决方法
在浮动的元素的代码中加入:display: inline;,可使浮动被忽略,IE中不至于产生双倍距离.

14. 首页下沉的效果:
.post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; line-height:1em; font-family:"楷体_GB2312"; font-weight:bold; color:#b00;}

15.半透明的效果
<div style="width:100px;height:100px;background-color:#f00;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/">
我在任何浏览器里都是半透明的
</div>

16.去掉点击链接时出现的虚线框
IE下 :<a href=http://www.huaise.cn hidefocus="true">试一试</a>

FF下:直接给标签 a 定义样式 outline:none; 就可以了,即:

a {
outline:none;
}

17.Flash背景透明

//IE
<param name="wmode" value="opaque" />
//ff在<embed>标签内添加
menu="false" wmode="transparent"

17. 行内强制断行 ,且在允许英文单词内断行

white-space:normal;word-wrap:word-break;word-wrap


18.浮动或者改变ol的默认内外补丁值之后引起的序号丢失

list-style-position:inside
/*默认情况下他的属性是outside*/

如果你没有声明或给li列表项设置了宽度,可能会出现不按顺序显示的奇怪现象 全部是1的情况,
解决的方法是去旧li的宽度声明,或将宽度属性的值设为auto。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于web基础的投票网站是一个允许用户进行投票和查看投票结果的网站。实现这个网站,我们可以使用HTMLCSS和JavaScript来完成。 首先,我们需要创建一个HTML页面来构建网站的基本结构。可以使用``<header>``、``<nav>``、``<section>``和``<footer>``等标签来划分页面的不同部分。用户可以在页面的顶部导航栏中选择不同的投票选项。 接下来,我们需要使用CSS来美化页面,使其更加吸引人。可以设置背景颜色、字体、边框等样式来增加网站的可读性和吸引力。同时,还可以使用CSS布局技巧来优化页面结构,使其在不同大小的屏幕上都能良好显示。 然后,我们需要使用JavaScript来实现投票的功能。可以通过监听用户的点击事件来获取用户的投票选择。在收集到所有用户投票之后,我们可以使用JavaScript来计算每个选项的得票数,并将结果显示给用户。 为了提高用户体验,我们可以使用一些JavaScript库或框架来实现一些高级的功能。例如,可以使用AJAX技术来使投票结果实时更新,而不需要用户刷新整个页面。还可以使用JavaScript库来创建动画效果或实现用户交互。 最后,为了保障网站的安全性和可靠性,我们需要进行一些必要的安全措施。例如,可以对用户输入的数据进行验证和过滤,以防止代码注入等安全问题。另外,还应该添加适当的用户权限管理功能,以确保只有授权用户才能进行投票操作。 总结来说,基于web基础的投票网站使用HTMLCSS和JavaScript来实现网站的基本结构、样式和交互功能。通过合理运用这些技术和工具,我们可以创建一个功能完善、美观实用的投票网站。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值