发表日期:2018-08-15 文章作者:爱永设计 浏览次数:34797 次
通过多年网站制作经验,总结一下css常用代码。
1、:before , :after 选择器
在每个 <p> 元素的内容之前插入新内容:
p:before
{
content:”新内容”;
}
2、css百分比减去像素
我们在做响应式设计时,经常会用到 百分比减去像素,如一个div宽度为100% 又加了1像素的边框,怎么办呢?
div{
width:-webkit-calc(100% – 2px);
width:-moz-calc(100% – 2px);
width:calc(100% – 2px);
}
3、让背景图100%显示
div{
background:url(images/dianxgnbg.jpg) no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
background-size: cover; 会保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。
4、常用让一个div背景为半透明,文字不透明
div{
background-color: rgba(0,0,0,0.5);
}
0,0,0表示RGB颜色
最后一个参数.0.5则是指的透明度!1为100% 不透明!
5、垂直对齐方法,不能设置浮动
div{
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
}
今天先整理这些,后期还会不断增加,由爱永设计整理发布。
日期:2020-03-03 浏览次数:31453 次
日期:2020-03-03 浏览次数:31564 次
日期:2020-03-03 浏览次数:32569 次
开发日期:2021-06-21 浏览次数:682952 次
开发日期:2021-04-21 浏览次数:742753 次
开发日期:2020-05-03 浏览次数:800225 次
开发日期:2019-12-02 浏览次数:778271 次
开发日期:2019-10-02 浏览次数:1037334 次
日期:2012-07-21 浏览次数:16274 次
日期:2013-07-18 浏览次数:16462 次
日期:2018-11-24 浏览次数:18715 次
日期:2014-08-09 浏览次数:17327 次
日期:2014-04-23 浏览次数:14443 次
致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!
Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作