总结项目开发中用到的一些css\html技巧

这篇就是用来总结记录的，会长期更新。

1，半透明背景效果（#ffffff颜色的半透明背景）：

	 font-style: italic;">#ffffff;
	filter:alpha(opacity=60);
	opacity:0.6;

2，链接样式设计，可以控制点击前样式，鼠标悬挂在链接上时候的样式：

#h_pic a:link {
	text-decoration:none;
        color: black;
}

#h_pic a:visited {
	text-decoration:none;
         color: black;
}

#h_pic a:hover {
	/*text-decoration:underline;*/
	color:green;
}

#h_pic a:active {
	/*text-decoration:underline;*/
	color:green;
}

3，设置div高度，若div里面内容超过这个高度，则隐藏：

	height:400px;
	overflow:hidden;

4，圆角边距：

	/*圆角边距*/
	border:2px solid;
	border-radius:15px;
	/* Old Firefox */
	-moz-border-radius:25px; 

5，对齐问题（居中，左对齐，右对齐）：

当一个div在另一个div中时,可以简单用float来向左或向右对齐：

       float:left;
       float:right;

一般对一段文字来说，居中对齐只需要：

	text-align:center;

如果是div，居中对齐需要：

	/*placed at middle*/
	text-align:center;
	margin:0 auto;

在左右居中情况下，定位上边距就无法用margin-top了，这时需要设置相对定位：

	position:relative;
	top:100px;
	/*placed at middle*/
	text-align:center;
	margin:0 auto;

6,手机端网页自适应，需要插入如下html标签，效果就是在手机浏览器显示，页面是横向按比例压缩的，如果配合bootstrap使用效果更佳，否则，只能用于页面简单的登录页一类。

日向博客就是这样做的：

     	     <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
             <meta name="apple-mobile-web-app-capable" content="yes">
             <meta name="apple-mobile-web-app-status-bar-style" content="black">
             <meta name="format-detection" content="telephone=no">

7,图片与文字在一个div中，要达到文字沿图片右边缘对齐的效果

只需设置img向左流动。

    .h_pic{
       float:left;
       height:48px;
       width:48px;
       margin-top: 3px;
       margin-right: 5px;
       border: 1px solid #ccc;
     }

8，开发日向博客经常会遇到这类问题，在文章中写了url时，页面显示时会把原有格式撑开，而不是及时换行。尤其手机屏幕比较窄情况。这种情况只需添加下面这两句：

    word-wrap:break-word;
        word-break:break-all;

如果是图片的话，就设置overflow:hidden;就好了，溢出则隐藏。

9, 实现点击链接调用对应javascript函数：

    <a href="javascript:void(0)" onclick="logout()">退出</a>

传递参数的情况，千万不要忽略下面单引号：

 <a href="javascript:void(0)" onclick="quote_commoent('${comment.content}')">引用</a>

10, 响应式页面。

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

前者是为了兼容IE，后者是指字体不会随屏幕变小而变小。

@media screen and (max-width : 500px){
    #poem
    {
        display:none;
    }
    #passwd
    {
        background-color:white;
        filter:alpha(opacity=60);
        opacity:0.6;
    }
}

@media screen and (min-width: 501px) {
    #poem
    {
        font-family: KaiTi;
        color:white;
    }
    #passwd
    {
        background-color:#ffffff;
        border: 1px solid black;
        padding: 80px;
        filter:alpha(opacity=60);
        opacity:0.6;
    }
}

这种写法才能体现不同屏幕大小时样式的差异，实现响应式。