用于响应式设计的9个CSS技巧

最新推荐文章于 2025-03-31 06:00:00 发布

最新推荐文章于 2025-03-31 06:00:00 发布 · 286 阅读

本文分享了几个实用的CSS技巧，包括取消链接下划线、实现响应式视频、制作Rollover文本链接、设置元素的最大最小宽度等，还介绍了背景图片设置、相对值应用及CSS溢出隐藏技巧。

1.取消下划线

现在越来越多的网站文本链接已取消下划线，而这已成为一种WEB设计趋势，尤其是在做响应式网站时。下面提供一段简单的CSS代码，可以轻松取消文本链接下划线：

<style type=”text/css”>

a {

text-decoration : none ;

}

</style>

2.响应式视频

在网页中嵌入视频，这里介绍tjkdesign.com给大家，里面提供了许多CSS技巧，帮助你在页面中嵌入响应式视频（DEMO）。

.video {

position : relative ;

padding-bottom : 56.25% ;

height : 0 ;

overflow : hidden ;

}

.video iframe,

.video object,

.video embed {

position : absolute ;

top : 0 ;

left : 0 ;

width : 100% ;

height : 100% ;

}

3.Rollover文本链接

越来越多的人喜欢在手机上浏览网页，这使得Rollover链接变得越来越流行。想要实现该效果一点都不难，代码也非常简单。

<style type= "text/css" >

a:hover{

color : red ;

}

</style>

4.最大、最小宽度

最大最小宽度可以帮助页面元素设置边界线，其最基本的目的是使所有页面元素都能在边界范围之内。下面提供一段代码，你也可以根据需要进行修改：

.container {

width : 800px ;

max-width : 90% ;

}

下面这段代码将会根据边界线自动调整图片大小：

img {

max-width : 100% ;

height : auto ;

}

上面这段代码仅适用于IE 7和9，对于IE 8需要作出以下修改：

@media \ 0 screen {

img {

width : auto ; /* for ie 8 */

}

}

最小宽度设定

5.背景图片

一些开发人员喜欢给table或者block设置背景图片，CSS有一段代码是专门设置背景图片的：

6.相对值

相对值是响应式设计中非常重要的部分，如果你想要获得最佳效果，你就应该知道如何使用这些值，这对网站的布局是非常重要的。

Relative Font Size

在设置字体相对大小时，需要根据父元素进行设置：

相对比例填充

7.突出边界

 
               border-bottom
               :
               2px
               solid
               #427AA8
               ;

8.Word-Break

下面这段代码可以很好的实现文本换行：

 
               .break-word {
              
               word-wrap:break-word;
              
               }

9.CSS溢出：隐藏技巧

visible的相对值默认情况下是隐藏的，如下图所示，超出box部分的内容就被隐藏起来了。