• 掌握表单标签

<form action="http://www.baidu.com" method="post">

    ...

</form>

  • 了解CSS的概念

    • 英文缩写 Cascading Style Sheet
    • 层叠样式表
    • 层叠:层层叠加
    • 样式表:样式的集合(属性的集合),不是html的属性,而是CSS的属性

  • 掌握CSS的引入方式(heml和css)

    • 通过style标签的属性

      <!--通过style属性-->
      
    <div style="border: 1px solid red;">div一</div>
    • 通过style标签 
      <head>
      
    <!--通过style标签-->
      
    <style>
      
        div {
      
            border: 1px solid red;
      
        }
      
    </style>
      
</head>
    • 通过link标签结合(外部引入) 
      <link rel="stylesheet" href="../../css/divcss.css" />

  • 了解CSS的基本语法和常用的选择器

    • 语法规范

　　{

　　　　　　　　　属性:属性值 属性值

　　　　　　　　　　　　属性:属性值 属性值

　　　　　　　　}

    • 常用选择器

      • 标签选择器; 语法: 标签名{css代码}

        <style>
        
/*标签选择器*/
        
div{
        
    border: 1px solid red;
        
}
        
</style>
      • 类选择器语法: .类名{css代码} 
        <style>
        
    /*类选择器*/
        
    .divClass{
        
        border: 1px solid red;
        
    }

</style>
      • id选择器;语法: #id名{css代码} 
        <style>
        
    /*id选择器*/
        
    #divId{
        
        border: 1px red solid;
        
    }

</style>
      • 组合选择器 语法:选择器,选择器{css代码} 
        /*组合选择器*/
        
div,span{
        
    border: 1px solid red;
        
}
      • 后代选择器 语法:选择器1 选择器2 {css 代码}
      • 子代选择器 语法:选择器1>选择器2 {css 代码}:

  • 了解CSS的盒子模型,浮动.

    • 设置浮动

      <div style="float:left;"></div>
  • 　css盒子模型
    • margin:外边距
    • padding:内边距,里面的元素和边框之间的距离 
      <!DOCTYPE html>
      
<html>

    <head>
      
        <meta charset="UTF-8">
      
        <title></title>

    </head>

    <body>
      
        <div style="height: 300px; width: 300px ;border: red solid 1px;">
      
            <div style="background-color: blue; height: 100px;text-decoration: underline; width: 100px; border-style: dashed; margin: 35px; padding: 20PX;">

                BBB
      
                中国
      
            </div>
      
        </div>

    </body>

</html>

day02HTML_CSS的更多相关文章

随机推荐

  1. Xamarin Forms 进度条控件

    本文翻译:http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-control/ 里面都是胡说的,如果看不 ...

  2. ARM总线方面知识

    AMBA简介 随着深亚微米工艺技术日益成熟,集成电路芯片的规模越来越大.数字IC从基于时序驱动的设计方法,发展到基于IP复用的设计方法,并在SOC设计中得到了广泛应用.在基于IP复用的SoC设计中,片 ...

  3. 关于欧几里得算法（gcd）的证明

    求a,b的最大公约数我们经常用欧几里得算法解决,也称辗转相除法, 代码很简短, int gcd(int a,int b){ return (b==0)?a:gcd(b,a%b); } 但其中的道理却很 ...

  4. canvas绘制太阳系

    原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象 基本的三角函数 ...

  5. Bluetooth A2DP --Audio payload type

    数据结构: 字段解释: payload type: 0x60(96), dynamic type type 定义: https://www.iana.org/assignments/rtp-param ...

  6. 从架构演进的角度聊聊Spring Cloud都做了些什么？

    Spring Cloud作为一套微服务治理的框架,几乎考虑到了微服务治理的方方面面,之前也写过一些关于Spring Cloud文章,主要偏重各组件的使用,本次分享主要解答这两个问题:Spring Cl ...

  7. Ajax通过FormData上传文件

    1.使用<form>表单初始化FormData对象方式上传文件 HTML代码 <form id="uploadForm" enctype="multip ...

  8. 读《你不知道的JavaScript(上卷)》后感-作用域闭包（二）

    github原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们, ...

  9. 使用Identity Server 4建立Authorization Server (1)

    预备知识: http://www.cnblogs.com/cgzl/p/7746496.html 本文内容基本完全来自于Identity Server 4官方文档: https://identitys ...

  10. Linux学习（三）putty,xshell使用以及密匙登陆

    一.认识xshell,putty 他们都是服务器登陆客户端.xshell用户体验更好一点.但这里都学一下. putty下载地址:https://www.chiark.greenend.org.uk/~ ...