现在的位置:主页 > 新闻中心 > 焦点访谈 >

CSS网页设计技巧

发布时间:16-05-21 来源:发我我网 人浏览 字号:TT 作者:admin 打印

1、消除下划线

我们都知道,CSS的进入使网页开发有了很多改变。所有文本链接的下划线将不复存在。从网页盛行,如果你浏览网页时也应该注意到了其实文本链接标注下划线也就为了突出他们。不过现在由于CSS代码的出现,文本链接的下划线可以通过很简单的代码就去掉。

下面是去除下划线的简单代码:

 

?

1
2
3
4
5
<style type=”text/css”>
a {
text-decoration:none;
}
</style>

 

 

应用这段代码,便可去除文本链接中的下划线。我个人认为,没有下划线的文本链接好看多了。当然,这只是个人喜好并非最新趋势或是网页设计的要求。带下划线的文本链接也是可以的。

 

2、响应视频

为了嵌入视频并使其自适应长宽,我们为所有开发人员准备了一个非常有用的CSS技巧。在我进一步之前,我想引入介绍这个CSS技巧并帮助很多开发者嵌入交互视频的网站tjkdesign.com

 

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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、链接变色

链接变色最近获得很高的人气特别是在移动浏览盛行之后。创建一个滚动的效果也并不难,只需要几行代码。这段代码不仅从整体上修饰了代码,还让当鼠标经过时文字变色。

 

?

1
2
3
4
5
<style type="text/css">
a:hover{
color:red;
}
</style>

 

 

只是更进一步说,之前提到的消除下划线的那段代码和上面的代码都需要加入头部信息。还有,如果你想用你选择的颜色,你用你想要的颜色替换掉‘red’就可以了。

 

4、最小宽度和最大宽度

最大宽度属性帮助开发者限制文本或其他元素的宽度。最大宽度的目的是把你的元素限制在边界线以内。使用下面的代码就可以限制最大宽度,你还可以根据你的需要改变数值。

 

?

1
2
3
4
5
.container {
 
width: 800px;
max-width: 90%;
}

 

 

自适应图片大小

下面的代码可以帮你根据限制的宽度自动调节图片大小。你需要做的就是设最大宽度为100%高度自适应。

?

1
2
3
4
img {
max-width: 100%;
height: auto;
}

 

 

 

不过对IE8上面的代码需要做些许调整,因为上面的代码只对IE7和IE9起效。对IE8如下:

?

1
2
3
4
5
<a href="http://my.oschina.net/media" target="_blank" rel="nofollow">@media</a>  \0screen {
img {
width: auto; /* for ie 8 */
}
}

 

 

 

最小宽度

要时刻记得最大宽度和最小宽度的区别。最大宽度把所有元素限制在框内,而最小宽度为文本或其他元素设置最小宽度。不过应用这个样式,到达最小宽度后你的网页不会更进一步按比例缩小。

 

5、CSS设置背景图片

一些开发者喜欢通过表格来设置背景图片或块级元素。如果你也是这样你应该很乐意知道用CSS代码使块级元素包括任一方形区域加上背景图片。它是可以是段落或者标题。同样的,加入你想要的背景图片你只需要加入以下代码:

?

1
2
<div style="background-image: none; height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: none; height: 200px; width: 400px; border: 1px solid black;"> </div>

 

 

 

6、相对值

相对值在响应式的网页设计中相当有用。如果你想得到最好的效果,你应该知道什么时候使用这些值让它发挥最大益处。这样它将帮你得到最好的布局效果。

相对字体大小

对字体大小,你要做的就是使用相对单位像em或百分值(%)。这样很容易控制字体大小、行距和行高的多少。这样你想做任何调整只需要改变父级元素便可。

 

相对百分比内边距

通过下面的截图,你会理解使用百分值的内边距要比固定内边距要好得多。它可以根据你的每一次调整做出相应改变,这就是为什么百分值的内边距会更有效。

 

 

7、有趣的边框

下面另一个好用的CSS技巧是帮你无时的变化边框。如果你想高亮你的边框,用用下面的代码吧。

?

1
border-bottom: 2px solid #427AA8;

 

 

 

你可以根据你的需求改变值。

 

8、断字

CSS技巧也包括包住一个文本让它不出现在一行,因为这样实在不好看。下面的代码帮你行内断字。

?

1
2
3
.break-word {
word-wrap:break-word;
}

 

 

 

9、overflow hidden属性技巧

默认显示相反的就是隐藏。它会隐藏超出盒子的任何东西。

关注微信公众平台
1、微信“添加好友”点击“搜号码”输入“AI阿翔”点击关注
2、扫描以下二维码
 
 
上海热线 15000161882
全国热线  15000161882
咨询QQ 1198126099
上海地址 上海市黄浦区普安路189号曙光大厦
 

做站资讯热线

15000161882

Copyright © 2010-2016 发我我网(小翔子酷酷网)官方网站
本站文字及图片内容版权归刘翔个人所有,任何单位及个人未经许可,不得擅自转载使用(上海) | 皖ICP备15010645号-1

在线创业留言申请: 姓名: 手机或座机: