HTML5+CSS3 - 代码简写篇

有话先说:我是一只菜鸟,还是一只刚步入前端这个领域的小菜年,在不断的进阶,理解最深刻的还是代码,既爱又恨却不知如何去感悟。

background属性简写:

background-position属性组合方式:[ left | center | right ] || [ top | bottom ] (组合中代码都是以空格间距)

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

background属性简写顺序:background-color || background-image || background-repeat || background-attachment || background-position(值得一说的是在一般情况下背景色和背景图是不会放在一起使用的,一起使用的情况很少,但这种情况都是在背景图为透明的情况下会使用)

圆角框:css3的border-radius和border-image

border-radius:上,右,下,左 (四个属性值)

border-image:url(),剪裁位置,重复性

eg:border-image:url(),25% 25% 25% 25% / 25px round round;(边框宽  水平方向  垂直方向)

阴影:box-shadow

box-shadow: 3px (水平阴影位置)  3px (垂直阴影位置)  6px (阴影宽度)   #666(颜色);

不透明度:

rgba 同时设置颜色和不透明度。

font-family: ‘Open Sans‘, Helvetica, Arial, sans-serif; line-height: 23.8px;">

最后显示出的透明度为80%

opacity

这个属性值同样能实现透明的效果,但是不是特定的在背景实现而是前景色实现

属性值0-1之间 0为透明 1为不透明

总结

在我们敲打代码时,我们不能只是看实现的效果,还要优雅的去敲代码,虽然我们宅,但是我们还是要宅的优雅。做一个优雅的前端开发人员是有必要的。

时间: 2025-02-01 15:50:59

HTML5+CSS3 - 代码简写篇的相关文章

HTML5&CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器窗口中.一个典型的网页是由文本.图像和链接组成的.除去内容上的差异,不同网站的网页也具有不同的外观和感受,以实现在网络上建立自己的身份品牌的目的. 如果你也曾想要了解你屏幕上的这些网页是如何被创建出并以各式各样的方式渲染的,那么这里正是你可以了解到这些知识的地方.让我们一起走进在浏览器中创建了这么多

【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角

HTML5/CSS3菜单特效代码,实现了阴影+发光+圆角效果,实属不错,不过IE8下看不到效果,期待IE8快点兼容css3啦.本效果代码简洁,还可继续优化完善,要的就拿去哦. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5/CSS3阴影菜单</title> 6 <style> 7 .ui-menu {

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案例看了.发现一个不错的文章.写的比较入门,也很仔细.所以拿过来分享给大家.如果还想看图片的响应式案例可以看我找的另外的一篇<分享一个非常有用的HTML5+CSS3响应式图片案例>. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

使用Html5+CSS3的优势

一:大多浏览器支持,低版本也没问题     我看点这方面的资料,是为了做手机应用网站(有三个方案,这个是备用方案),可以开发响应式网站,可以脱离开发平台进行跨平台.     在Html5网页中引入Modernizr,就能让IE支持HTML5新元素.     HTML5样板文件快速开发(html5boilerplate.com) 二:布局.标签省时省力   [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片 <header> <!--语义相当于&l

HTML5 CSS3 诱人的实例 :模仿优酷视频截图功能

一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还是很不错,下面我给大家分析下,极其核心代码很简单: _canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = '#ffffff'; _ctx

用Html5/CSS3做Winform,一步一步教你搭建CefSharp开发环境(附JavaScript异步调用C#例子,及全部源代码)上

本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们用此开发Winform程序也就相当于在程序里面内嵌了一个谷歌浏览器.所以H5/CSS3以及各种Web开发界面设计的优势就可以完全发挥出来. 由于CefSharp更新及时,所以使用此浏览器控件可能是对于Html5/CSS3支持最优秀的方案了. 1.首先我用的是VS2015,这里新建一个空白解决方案.

HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果图2: 好了,请允许我把图片贴了两遍,方便大家看效果了~ 可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改: <span style=&quo