• 掌握表单标签

<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. ROS Indigo在ubuntu1404上的安装方法

    安装配置方法参照  http://wiki.ros.org/indigo/Installation/Ubuntu 以下操作需要保证虚拟机能够正常连接网络. 1.更换源镜像: 将源设置为国内源,我选择的 ...

  2. session多服务器共享的方案

    session的存储了解以前是怎么做的,搞清楚了来龙去脉,才会明白进行共享背后的思想和出发点.我喜欢按照这样的方式来问(或者去搞清楚):为什么要session要进行共享,不共享会什么问题呢? php中 ...

  3. HashMap工作原理 和 HashTable

    原文链接: Javarevisited 翻译: ImportNew.com - 唐小娟 译文链接: http://www.importnew.com/7099.html 你用过HashMap吗 譬如H ...

  4. 企业微信开发之发放企业红包（C#）

    一.企业微信API 地址:http://work.weixin.qq.com/api/doc#11543 二.参数说明 1.发送企业红包 请求方式:POST(HTTPS)请求地址:https://ap ...

  5. apache+php+mysql运行环境

    建议Apache2.4+php5.6+mysql5.5+phpmyadmin4.4.4 参考: http://jingyan.baidu.com/article/fcb5aff797ec41edaa4 ...

  6. LINUX 笔记-重定向 :<,<<,>,>>

    command>filename  把标准输出重定向到一个新文件中 command>>filename  把标准输出重定向到一个文件中(追加) command 1>filena ...

  7. Nginx监控-Nginx+Telegraf+Influxb+Grafana

    搭建了Nginx集群后,需要继续深入研究的就是日常Nginx监控. Nginx如何监控?相信百度就可以找到:nginx-status 通过Nginx-status,实时获取到Nginx监控数据后,如何 ...

  8. LeetCode 405. Convert a Number to Hexadecimal （把一个数转化为16进制）

    Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...

  9. 使用prettytable美化python的print输出

    经常碰到需要将一些数据用表格形式输出来.自己手动写太麻烦. 用prettytable能很好解决这个问题. ...(未完)

  10. Ubuntu上64位adv无法创建问题

    Ubuntu上安装android开发环境,前面都成功了,但到了最后创建adv的时候却总是失败. 出现了这个问题.最后,上网找了这个教程http://blog.sina.com.cn/s/blog_66 ...