技巧1 去掉网页超链接的下划线
去掉网页超链接的下划线,在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
a { text-decoration:none}
a:hover{ color:#33d; text-decoration:underline}
-->
</style>
技巧2 设置浮动背景
设置浮动背景,在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
body{ background-image: url(image/bgimg.png); background-attachment: fixed}
-->
</style>
技巧3 正确对齐文本
有时需要对一段文本的左右、上下边距(指文本至浏览器边框的距离)加以指定,以使文本正确对齐,CSS(层叠样式表)可以提供这样的功能。
在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
.alignment{ margin-left: 68px; margin-right: 70px; margin-top: 69px; margin-bottom:71px }
-->
/* 可以缩写成margin: 69px 70px 71px 68px; */
</style>
技巧4 超链接访问过后防止hover样式出现问题
超链接访问过后为了防止hover样式出现问题,可以在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
a:link{
color:red
}
a:hover{
color:blue
}
a:visited{
color:green
}
a:active {
color:orange
}
-->
</style>
技巧5 解决list-style-image无法准确定位的问题
解决list-style-image无法准确定位的问题,在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
li {
list-style:url("http://www.hjwen.cn/images/listnon.png");
}
li a {
position:relative;
top:-5px;
font:12px/25px 宋体;
}
-->
</style>
解决的方法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。
技巧6 让文本垂直居中
让文本垂直居中,在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
div {
height:50px;
line-height:50px;
border:1px solid #960;
}
-->
</style>
技巧7 使一个层垂直居中浏览器
使一个层垂直居中浏览器,在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
div {
position:absolute;
top:70%;
left:50%;
margin:-150px 0 0 -150px;
width:200px;
height:200px;
border:1px solid #06f;
}
-->
</style>
技巧8 给部分内容加上边框
给部分内容加边框,在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
.style1 {
border:solid;
border-width:thin0px0pxmedium;
border-color:#09c #000 #000 #c90;
}
-->
</style>
技巧9 让div横向排列
在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
div {
float:left;
width:200px;
height:100px;
border:1px solid blue
}
-->
</style>
<div>div横向排列</div>
<div>div横向排列</div>
<div>div横向排列</div>
技巧10 巧妙设置滚动条颜色
在<head>与</head>之间相应的位置输入以下代码。
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff000;
scrollbar-shadow-color:#e0e;
scrollbar-arrow-color:#ccc000;
scrollbar-track-color:#dec;
scrollbar-darkshadow-color:#fffddd;
}
-->
</style>