技巧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. Hibernate中createCriteria即QBC查询的详细用法 .Hibernate中createCriteria即QBC查询的详细用法 .

    现在假设有一个Student类,内有id,name,age属性String hql = "from Student s";按照以前的做法,我们通常是Query query = se ...

  2. 汉诺塔算法的递归与非递归的C以及C++源代码

    汉诺塔(又称河内塔)问题其实是印度的一个古老的传说. 开天辟地的神勃拉玛(和中国的盘古差不多的神吧)在一个庙里留下了三根金刚石的棒,第一根上面套着64个圆的金片,最大的一个在底下,其余一个比一 个小, ...

  3. Eclipse,IDEA自动生成相应对象接收方法返回值的快捷键

    @Service public class ItemServiceImpl implements ItemService { @Autowired private TbItemMapper itemM ...

  4. C++：String类

    String类 1.使用String类必须在程序的开始包括头文件string,即要有如下语句:#include<string> 2.string类字符串对象的使用方法与其他对象一样stri ...

  5. Android IllegalStateException: The specified child already has a parent问题解决办法

    最近遇到一个很让人头疼的问题,使用viewpager动态添加页面或者删除页面时出现了问题(java.lang.IllegalStateException: The specified child al ...

  6. JDBC学习总结(三)

    1.ResultSet光标控制     在创建Statement或PreparedStatement时使用的是Connection的无参数createStatement()方法或preparedSta ...

  7. JNIEnv解析

    1.关于JNIEnv和JavaVM JNIEnv:线程相关的变量 JavaVM:是虚拟机在JNI层的代表, JNIEnv是一个与线程相关的变量,不同线程的JNIEnv彼此独立.JavaVM是虚拟机在J ...

  8. VS2012 professional和VS2012 Ultimate的区别

    http://www.c-sharpcorner.com/news/1750/visual-studio-2012-editions-comparison.aspx http://karthikdod ...

  9. Android布局详解之一：FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  10. hibernate 中id生成策略

    数据库的设计和操作中,我们通常会给表建立主键. 主键,可以分为自然主键和代理主键. 自然主键表示:采用具有业务逻辑含义的字段作为表的主键.比如在用户信息表中,采用用户的身份证号码作为主键.但是这样一来 ...