CSS常用十大技巧
技巧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常用十大技巧的更多相关文章
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- 十大技巧快速提升原生APP开发性能
移动应用市场用户争夺战日益激烈,原来做APP拼想法拼创意拼是否抓住用户痛点.现在,精细化用户体验成为了一个APP能否留存用户的关键问题,一旦用户觉得体验不畅,马上就有竞品APP后补,如何开发高性能的移 ...
- 让PHP开发者事半功倍的十大技巧
如果你使用一面大镜子作为冲浪板会发生什么?或许你会在较短的时间内征服海浪,但是你肯定从内心深处明白,这不是冲浪的正确选择.同样的道理也适用于PHP编程,尽管这样的类比听起来有一些古怪.我们经常听到有人 ...
- xshell十大技巧
xshell是我用过的最好用的ssh客户端工具,没有之一.这个软件完全免费,简单易用,可以满足通过ssh管理linux vps所有需要,唯一遗憾的是没有官方中文版. 警告:不要下载所谓的汉化版,可能有 ...
- jQuery Mobile高手必备的十大技巧和代码片段
与任何新技术一样,常常难就难在如何开始入手. 有鉴于此,我们整理出了与jQuery Mobile库有关的我认为最便利的一些技巧.方法和代码片段. 由于本文不是旨在全面介绍使用jQuery Mobile ...
- 设计移动App的十大技巧
编写一款Android或iOS应用也许很容易,但是若想设计的成功却不是一件简单的事,用户界面对于一款移动应用的成功是至关重要的.也许你会说,为何界面那么糙的Flappy Bird可以大红大紫,可那毕竟 ...
- 十大技巧优化Android App性能
无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的. 那么,如何能开发出更高性能的Android App?相信是软 ...
- 优化Android App性能?十大技巧必知!
无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件 ...
- MySQL优化十大技巧
转自:https://m.2cto.com/database/201701/557910.html MYSQL优化主要分为以下四大方面: 设计:存储引擎,字段类型,范式与逆范式 功能:索引,缓存,分区 ...
随机推荐
- @JsonFormat时间不对
实际时间为:2015-07-06 20:20:23 1. @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss") private Date ...
- 【PHPsocket编程专题(实战篇②)】兼容 Curl/Socket/Stream 的 HTTP 操作类[转]
<?php /************************************************************ * 描述:HTTP操作类 * 作者:heiyeluren ...
- log4j的基本配置参数
转载:http://blog.csdn.net/fengyifei11228/article/details/6070006 log4j配置文件有三个主要的组件:Logger,Appender和Lay ...
- TCoolMemo
我们先起个名字叫做TCoolMemo.以上篇已经讲了很多组件的技术,这里就只说出几个重点.其余不多说了. 首先,该Memo从CustomMemo继承,它有这样外观:属于平面的,边框是可以设置颜色的线, ...
- ADO.NET入门教程(二)了解.NET数据提供程序
出处:http://www.cnblogs.com/liuhaorain/archive/2012/02/11/2346312.html 1. 什么是.NET数据提供程序? .NET Framewor ...
- Mmap的实现原理和应用
http://blog.csdn.net/edwardlulinux/article/details/8604400 很多文章分析了mmap的实现原理.从代码的逻辑来分析,总是觉没有把mmap后读写映 ...
- BAT面经
http://bbs.csdn.net/topics/390734210?page=4 注意评论以及文章原地址
- [从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)【转】
(function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的第一眼,我就迷糊了.为什么只有 ...
- PHP命名空间概念解析
1. PHP中的命名空间是什么? 什么是命名空间?“从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在操作系统中目录用来将相关文件分组,对于目录中的文件来说,它就扮 ...
- TagHighlight
:UpdateTypesFile 命令会生成相应的上色高亮文件(生成的着色文件可以叫types_c.taghl)还有相应的tags文件,寻找tags或taghl_config.txt确定project ...