码迷,mamicode.com
首页 > 编程语言 > 详细

java入门第一篇:h5和CSS的基础学习及思考。

时间:2018-03-19 11:37:43      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:程序员   色香味   col   一个   一件事   文件的   image   relative   第一篇   

学习总结

初学代码,首先了解到一件事:代码就是计算机的文字,是程序员与计算机,程序员互相之间的交流语言。

人们用语言发声交流,用文字书写记录,而代码就是程序员和计算机的交流语言。汽车行使的好坏要看驾驶员的驾驶技术。程序运行的优劣也要看程序员的编码能力。

 

入门这两周主要学习了HTML和CSS,一个好的项目,功能强大之余,还要美观才会有人欣赏喜欢,就像饭菜讲究色香味。只有对前端有一定程度的了解,才能在团队的合作中,了解对方的需求,达成良好的配合。

 

HTML是内容,CSS是表现。HTML是结构,CSS是美化。W3C倡导的内容与表现分离,就是倡导HTML和CSS代码分离。

HTML基础结构如下:

  1:<!DOCTYPE html>文档类型声明

  2:<html></html>

  3:<head> </head>

  4:<body> </body>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

 

HTML基础包括1.基础标签;

2.基本块级标签;

3.基本行级标签;

4.表格;

5.表单与智能表单。

每一项中都学习了不少的标签、属性与属性值。

 

CSS基础包括:1.CSS文件的导入方式;

                         2.常用选择器和伪类选择器;

                         3.选择器优先级;

                         4.常用的文本属性、背景属性、列表属性及一些其他属性;

                         5.盒子模型;

                         6.浮动、定位、负边距;

                         7.过渡、变换、动画效果。

还有如今流行的响应式开发所应用的:响应式布局;

                                                            弹性布局。

 

实践与思考

完成这些基础学习后,我尝试着做一个网站的基本页面。

在实做的过程中,了解到布局对于一个网页至关重要

一个良好的布局会让界面更加美观,思路更加清晰,修改更加方便。

合理的嵌套和选择器的应用可以让格式和优先级更加明朗,减少出错。

div标签、列表标签、弹性布局、定位、浮动、内外边距的合理应用。可以实现标签的布局和定位。

 

在布局过程中,弹性布局、定位、浮动和内外边距对元素实现很好的定位。

 

 技术分享图片

      想象中,浏览器是一个三维的立方体,我们看到的平面都是从立方体的上方俯视观察到的,而实际上,界面是分层的

      根据目前的学习。层级至少可分为 标准流层、浮动层、定位层。

 

层级:1.标准流层在最下方,定位层永远在浮动层上方(即使不是同一父容器);

   2.定位层之间,可以用z-index属性设置层级,数值越大层级越高,数值相等,后者居上。

注意!如果父容器的层级是auto(默认),子元素的层级不会受到父容器的限制。

如果父元素的层级不是auto而是一个数值:0 1 -1等 子元素的层级都会被父容器限制。

3.如果对一个元素应用弹性布局、那么他的float属性就会失效。

 

flota(浮动)可以理解为和标准层藕断丝连,标准层中的未浮动盒子中的内容会受到浮动盒子的影响,而未浮动盒子本身会视浮动后的盒子完全不存在,取代它的位置。(浮动可以打破文档流,不能打破文字流)。

 浮动的位置:上下位置受标准流中的盒子高度影响,

左右位置受浮动后的盒子的高度影响。

position(定位)的行为则比较彻底:relative(相对定位):占据本身的位置,标准流中的其他盒子不受其影响。

absolute(绝对定位)和fixed(固定定位):其他盒子内容和盒子本身都受影响,(既打破文档流,也打破文字流)。

                                                           

正确的使用浮动和定位,确定布局,对于一个项目意义非凡。

  

 

                        

 

 

 

 

java入门第一篇:h5和CSS的基础学习及思考。

标签:程序员   色香味   col   一个   一件事   文件的   image   relative   第一篇   

原文地址:https://www.cnblogs.com/lslboy/p/8599118.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!