CSS常用十大技巧

时间:2021-12-21 05:49:50

技巧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>