网页制作的几个小技巧

以下写到的几个demo是我要用时，从网上找到的一些例子加以改进（也有直接照抄的)，记录一下，以备后用

1.给input输入框添加小图标

实现思路：使用一个div包裹input，设置div的background为要使用的小图标即可：

.icon-div {
border:solid 1px #ccc;
width:200px;
height:30px;
}
.icon-div input{
float:left;
border:none;
background:none;
height:26px;
padding-top:5px;
padding-bottom:5px;
width:100%;
padding-right:30px;     //防止覆盖右侧小图标

border:none;
text-indent:5px;	//首行缩进

}

如上，在div中嵌套一个input，设置input的border为none，通过设置div的border来模拟input输入框，然后设置背景图片为小图标



得到效果图



2.弹出层从左往右滑动

注意事项：js自定义弹出层时，应该直接将div作为body的子元素，然后使用绝对定位：position：absolute；通过js获得各种位置来设定div的属性即可；

弹出层滑动函数：Jquery.animate(params, speed, callback);

params 为一组包含作为动画属性和终值的样式属性和及其值的集合。即是最终要达到的状态的各属性值

callback为动画完成时的回调函数。



3.使用css制作三角形

原理：利用border的交汇点形成的三角形来制作，css代码如下：

.triangle

{

height:0px;

width:0px;

border-top: 40px solid #000;

border-left: 40px solid transparent;

}

<div class='triangle'></div>

得到的效果图如下


4.自定义导航条

bootstrap有自导导航条，但是要修改其高度和样式的时候比较麻烦

自定义的导航条css如下：

.mynavbar{
font-family:Arial, Helvetica, sans-serif;
display:inline;
font-size:14px;
color:#CCCCCC;
padding:0px;
background:#000;
height:40px;
line-height:40px;
border-bottom:1px solid #000;
}
ul{ list-style:none; padding:0px;}
ul>li{
display:inline-block;
}
ul>li>a
{
padding:8px 10px 8px 10px;
color:#999999;
font-weight:600;
}
ul>li:hover, ul>li:focus,
ul>li>a:hover, ul>li>a:focus
{
color:#fff;
text-decoration:none;
}

<pre class="html" name="code"><div style="float:right;" class="mynavbar">
<ul>

<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contribution</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About us</a></li>
<li> </li>
</ul>
</div>

效果图如下：