当前位置:首页 > 嵌入式 > 嵌入式软件
[导读]帮助设计师和开发者的9种实用CSS技巧

一个网页设计师脑子里一定会被大量与他的工作有关的知识填满。而说到CSS,它可以帮助对网站进行设计,让设计具有更多的可能性,用更简单的方式让你的网站更具吸引力,而使用传统的技术这些方面并不容易面面俱到。

对于前端,页面而言,CSS的确是一门首选需要掌握的技能。以下就是9种非常实用的CSS3属性和使用技巧。

1.  圆角效果

谈及圆角小编曾在各种讨论中频繁听见:实现麻烦、兼容困难、性能不佳等等缺点。而如今的Web设计需要的就是各种各样新的开发技巧,因此越来越多的前端和页面都开始使用HTML5。

对于HTML5而言,从前必须使用图片来实现的需求,现在都可以通过代码来实现。而CSS3中加入的“border-radius”就可以用通过它来直接定义HTML元素的圆角,并支持所有浏览器的最新版本。

我可以通过如下代码实现:

1
2
3
4
border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

我们也可以使用下面这样的组合版本,或者用它来对上面的代码进行速记。

1
-moz-border-radius: 10px 20px 30px 0;

2.  阴影效果

另一个CSS3可实现的有趣功能是阴影效果(box-shadow),通过“box-shadow”可以非常简单的实现该功能。我们常见的主流浏览器都支持这个属性,而Safari浏览器支持可选加前缀的-webkit-box-shadow属性。

代码包括:

1
2
3
4
5
#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

而如下的JavaScript代码也能实现同样的阴影效果:

1
object.style.boxShadow="20px 10px 7px #ccc"

3.  @Media属性

@Media可以直接指定应用样式引入媒体属性,用于相同样式针对不同屏幕尺寸的网页风格变化, 它也有助于响应式网页设计中的造型变化。通过简单的修改如下代码就能实现。

1
2
3
@media screen and (max-width: 480px) {

}

而使用如下的@media print甚至可以指定CSS的打印预览:

1
2
3
4
@media print
{
p.content { color: #ccc }
}

4.  添加一个渐变填充

在CSS3中的渐变效果是另一个让人惊叹的属性。它目前还未得到全部浏览器的支持,因此最好不要完全依赖它来设置布局。而这里有一个基于CSS的梯度导航栏可以让大家参考一下。

以下是实现的方式。

1
background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

5.  背景尺寸

背景尺寸(Background size)是CSS3中最实用的效果之一,目前很多浏览器都已经支持。Background size属性可以让你随心所欲的控制背景图的尺寸大小。

从前用于背景的图像大小在样式中是不可调整的,如果你无法想象那样有多么糟糕,可以试着回忆一下,在自己的电脑桌面上做壁纸的时候遇到一张合乎心意却偏偏与桌面尺寸不合的图片,只能通过平铺来填充。

[!--empirenews.page--]

那样的桌面丑的让一个审美观及格的人都会有砸屏幕的冲动。而现在我们可以通过改变一行代码让背景图片适应自己的页面。

1
2
3
4
5
6
div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

6  @font face

属性在使用CSS3针对各种字体进行转变的时候已经充分证明了它的实用性。从前因为各种字体许可的问题,在设计过程中只能选择几种特定的字体。而通过@font face我们就能自定义字体的名称:

1
2
3
4
5
6
7
@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */

}

而后我们能通过一个简单的代码,随时随地的使用自定义的mySmashingFont字体系列

1
2
3
4
div
{
font-family:mySmashingFont;
}

7.  clearfix属性

如果Overflow: hidden清除浮动的效果实在不是你的首选,那么clearfix应该是你更好的选择,它可以让你个别处理不同的HTML元素。

1
2
3
.clearfix {
display: inline-block;
}
 
1
2
3
4
5
6
7
8
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

8.  Margin: 0 auto

Margin: 0 auto实现的是CSS中最基础的功能,我们常常也会用它来实现最简单也最常用的功能—居中。虽然CSS本身没有一个指定居中的功能,但是通过auto margin指定一个边距仍然能非常简单的就实现居中这个功能。

通过这个属性,用一段简单的代码就能实现元素的居中。但需要注意的是,就像以下代码中那样,必须给div设定一个宽度。

1
2
3
4
5
.myDiv {
margin: 0 auto;
width:600px;

}

9.  Overflow: hidden

Overflow:Hidden,它做作用主要是隐藏溢出,而就像上述提到的,人们都很少用到其另外一个功能,就是清除浮动。

1
2
3
4
div
{
overflow:hidden;
}
本站声明: 本文章由作者或相关机构授权发布,目的在于传递更多信息,并不代表本站赞同其观点,本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者,如若文章内容侵犯您的权益,请及时联系本站删除。
换一批
延伸阅读

2023年10月18日,中国在第三届“一带一路”国际合作高峰论坛期间发布《全球人工智能治理倡议》,围绕人工智能发展、安全、治理三方面系统阐述了人工智能治理中国方案。

关键字: 人工智能 大模型 代码

我们看到这么多的安全问题,部分原因在于我们对待安全的方式:安全性通常被认为是事后考虑的问题,是在开发结束时才添加到设备上的东西。然而,复杂的系统,尤其是嵌入式系统,有一个很大的攻击面,这让攻击者有机可乘,能够在“盔甲”上...

关键字: 代码 嵌入式系统 软件漏洞

常州2023年9月25日 /美通社/ -- 9月23日,由江苏省商务厅指导,世界中餐业联合会、常州市人民政府主办的"第三届中华节气菜大会暨首届江南美食节"在江苏常州开幕。文化和旅游部国际交流与合作局一...

关键字: BSP 可持续发展 大赛 质量控制

北京2023年9月25日 /美通社/ -- 9月21日,由中国质量报刊社·中国质量新闻网主办的第六届食品高质量发展交流会在北京举行,会议主题为"高质量,新生活",旨在推动食品行...

关键字: 自动化 BSP ISO9001 NAS

北京2023年9月23日 /美通社/ -- 近日,主线科技正式获准在北京市智能网联汽车政策先行区道路开启常态化测试与示范,将与物流客户在真实开放的城区道路场景中,率先开启基于L4级别自动驾驶能力的智能卡车运输示范。 随...

关键字: 智能卡 测试 高速公路 BSP

曼谷2023年9月18日 /美通社/ -- 作为东南亚的旅游胜地,泰国一直在全球范围内吸引着无数游客的目光。泰国旅游和体育部近日公布的报告显示,今年前7个月,泰国旅游业总收入约为1.08万亿泰铢(约合人民币2233亿元)...

关键字: BSP GEN 国美 AN

哥伦比卡尔达斯2023年9月22日 /美通社/ -- 近日,天合跟踪与中国电建签订拉美地区哥伦比亚泰普伊光伏电站跟踪支架供货协议,将为其提供108MW智能跟踪系统,其中包含开拓者1P智能跟踪支架、智能算法、以及智慧云平台...

关键字: 光伏电站 跟踪系统 控制器 BSP

2型炎症领域新突破 上海2023年9月22日 /美通社/ -- 赛诺菲今天宣布,达必妥®(度普利尤单抗注射液)获得中国国家药品监督管理局(NMPA)批准,用于治疗适合系统治疗的中度至重度结节性痒疹的成...

关键字: PRIME BSP REPORT SAR

欧莱雅中国旗下上海美次方投资有限公司达成首次开放式创新投资 法国克里希2023年9月22日 /美通社/ -- 欧莱雅集团宣布对中国创新型生物科技公司杉海创新进行少数股权投资,以建立长期合作伙伴关系,共同开发新...

关键字: AN BSP DEVELOPMENT FOR

赋能企业实现业务数据的可识别、可见、可协作和安全数据的可操作 北京2023年9月22日 /美通社/ -- 亚马逊云科技持续加速分析与安全服务创新,守护安全基座,助力企业进一步释放数据要素价值,实现创新增长。在数字经济时...

关键字: 亚马逊 BSP 生成式AI SECURITY
关闭
关闭