• 掌握表单标签

<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. win10 uwp 绑定密码

    win10 下,密码框无法绑定到ViewModel,Password是不可以绑定. 我们可以自己使用简单方法去绑定 我们之前在WPF 使用绑定密码框,我写了一篇,关于如何绑定,我提供一个我自己试了可以 ...

  2. Ceph和Openstack的cinder模块对接方法

    1.创建存储池 在ceph节点中执行如下语句. #ceph osd pool create volumes 2.配置 OPENSTACK 的 CEPH 客户端 在ceph节点两次执行如下语句,两次{y ...

  3. 关于WSL(Windows上的Linux子系统)的介绍

    WSL,Windows Subsystem for Linux,就是之前的Bash on [Ubuntu on] Windows(嗯,微软改名部KPI++ 首先要说一句,其实Windows 10在一周 ...

  4. MyBatis 原始Dao开发方式

    原始Dao开发方法需要程序员编写Dao接口和Dao实现类. 映射文件 <?xml version="1.0" encoding="UTF-8" ?> ...

  5. C++STL之双端队列容器

    C++STL之双端队列容器 deque双端队列容器与vector很类似,采用线性表顺序存储结构.但与vector区别,deque采用分块的线性存储结构来存储数据,每块的大小一般为512B,将之称为de ...

  6. C Run-Time Error R6034问题的解决

    1.问题描述 这两天一直在用vs2008编写一个小项目,需要在c++代码中通过命令行的方式调用cl.exe和link.exe,也就是给编译器cl和链接器link传递参数,然后编译链接生成可执行文件ex ...

  7. c++の奇技淫巧

    >如何用cmd编译c++?-m32究竟是什么操作?这究竟是道德的沦丧还是人性的泯灭,请收看今日的c++奇技淫巧 咳咳,扯远了(正经脸)主要是今天学了c++的一些编译技巧以及cmd的一些操作,总结 ...

  8. Hadoop部署配置文件

    为了方便大家修,我把要修改的地方标红了,找到对应文件,复制粘贴过去就可以了 注:这个是我安装的Hadoop的配置,要根据我之前发的文章配置才行, 里面有一些东西比如文件夹名称,路径不一样,稍加修改也可 ...

  9. php缓存模块apc可能导致php-fpm终止

    如果你的网站出现502错误.同时你网站中又使用了apc模块来做缓存处理.那么这篇文章兴许能帮到你. 首先,查看了php-fpm 的进程数. 发现php-fpm的进程数已经到达了php-fpm.conf ...

  10. 第三方软件内嵌IE出现纵向滚动条消失的BUG，奇葩的IE BUG 真是无奇不有

    混了这么久 竟然还有这样难以解决的BUG,最后都跑到英文的MSDN上提问了,因为谷歌都谷不出朕的忧伤了,有木有. 提问原文如下:https://social.msdn.microsoft.com/Fo ...