新闻中心
如何设计网页css的10个技巧
作者 / 无忧主机 时间 2015-02-02 17:14:11
作为网页设计师就知道CSS是基础，对CSS的了解能够设置更美的网页，而在这领域里面有更深的，也让人着迷的。为了让您的网站在php虚拟主机上呈现更加美观的状态，无忧主机小编分享10个小技巧给一些自学的站长们，仅供参考。 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 screen and (max-width: 960px) {
}
4. transform: rotate(30deg);
结合转换属性和CSS转场效果制作很好的动态效果
.title {
transform: rotate(40deg);
}
5. background-size ：在网站中适应全屏幕背景
body {
background: url(image.jpg) no-repeat;
background-size: 100%;
}
6. input[type="text"]
使用属性选择器来控制输入元素的提交版本或为一个外链增加一个图标
input[type="text"] {
width: 250px;
}
7. margin: 0 auto;
使块级元素在父元素中居中
#container {
margin: 0 auto;
}
8. a {outline: none;}
声明将移除点一个链接的虚线框，为了易用性记得给链接也加上：focus状态。
9. overflow: hidden
清除还没加载到CSS里面的元素浮动的方法，从而提高网站响应速度
.container {
overflow: hidden;
}
10. color: rgba();
设置不通颜色通道透明值，去实现透明性，比如：0.5对应的是50%透明度
.btn {
color: rgba(0,0,0,0.5);
}
如果您是自助建站，那么这些CSS技巧如果您能学学，对您的网站美化是有一定帮助的。
无忧主机相关文章推荐阅读：
本文地址：https://www.51php.com/others/18559.html
