web前端:HTML+CSS

发布于 2018-12-23  157 次阅读


一、前端初识

  1. 标签
    • 标签成双成对
    • 开始标签< html >:< html >与< /html >标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
    • 头部标签< head >
    • 在< title >...< /title >里命名
    • 内容(文本、超链接、图像、表格、列表)在< body >...< /body >里
    • 元信息标签< meta >:永远位于head元素的内部
    • < !DOCTYPE >:声明必须是HTML文档的第一行,位于< html >标签之前。声明不是HTML标签,它是指示Web浏览器关于页面使用哪个HTML版本进行编写的指令。
  2. 文字基本标记
    • 段落标签:格式:< p >一段文字< /p >
    • 换行标签:格式:< br >此处换行
    • 不换行标签:格式:< nobr >不需换行的文字< /nobr >
    • 加粗标签:格式:< b >需要加粗< /b >
    • 倾斜标签:格式:< i >需要倾斜的文字< /i >
    • 标题标签:格式:< h1 >标题< /h1 >、< h1 > ~ < h6 >标签可定义标题。h1最大,h6最小。
  3. 浏览器默认字体大小是16PX。
  4. 首页命名:index.html default.html(这两个优先显示)。
  5. 内核
    • 四种
      • ie => -ms-
      • 谷歌=> -webkit-
      • 火狐=> -moz-
      • open=> -o-
  6. 常用命名
    • 导航栏 nav
    • 广告栏 banner
    • 内容区域 content
    • 头部 header
    • 底部栏 footer
  7. 快捷键
    • Ctrl + S(保存,要随时保存)
    • Ctrl + Z(撤回)
    • Ctrl + E(代码补全)(sublime)

二、关于盒子

  1. 盒子的三要素
    • 宽度(width 单位:px)
    • 高度(heigth 单位:px)
    • 颜色(background)
    /*这里以div盒子举例,btn是该盒子的名字*/
    .btn
    {
        width: 200px;      /*定义盒子的宽度*/
        heigth: 40px;      /*高度*/
        background: red;   /*盒子的背景颜色*/
    }
    
  2. div (块元素——盒子)

  3. 大盒子的宽 = margin + padding + border + 自身

  4. 盒子的两种显示方式

    • dispaly: block; 有高度,有宽度,但是要独处一行(默认的盒子)
    • display: inline-block; 有高度,有宽度,可以共处一行
    • 盒子共处一行会有间隔,一般是5px
  5. 让盒子共处一行的方式有两种
    • display: inline-block;
    • 浮动
      • float: left; 左浮动
      • float: right; 右浮动
  6. 在大盒子里面的小盒子可以当作字体元素来处理

  7. div的盒子添加了文字后基线会改到文字的底部 (相当于英语四线三格中的第三行线)

  8. 去除浮动造成的父级盒子塌陷

    • 在同级加一个div盒子,然后在样式里用:clear: both;
    • 直接在样式里用:overflow: hidden;(超出隐藏)

三、css

  1. “基本穿衣风格”

  2. 设置所有盒子的基本属性

    *
    {
        margin: 0px;
        padding: 0px;
        font-family: "微软雅黑";
        list-style: none;        /*去除圆点*/
    }
    
  3. 一些基本样式
    • 盒子三要素(上面已举例)
    • font 样式
    • text 样式
    • margin (外间距,可以为负数,为负数时盒子重叠)
    • padding (內间距,不可以为负数,最小为0。)
    • border (边框,有三属性:大小、颜色、线条类型)
    /*这里以div盒子举例,btn是该盒子的名字*/
    .btn
    {
        /*font 样式:字体样式、大小、颜色*/
        font-size: 18px;       /*字体大小*/
    
        color: white;          /*字体颜色*/
    
        /*text 样式:行间距,对齐*/
        text-align: center;    /*对齐(水平中对齐)*/
    
        line-height: 40px;     /*竖直中对齐*/
    
        margin-top: 10px;      /*上*/
        margin-bottom: 10px;   /*下*/
        margin-left: 10px;     /*左*/
        margin-right: 10px;    /*右*/
        margin: 100px  0px  2px  100px;   /*顺时排序,即上右下左*/
    
        padding:;  /*用法和 margin 一样*/
    
        border: 2px red double;  /*双层*/
        border: 2px red solid;   /*虚线*/
        border: 2px red dotted;  /*实线*/
    }
    
  4. overflow: hidden;  /*超出隐藏*/
    overflow: scroll;  /*超出滚动*/
    
  5. 图标圆角
    • border-radious: 10px;
    • 去掉圆角边框:border: none;
  6. 按钮动画效果
    • transition: backgrounde 2s; 过度=>属性 时间
  7. 伪类
    • link= 默认的链接效果,只针对文字有效
    • hover=鼠标移入的效果
    • active=鼠标点击下去的效果
    • visited=鼠标访问过后的效果
    a:link
    {
        color:green;
    }
    a:hover  /*鼠标移入的效果(页面里的任何元素都带有这个属性)*/ 
    {
        color:pink;
    }
    a:active  /*鼠标点击的时候*/
    {
        color:blue;
    }
    a:visited  /*访问后的效果(只对文字有效)*/
    {
        color:red;
    }
    a  /*直接写a代表link、hover、active、visited全部都有*/
    {
        color:red;
    }
    
  8. 伪元素
    ::after    /*往后加内容*/
    ::before   /*往前加内容*/
    
  9. 调整基线:条件:
    • 一定是有多个盒子
    • 一定要有display: inline-block;属性
    vertical-aglin:/* 基线对齐 */
    /*top、bottem、middle*/
    
  10. 节点
    • first-child 第一个节点
    • nth-child(1)
  11. input 表单属性
    • text
    • 按钮
      • value 用来做网页交互,不做内容提交
      • submit 用来提交表单内容
    • password
    • button
    • date
    • checkbox
    • radio
  12. outline:none; 取消外轮廓

四、内、外边距

  1. padding (內间距,不可以为负数,最小为0。用法上面有提到)
  2. margin (外间距,可以为负数,为负数时盒子重叠。用法上面有提到)
    • margin:auto:分配可用空间
      • margin-left:auto;
      • margin-right:auto;
      • margin-top:auto;和margin-bottom:auto;相当于0px;
      • margin:auto只是适用于display:block
      • margin:auto;当盒子没有宽度时不生效,必须是固定宽度

五、图片添加及文件路径

  1. img法

    • 在html文件里使用
    • 对于需要经常更新的用img法
    <img src="">
    
  2. background法
    • 在css文件里写
    • 对于不需要经常更新的用background法
    background: url(img/)
    
    
  3. 关于路径的问题
    • 绝对路径 C:\website\images\
    • 相对路径 ../images/
      • 相对路径指的是相对与当前文件的路径

六、居中问题

  1. 默认display: block;属性盒子的居中
    • 水平居中是在自己上面(要居中的盒子上)添加margin: auto;
  2. display: inline-block; 属性盒子的居中
    • 水平居中是在父级加上text-aline center;
    • 竖直居中
      • display: table-cell 作用:将盒子变为表格
      • 基线对齐:verticle-aline: middle;
  3. text-aline: justify; 两端对齐(要在父级加参考物)
  4. 基线对齐(基线对齐的用法在三-9)
    • 针对多个盒子,有display: inline-block属性

七、选择器

  1. 并集选择器(注意逗号)
    .left_con,.mid_con,.right_con
    {
        display: inline-block;
    }
    
    
  2. 属性选择器
    [/*属性*/ = ""]
    
    

八、定位

  1. 固定定位
    • 固定定位的参考点是浏览器的左上角

    • 会抽出文档流

    • 固定定位和和方向名词是一对好基友,一定要成对出现

    • 一直呆在浏览器的某个地方

    • 如何让固定定位的盒子居中

      transform: translateX(-50%);    /*X轴*/
      transform: translateY(-50%);    /*Y轴*/
      /*X,Y不能同时写*/
      /*要同时写的话:transform: translate(50%);*/
      
      
  2. 相对定位
    • 半抽出文档流
    • 做微调
    position:relative;
    
    
  3. 绝对定位
    • position: absolute;
    • 灵活布局,子绝父相(父级的大盒子相对定位,子级绝对定位)
    • 做盖映效果
    <!--额。。。偷懒了,style样式不能在HTML里面写-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div{
                width: 500px;
                height: 500px;
                background: skyblue;
                position: relative;
            }
            span{
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
                position: absolute;
                right: 0px;
                bottom: 0px;
            }
        </style>
    </head>
    <body>
        <div>
            <span></span>
        </div>
    </body>
    </html>
    
    

没有肆意生长的野心,哪来梦想的星辰大海。