源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] 要知道的10个CSS技巧

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-4-9 14:19:59 | 显示全部楼层 |阅读模式
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好。

当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧,如果你想设计出独一无二脱颖而出的网页你必须得好好注意了。

1. @font-face

一种用其他服务器上的字体的好方法。很明显,如果你不能在托管服务器上找到你需要的字体,你可以在样式中使用这个方法来引入你需要的字体。


复制代码代码如下:
@font-face {
font-family: Blackout;
src: url("assests/blackout.ttf") format("truetype");
}

2. .clearfix

如果你没法清除元素的浮动,这是清除浮动一种方法。你可以对任何HTML元素单独使用这种方法。


复制代码代码如下:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

3. @media

@media 可以设置你当前响应网站的媒介,它能帮助你根据用户的显示器调整网站的宽度。


复制代码代码如下:
@media screen and (max-width: 960px) {
}

4. transform: rotate(30deg);

结合这些转换属性和CSS转场效果来创造有意思的动态效果。


复制代码代码如下:
.title {</p> <p>transform: rotate(40deg);
}

5. background-size

这条规则帮助你在网站中适应全屏幕背景。这不像之前的CSS版本必须写很笨重的代码。


复制代码代码如下:
body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}

6. input[type="text"]

这个input[type="text"]选择器和其他高级选择器把你从一般水平带到高级水平非常有帮助。使用属性选择器来控制输入元素的提交版本或为一个外链增加一个图标这样很不错吧?


复制代码代码如下:
input[type="text"] {
width: 250px;
}

7. margin: 0 auto;

很奇怪,没有任何特定的标准来使块级元素居中。这个方法可以使块级元素在父元素中居中。


复制代码代码如下:
#container {
margin: 0 auto;
}

8. a {outline: none;}

在浏览你的网站的时候,点一个链接一个巨大的虚线框就横跨整个网页这将严重影响用户的心情。这个“a {outline: none;}”声明将移除这个,但为了易用性别忘了给你的链接也加上:focus状态。


复制代码代码如下:
a {outline: none;}

9. overflow: hidden

这是最好的清除还没加载到你CSS里面的元素浮动的方法。使用它使网站的响应速度更快。


复制代码代码如下:
a {outline: none;}

10. color: rgba();

PNG图片因为它的透明性使它在网页设计中很流行并广泛使用,但是现在你可以使用下面这种方法同样实现透明。它使用红、绿、蓝三通道并设置其不透明度值来实现透明,像0.5对应%50的不透明度。


复制代码代码如下:
.btn {
color: rgba(0,0,0,0.5);
}
回复

使用道具 举报

4

主题

2万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2022-8-11 06:52:40 | 显示全部楼层
灌灌灌灌水
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-8 07:57:45 | 显示全部楼层
哦哦哦ijhhsdj
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-14 11:24:35 | 显示全部楼层
看看怎么样再说
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2023-6-30 20:58:58 | 显示全部楼层
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

294

积分

中级会员

Rank: 3Rank: 3

积分
294
发表于 2023-11-19 01:32:18 | 显示全部楼层
很不错的源码论坛
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-25 13:51:40 | 显示全部楼层
的谁vdvdsvdsvdsdsv
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-19 12:15:22 | 显示全部楼层
怕怕怕怕怕怕怕怕怕怕怕怕怕怕
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-6-8 16:57:31 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2024-6-25 21:33:41 | 显示全部楼层
我要金豆金豆金豆
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-30 08:41 , Processed in 0.069088 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表