首页
关于我们
案例
网站建设
微信小程序
APP开发
品牌设计
网站建设
小程序开发
APP开发
新媒体运营
解决方案
企业集团网站建设
社交电商解决方案
高校集群解决方案
O2O解决方案
服务
动态
新际动态
行业资讯
常见问题
020-39991468
首页
关于我们
案例
网站建设
小程序开发
APP开发
品牌设计
网站建设
小程序开发
APP开发
解决方案
企业集团网站建设
社交电商解决方案
高校集群解决方案
O2O解决方案
服务
动态
新际动态
行业资讯
常见问题
快捷导航
关于新际
新际简介
咨询动态
服务优势
业务范围
网站建设
小程序开发
APP开发
解决方案
企业集团网站建设
社交电商解决方案
高校集群解决方案
O2O解决方案
案例
集团/上市公司
微信小程序
高校站群案例
# 业务咨询
电 话:020-39991468
张经理 / 18665606093
Email / service@2000new.com
扫一扫添加顾问
网站设计常用的CSS技巧
来源:新际网络
发布时间:2015-11-05
分享:
设计网站的时候,常常因有些小细节最终影响了网站的错位和不兼容问题,为了减少这些问题的出现,新际网络给大家总结了些常规的CSS小技巧大家分享下:
1、使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。
2、清除容器浮动
#main {overflow:hidden;}
之前也提到过这样的问题,更多信息可以看这里。
3、不让链接折行
a {white-space:nowrap;}
上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录)。
4、始终让 Firefox 显示滚动条
html {overflow:-moz-scrollbars-vertical;}
更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持,也可以使用
body, html {min-height:101%;}
5、使块元素水平居中
margin:0 auto;
其实就是
margin-left: auto;
margin-right: auto;
这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用
body{text-align: center;}
然后定义内层容器
text-align: left;
恢复。
6、隐藏 Exploer textarea 的滚动条
textarea {overflow:auto;}
Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。
7、设置打印分页
h2 {page-break-before:always;}
page-break-before 属性能设置打印网页时的分页。
8、删除链接上的虚线框
a:active, a:focus {outline:none;}
Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。
9、最简单的 CSS 重置
* {margin: 0; padding: 0}
下一篇:
Flash网站的优缺点
上一篇:
网站设计与网站策划
返回列表
联系我们
咨询电话
业务咨询:
020-39991468
服务监督:
郭经理 18620727292
联络邮箱
业务邮箱
service@2000new.com
招聘邮箱
hr@2000new.com
总部中心
广州市番禺区汉溪大道东290号保利大都汇A3栋803室
一键导航
在线咨询
微信沟通
扫一扫加售前顾问
电话咨询
在线咨询
留言预约
预约咨询顾问
*新际020中心将尽快与您联系