zoukankan      html  css  js  c++  java
  • java入门第一篇:h5和CSS的基础学习及思考。

    学习总结

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

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

     

    入门这两周主要学习了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(固定定位):其他盒子内容和盒子本身都受影响,(既打破文档流,也打破文字流)。

                                                               

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

      

     

                            

     

     

     

     

  • 相关阅读:
    ASP.NET Zero--10.一个例子(3)商品分类管理-新建
    ASP.NET Zero--9.一个例子(2)商品分类管理-列表
    ASP.NET Zero--8.一个例子(1)菜单添加
    ASP.NET Zero--7.控制器加权限
    ASP.NET Zero--6.菜单加权限
    ASP.NET Zero--5.配置权限
    ASP.NET Zero--4.不使用谷歌字体,提升加载速度
    ASP.NET Zero--2.如何启动
    C# mongoDB Driver 使用对象方式最完善查询语法大全
    ef 数据库连接字符串加密
  • 原文地址:https://www.cnblogs.com/lslboy/p/8599118.html
Copyright © 2011-2022 走看看