• 掌握表单标签

<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. Awesome Projects (汇聚全球所有🐮项目，你值得拥有)

    Awesome Projects SkySeraph Oct 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.skyseraph.c ...

  2. C GOTO使用示例

    GOTO虽然会破坏程序的结构,使用代码可读性变差,但是GOTO依然还是有可用的地方 #include <stdio.h>#include <stdbool.h> int mai ...

  3. Bootstrap的核心——栅格系统的使用

        前  言 絮叨絮叨 Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 而栅格系统是Bootstrap中的核心,正是因为栅格系统的 ...

  4. web 开发中的路由是什么意思

    路由: 就是一个路径的解析,根据客户端提交的路径,将请求解析到相应的控制器上 从 URL 找到处理这个 URL 的类和函数

  5. Python对于CSV文件的读取与写入

    今天天气"刚刚好"(薛之谦么么哒),无聊的我翻到了一篇关于csv文件读取与写入的帖子,作为测试小白的我一直对python情有独钟,顿时心血来潮,决定小搞他一下,分享给那些需要的小白 ...

  6. 数据权限设计——基于EntityFramework的数据权限设计方案：一种设计思路

    前言:“我们有一个订单列表,希望能够根据当前登陆的不同用户看到不同类型的订单数据”.“我们希望不同的用户能看到不同时间段的扫描报表数据”.“我们系统需要不同用户查看不同的生产报表列”.诸如此类,最近经 ...

  7. linux云服务器常用设置

    前面的话 由于在云服务器上配置自己的网站,将Linux里的常用设置记录如下 更改shell 默认地, ubuntu系统默认的shell是dash,但更常用的shell是bash 通过下面命令可以将da ...

  8. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  9. Element ui表格展示图片问题

    当需要遍历图片时,不能直接使用prop绑定值,具体 代码如下 <el-table-column label="头像" width="100"> &l ...

  10. Quart.Net分布式任务管理平台（续）

           感谢@Taking园友得建议,我这边确实多做了一步上传,导致后面还需处理同步上传到其他服务器来支持分布式得操作.所有才有了上篇文章得完善. 首先看一下新的项目结构图: 这个图和上篇文章中 ...