CSS的重要性
自己很喜欢查看设计出彩的网页,在CSS Zen Garden选择了一个颜色搭配亮眼、结构错落的网页,照着原页面自己写了一个出来。之前做页面的时候总是会把原页面和自己做的放到PS里一个像素一个像素对比查看,因为刚写完的页面整体看不出大的问题,但是对比之后会发现字体啦、浏览器兼容啦还有一些标签自带的margin、padding忘记reset啦之类的问题会导致像素偏差,尤其是当纵向出现偏差,越往下偏差就会越大了。再加上我有极度的强迫症,所以每次几乎都会保证自己写的页面和模板重合。
这次写这个页面的时候一开始就把我难住了。。。因为原页面的单位是用的em啊!天!我当时就无语了。因为...因为宝宝不会算啊!!百度了半天怎么算啊巴拉巴拉之类的,可是一套进去算发现根本不对。。。后来就索性直接用chrome的开发工具模式里面computed盒模型已经算好的值。。所以这个页面我坚决不能做重合检查工作了。。。不然我会自己把自己逼疯的。。。
整个页面看起来真的是很好看,而且实现起来也不难,仅仅是大面积使用background-color的颜色,穿插复古大图。以前看页面就是看高兴,觉得做起来很难,真正下手了,发现其实都是最基本的东西叠加在一起,比如错落感是怎么实现的?主要主要主要就是position各种定位,利用margin搭配padding呈现一种错落有致的感觉。
这里用到一些之前没有尝试过的标签属性,把这些列在这里:
(1)box-sizing:border-box;这个是CSS3的新增属性,border-box表示怪异盒模型,还有一个可选值是content-box是正常情况下的盒模型。这个页面很多使用的是border-box,比如下图,直接用border-box时,左边部分可直接用百分比表示宽度:width:40%;
border-box的可视宽=css设置的width,width=content宽+padding。(书上和百度出来的都是width=content宽+padding+border)可是自己验证出来是width=content宽+padding。为什么???whywhywhy啊?
(2)这个页面有很多标题旋转90°显示的,比如上面图最左边的标题,实现起来其实就是transform:rotate(-90deg);再加绝对定位position:absolute;移动至合适的位置。
(3)还用到一个属性,也是CSS3新增的:background-size:contain/cover/101%/50%;设置图片大小。还是用上图举例,深蓝色部分有个圆的背景图
其实是颜色背景+图片背景:
background: #0d2c40 url('img/icon-half.svg') right center no-repeat;
这个图片本来是很大的,这里因为深蓝色部分设置了width,所以这里可以用:
background-size: cover;
注意:cover和contain还是有区别的,自己写代码试一下就明白啦~
(4)这部分看起来是两个部分,实际上在写HTML这里的文字仅用了两种标签,一个h3,三个p标签,只不过对最后一个p标签单独设置了背景、position、文字颜色等。所以从这个页面中我发现一个真理:不要想当然!还有一个很重要:要动手做!!!!
(5)这个图里错落的感觉完全是用到margin、position,有时候要搭配padding正值和margin负值实现。
(6)这两个图中有个很重要的点之前确实不这么用,第一个图中很大的1、2、3、4和第二个图中的图片摆放实际是用到了::before!!
.requirements::before{
content: '';
position: absolute;
left: -486px;
top: 0;
z-index: 2;
-webkit-background-size: cover;
background-size: cover;
width: 454px;
height: 608px;
padding: 16px;
background:url("img/mid-century-2.jpg")no-repeat left center;}
.navigation nav li:nth-child(1)::before{
content: '1';
font-size: 700%; }
但是,这里要说一个大大的但是。。。那就是IE兼容!!!这些在IE6下运行的时候。。。ohmygod。。。完全没有美感了。。。因为IE6不支持CSS3的这一堆属性啊啊啊!好受伤。。。这种美美的界面我就只欣赏不做兼容了好了。。。=_=!!!
最后总结就是我真是服了我这没没见过世面的样子。。。各人审美不同,大神们可以无视我这种盲目的欣赏。一个页面就搞的自己很兴奋我也是醉了,之前问过一个师兄,他说页面好看不实用还是白搭,所以让我多做js啦数据交互啦之类的。不过管他呢,我就好这口啊。。。总会学到什么的,那就够啦~
多做多做多做!!!
CSS的重要性的更多相关文章
- 浅淡!important对CSS的重要性
SS中的!important是一个非常重要的属性,有时候发挥着非常大的作用,52CSS.com这方面的知识并不是非常多,我们看下面的文章,对它作比较感观的了解. 前几天写一些CSS代码的时候又难为我了 ...
- 论样式表css的重要性
如下图所示两个网页代码基本相同,但左边网页加入样式表后就形成了右边的视觉效果,由此可见 在网页中html用于标记,css用于显示,而JavaScript则用于增强与用户的交互性. 加入的代码是 < ...
- css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...
- CSS 布局入门
概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...
- CSS 了解一下
CSS 认识一下 1.CSS 的那些事 CSS(Cascading Style Sheets)译「层叠样式表」,我的理解是:各种样式叠加的表. 一个网页,如果没有 CSS,就是穿着"国王的新 ...
- Python 学习第十八天 js 正则及其它前端知识
一,js 正则表达式 test 判断制度串是否符合规定的正则 (1)定义正则表达式匹配规则 js 中定义正则表达式为rep=/\d+/,两个//之间为正则模式 (2)rep.test( ...
- Qt之QLabel
简述 QLabel提供了一个文本或图像的显示,没有提供用户交互功能. 一个QLabel可以包含以下任意内容类型: 内容 设置 纯文本 使用setText()设置一个QString 富文本 使用setT ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS中继承,特殊性,层叠与重要性
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: <html><head> ...
随机推荐
- Amazon评论数据的预处理代码(Positive & Negative)
Amazon评论数据的预处理代码,用于情感分析,代码改自 https://github.com/PaddlePaddle/Paddle/tree/develop/demo/quick_start/da ...
- Linux下搭建DNS服务器
1. 安装需要的软件 由于实验过程是在自己电脑进行的,所以需要安装bind bind-chroot,以下为安装过程. 图1-1 安装bind 图1-2 安装bind-chroot 2.修改DNS主配置 ...
- text-justify实操
转自:http://www.zhangxinxu.com/wordpress/?p=1514 CSS代码: .video-list{width:540px; margin-left:auto; mar ...
- Linux安装脚本需要交互之如何实现自动安装
Linux中shell脚本运行时经常需要进行交互,比如安装软件的过程中对license声明的确认,需要输入yes,回车之类的确认信息.这个在自动化安装的时候就会是个问题. 通常对于这个问题比较灵活的解 ...
- 搭建apache http服务器
异步: http://blog.csdn.net/lzhlzz/article/details/39496285
- window 链接方式
一.硬链接 mklink /H <destination> <source> 创建后的图标也和原文件的图标一样,在属性中也无法看出其中的链接关系 可通过命令查看 fsutil ...
- JSP内置对象---request 对象
request.jsp: <%@ page language="java" import="java.util.*" contentType=" ...
- 关于SqlHelper
在 SqlHelper 类中实现的方法包括: ExecuteNonQuery.此方法用于执行不返回任何行或值的命令.这些命令通常用于执行数据库更新,但也可用于返回存储过程的输出参数. Exec ...
- DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
- Python异常总结(出处: 鱼C论坛)
Python 标准异常总结http://bbs.fishc.com/thread-45814-1-1.html(出处: 鱼C论坛) Python标准异常总结AssertionError 断言语句 ...