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

CSS常用十大技巧的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. 十大技巧快速提升原生APP开发性能

    移动应用市场用户争夺战日益激烈,原来做APP拼想法拼创意拼是否抓住用户痛点.现在,精细化用户体验成为了一个APP能否留存用户的关键问题,一旦用户觉得体验不畅,马上就有竞品APP后补,如何开发高性能的移 ...

  3. 让PHP开发者事半功倍的十大技巧

    如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪,但是你肯定从内心深处明白,这不是冲浪的正确选择.同样的道理也适用于PHP编程,尽管这样的类比听起来有一些古怪.我们经常听到有人 ...

  4. xshell十大技巧

    xshell是我用过的最好用的ssh客户端工具,没有之一.这个软件完全免费,简单易用,可以满足通过ssh管理linux vps所有需要,唯一遗憾的是没有官方中文版. 警告:不要下载所谓的汉化版,可能有 ...

  5. jQuery Mobile高手必备的十大技巧和代码片段

    与任何新技术一样,常常难就难在如何开始入手. 有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧.方法和代码片段. 由于本文不是旨在全面介绍使用jQuery Mobile ...

  6. 设计移动App的十大技巧

    编写一款Android或iOS应用也许很容易,但是若想设计的成功却不是一件简单的事,用户界面对于一款移动应用的成功是至关重要的.也许你会说,为何界面那么糙的Flappy Bird可以大红大紫,可那毕竟 ...

  7. 十大技巧优化Android App性能

    无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的. 那么,如何能开发出更高性能的Android App?相信是软 ...

  8. 优化Android App性能？十大技巧必知！

    无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件 ...

  9. MySQL优化十大技巧

    转自:https://m.2cto.com/database/201701/557910.html MYSQL优化主要分为以下四大方面: 设计:存储引擎,字段类型,范式与逆范式 功能:索引,缓存,分区 ...

随机推荐

  1. cogs 自己出的题目 题解报告

    第一题很简单嘛,就是裸的动态树分治嘛 对于每一层的重心维护子树路径的信息和子树到上一层重心的点的信息 空间复杂度O(nlogn) 对于每一层我们按dis排序,之后记录军队数量的前缀和 查询的时候我们只 ...

  2. 47. Permutations II

    题目: Given a collection of numbers that might contain duplicates, return all possible unique permutat ...

  3. 2、@RequestMapping注解的用法

    @RequestMapping有如下属性值:

  4. 转 Difference between WCF and Web API and WCF REST and Web Service

    http://www.dotnet-tricks.com/Tutorial/webapi/JI2X050413-Difference-between-WCF-and-Web-API-and-WCF-R ...

  5. 学习webView控件使用

    WebView 对象用于网页显示使用,简单的学习并使用了一下. 1.首先在 layout 中摆一个全屏的 webview 控件 (main.xml ) <?xml version="1 ...

  6. IOS ARC与非ARC混合编译

    要开启ARC的:-fobjc-arc不开启ARC的:-fno-objc-arc 是否使用arc: 在build setting里找automatic reference counting,YES/NO

  7. mysql备份恢复数据库据/表

    备份单个数据库,只备份表,如要恢复,必须先创建一个数据库[root@s]# mysqldump -u root -p dbname1 > dbname1.sql[root@s]# mysql - ...

  8. awk 传入外部参数

    awk 传入外部参数 num1=1.1 num2=2.2 result=$(awk -v n1=$num1 -v n2=$num2 'BEGIN{print (n2>n1)?1:0}')

  9. linux中压缩与解压缩命令小结

    linux中压缩与解压操作非常常见,其命令参数也非常的多,这里只介绍最经常用的带打包文件的几种压缩和解压方式和几个最常用的参数. 现在最常用的压缩和解压工具是gzip和bzip2,这两种工具不能相互解 ...

  10. 对List顺序，逆序，随机排列实例代码

    ackage  Test; import  java.util.Collections; import  java.util.LinkedList; import  java.util.List; p ...