admin管理员组文章数量:1605775
技巧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/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>
转载于:https://wwwblogs/iifranky7/p/5296135.html
版权声明:本文标题:CSS常用十大技巧 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1728491134a1160424.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论