h5之旅实战篇,HTML常用块级标签和行级标签

上篇做了个起来,那篇重要总计html中常用的块级标签和行级标签。这里所说的块级标签是指在布局中独立攻下一行的标签;行级标签不会单独占领一行的空间,而是从左至右与前边的行级标签排在同一行。

小K的H5之旅-实战篇(一),h5之旅实战篇

本篇介绍的块级成分如下图所示:

一、前言

本K在经过三个礼拜的html和css学习之后,第二次去品味成功三个网址主页的创造。在八日未来,本K也算是达成了杰里教育主页的html和css部分,至于有个别涉及js的局地,因为本K还从未读书过这一块,所以就先做了个样式(网页部分成效如下图)。在做到这一页面包车型地铁时候,K又发掘了重重我们还不曾学到,然则在网页制作中时时会用到的片段性质,会超越一些细节上的主题素材。因而,K写了那篇博文,来记录一下那几个属性和主题素材。

 图片 1

图片 2

 

图片 3块级标签

二、属性记录

逐个标签的功力在此不做赘述,上边贴个简单利用功用图吧。

1、display

      display用来定义成分的框的连串,常用的有四个值:block(将成分框类型转为块级)和inline(将成分框类型转为行级)。在此番网站制作中,在应用功用上,K使用的前端居多,平时用在img和span标签上,特别在供给相互浮动或独自攻克一行时。(不要问笔者干吗不用p标签来代替span,仅仅是因为感到p有一些不太顺眼而已=。=)

图片 4有个别块级标签使用图片 5块级标签使用功效图

2、position

      position用来对页面瓜月素举行定位,常用值有:relative(相对)和absolute(绝对)。在此番网页制作中,凡是float不能够减轻或许正如困苦的细节上,K都以用的position来缓慢解决的(栗子如图)。何况,position那么些特性也会常用在网页的大图管理上,那点会在第三有的详尽演讲。另外,用position的时候,非常是absolute属性值时,一定要注意左近成分的档期的顺序关系,不然会产出遮挡覆盖的主题材料。

常用行级元素如下图:

3、z-index

      z-index用来设置成分的层叠关系,即负担页面三个维度坐标系中的z轴部分。平常在“position:absolute;”出现遮挡难点时行使。

图片 6行级成分

4、transform

      transform用来定义元素的2D、3D调换职能,在全部主页中算是相比较常用的属性。具体常用属性值有缩放scale()和Y轴旋转rotateY(),别的的不做过多的汇报,就借鉴一下W3School(

细微的一篇如故费用了不菲功力,大致非常多个人(当然是说的本人了,唉)往往在察看外人的分享时抱着一种名牌产品特产产品新品优品精应当的思想,在享用别人的总计成果时却未见到每一张文化结构图、每一句话背后的付出。感恩自身读到的每一篇小说,希望有一天本身也能写出点大家可供参照他事他说加以考察的东西。嗯~ 最终同样是分享一张图,Marilyn·梦露和她的名言,特别喜欢。或然大家也该有那样的自信,也足以以同等的思想去接受别人的不完善。

5、transition

      transition用来定义调换的对接效果,例如转变的时间长度一类的难点。

图片 7玛丽莲·梦露

三、难点记录

1、CSS选择器权重计算难点

       行内(1000)>ID接纳器(100)>class选取器(10)>标签选取器(1)

       举个栗子:#div .div .div1 .div2 div  的权重就也便是100+10+10+10+1=131.

2、如哪个地区理网页中1918大图的放置难题

举个栗子:

(html部分:原图经切割为4等分,插入格局为div背景图拼接)

<div id="adv">
    <div class="adv">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </div>
</div>

(css部分)

#adv{
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
}
#adv .adv{
    position: absolute;
    width:1920px ;
    height: 500px;
    left: 50%;
    margin-left: -960px;
}
#adv div{
    width: 480px;
    height: 500px;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
}
#adv .one{
    background-image: url(../img/abstract/20170121094034635.jpg);
}
#adv .two{
    background-image: url(../img/abstract/20170121094108366.jpg);
}
#adv .three{
    background-image: url(../img/abstract/20170121094154220.jpg);
}
#adv .four{
    background-image: url(../img/abstract/20170121094218539.jpg);
}

 (效果图如下 请主动忽视掉两边的侧边栏=。=)

图片 8

 

3、网页的三维结构难题

      网页是贰个立体的构造,在空间维度空间上,除了大家所看到的x、y轴上的平面图像,还富含有在z轴上的所谓的要素间档次的难题。在大部时候,我们平时会高出在行使相对化定位时,让其周围成分被遮住在相对定位成分以下的标题,在这种时候,大家就能够利用在被掩盖元素的样式上加多z-index属性并赋值来将被蒙蔽的因素“浮”到上层来。当然,八个z-index存在时,是基于其赋值大小来支配档案的次序,值越大,档次越发展。

4、其余难点

      4.1 在网页制作时,会发觉一切页面与浏览器边之间存在一定的边距,这种时候本人是透过在大局上设置margin和padding为0来减轻的。

      4.2 在接纳ul大概ol只怕dl时,去除子项前的注明后,ul/ol/dl会默许自身存在一层边距,此时也是应用margin和padding为0来化解的。

      4.3 在网页制作时,div是五个充裕常用且好用的价签。

四、后记

      网页制作真的是贰个格外活跃的事物。曾经在演习独立的板块时,K感到网页制作是一件很枯燥无味的事务。但当K真正创设二个整机网页的时候,在整机把控、页面布局、细节管理、还恐怕有为要素增加种种体制之后,整个页面所表现的生意盎然的感到,以及成就一个页面包车型客车引以自豪和满足感让K认为网页制作,可能说现在K要接触的方方面前边端工程会是贰个很踊跃、很活泼的办事。

一、前言 本K在经过四个星期的html和css学习之后,第二遍去尝尝实现三个网址主页的制作。在二十八日...

本文由365bet体育在线官网发布于网络编程,转载请注明出处:h5之旅实战篇,HTML常用块级标签和行级标签

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。