【Mr.R出品】06:HTMLayout 之CSS 最基本的概念,新手必备!

编程语言 Mr.R 2年前 (2016-11-21) 810次浏览 已收录 0个评论 扫描二维码

本篇本章给写给那些新手新手新新手的童鞋,高手请略过。。。
HTML 和 CSS 可以说是非常基础的,也很简单的语言了,其实哥接触 web N 年,
也就最近才对这该死的 CSS 有了一些理解,下面就基于个人对 HTML 和 CSS 的理解,
给大家介绍一下,HTML 和 CSS 该怎么用!

精仿网易云音乐 UI 制作心得 也有一些介绍:http://www.btbat.com/1075.html

html:

学习 html,首先必须对 html 标签的层次结构有个了解:

一个标准的 html 文件都由<html>开头,</html>结尾的;

<head><head>是头部信息区域,可以定义网页的标题、加载 css、加载 js、定义关键字等;

head 里面的内容是不会在页面显示的;

<body></body>包含在这里的内容,才是真正的主内容区域;

 

【Mr.R 出品】06:HTMLayout 之 CSS 最基本的概念,新手必备!

通过上面的代码,我们先分清层级(见下图):

【Mr.R 出品】06:HTMLayout 之 CSS 最基本的概念,新手必备!

应该一目了然了,如果你还分不清,那也没得救了!!!

 

在 body 里面,我们通常用<div></div>这样的结构划分出区域,

然后在<div></div>划分的区域里面加入各种元素<img />、<a></a>等;

实际上我们页面看到的是各种元素,所以在 HTML 中:

有的标签用来分层(定位)比如:<div>层,<span>组合行内元素 ,<p>加粗并换行,等等;

有的用来展示元素 比如:图片<img>、文字<a>、输入框<input>、按钮<button>、视频<video>,等等;

也就是说HTML 通过各种标签包裹各种元素,用于展示在页面上。

对层次了解之后,就可以对各种标签的作用去进行了解了:移步http://www.w3school.com.cn/tags/index.asp

PS : HTMLayout 仅支持部分 HTML5 和 CSS3 特性!

 

 

CSS:

选择器:

css 可以对 html 中的层和元素进行定位、加特效 DuangDuangDuang!

学习 css 首先必须要了解的是选择器,常用的选择器有#井(id 选择器)  .点(class 选择器) 等等;

在看很多 html 源码的时候,我们经常看到类似这样的:

<div id=”menu” class=”nav”>…</div>

一个 html 页面中有很多的 div 层,那么我们需要给某个层加 DuangDuangDuang 怎么办呢?

就是通过#井(id 选择器)  .点(class 选择器)等来选中这些 div 层。

然后我们一般可以从 css 里面找到类似下面的语句:

#menu{…}  //选择 id 为 menu 的层或元素

.nav{…}   //选择 class 为 nav 的层或元素

以上两个任意一个效果相同,

区别是 id 是唯一的标示,一般 id 用于 js、csss!交互,比如:某个按钮指定的操作。

class 可以同时指定多个标示,一般用于 css,比如:具有相同样式的按钮。

好了,不管是 html 里面的层还是元素,能选择才能加 DuangDuangDuang,对吧?

别急、别急!不要一上来就急着加特效,还是把最基本的概念搞清楚再玩吧!

 

定位:position

了解了选择器,那么我们就可以对各个层级进行布局了,

#top{width:100%;height:80px;position: absolute;top:0px;left:0px;right:0px;background:#FF0000;}

通过 id 选择器选择 top(上面示例代码 top 是个 div)

{宽度:页面宽度 100%; 高:80 像素; 定位:绝对定位; 顶边距:0px; 左边距:0px; 右边距:0px; 背景颜色:红色;}

css 代码都用{ }包裹起来的,{属性:值;}用:来定义属性和值,用;结束单个属性值组合。

position 属性值基本介绍一般与(top、left、right、bottom 组合使用):

absolute;绝对定位,也就是不管别的元素阻挡,可以重叠但是会被层级遮盖;

relative;相对定位,以父层为基准进行定位,不可以重叠;

 

盒子模型:

border:边框;padding:内边框;margin:外边框;

其中 padding\margin 以 border 为基准;

 

CSS 学习的路径应该是选择器、定位、宽高大小&模型盒子,这些理解的差不多了,

基本上就可以玩 DuangDuangDuang 了!

 

【Mr.R 出品】06:HTMLayout 之 CSS 最基本的概念,新手必备!

完整代码:
【Mr.R 出品】06:HTMLayout 之 CSS 最基本的概念,新手必备!

显示效果:

写这么多代码才显示一个图片???让很多初学者有点头疼!

其实你可以将层设置个背景色或者边框,来测试一下 html 布局!

【Mr.R 出品】06:HTMLayout 之 CSS 最基本的概念,新手必备!

加了边框、背景色的代码,可以看到我们已经将层进行了布局!!

上面我们通过 top 层 、bottom 层划出了上下两个层,因为这两个层通常都是固定高度的。

那么我们通过同样的方法,在 top 层里再划分出不同区域,加入元素啊!

好了入门之旅,就这么开始了,有什么不理解的最好多动手,多百度,DuangDuangDuang!

 


修仙㊀群
修仙㊁群
常见问题:1、文件解压请使用 Winrar5.5 版本以上解压;
2、视频播放有声音无画面,请了解下 PotPlayer 播放器;
R 大技术站 , 版权所有,如未注明 , 均为原创,如需转载请注明来源!
喜欢 (1)
[itdiy@qq.com]
分享 (0)
发表我的评论
取消评论

表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址