黑马程序员技术交流社区

标题: 【石家庄校区】用div&css来布局后台 [打印本页]

---

作者: 巴拉巴拉x    时间: 2018-5-3 11:53
标题: 【石家庄校区】用div&css来布局后台

用div&css来布局后台

• 框架
  
  
  • frameset 标签
  • frameset和body冲突,二者选其一,(在同一个html文件中)
    
    
    • 属性:
      
      
      • rows
      • cols
        
    • 分好以后,使用标签fram,代表切分的每个部分
      
      

                        

<frameset rows="" cols="">
                                      *   rows和cols二者选其一,这两个要一个一个用.                                          *   rows是分成几行    *   cols是分成几列   
                                      *   ""中的内容,是每段所占的比例,可以是具体像素值,也可以是百分比.
                                      *   frameset,分好以后,里面的具体的块的内容,用frame来区分   
                                      *   <frame src = "" name="">

• 在框架结构中,每个frame要起个名字.然后在超链接中,打开方式命令,可以输入这个名字,在指定frame块中打开
  

HTML特殊字符的标签

• 空格  :   & nbsp;
• < :   & lt;
• > :  & gt;
  

DIv+CSS块布局

• HTML的块标签
  
  
  • div :默认一个div独占一行(即自动换行功能)
  • span:默认在同一行
    
  
  

CSS的概述

• 什么是css?
  
  
  • 层叠样式表
  • 样式定义如何显示HTML元素
  • 样式通常存储在样式表中
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在CSS文件中
  • 多个样式定义可层叠为一(不太懂){可以在一个样式里面定义不同的属性}
  • HTML相当于网页的骨架,CSS对骨架进行美化,即是血肉
    
• css在哪些地方使用
  
  
  • 任何网站都会使用css去美化页面
    
• 如何使用css
  
  
  • css的基本语法
    
    
    • 包含两个部分:一个选择器,一个声明条(声明可以是一个或者多个声明).
      

选择器 {
    属性:值   

               color:red;   



             font size:5   



size可以是像素值,没有大小限制.   



}

• 
  
  • 
    

• HEML中所有标签都有style属性
• HTML中所有标签都有id属性
• HTML中所有标签都有class属性
• CSS的引入方式
  
  
  • 行内样式:直接在HTML的元素上使用.有局限性,只能针对当前行的元素有效
  • 内部样式表:在HTML的head标签中使用style标签来设置.(不安全)
  • 外部样式表:单独去定义一个.css的文件,在HTML中引入该文件.
    
    
    • 引入外部样式表要使用标签link标签,在head标签内引入.
    • 在外部样式表中,不要写style标签.
      
      
      • link标签的属性
        
        
        • href:
        • type:
        • rel:
          

        引入外部样式表,href和rel属性是必需的!!type最好也写上

        
        
  • 优先级
    
    
    • 就近原则
    • 行内>内部>外部;
      
    
    
• 样式的调试
  
  
  • 借助浏览器的自带功能
    
    
    • Styles页面下的
      
      
      • element.style
      • 内部样式表
      • 外部样式表
        
      
      
    
    
• 样式内容
  
  
  • 边框的内容
    
    
    • border:边框的宽度
    • solid :实线
    • blue  :蓝色
      
    
    
  
  

CSS的选择器

• 选择器:
• 元素选择器
  
  
  • 也有人叫标签选择器
    
    
    • 所有这个标签的内容都按照他设置的属性进行改变(即是一个类,里面的属性就是类的成员变量.冒号后面就是变量的值.)
      
    
    
• ID选择器,给元素一个ID值,
  
  
  • ID最好不要重复,命名按照Java命名规则来命名.
    

#ID值{
    属性:属性值
        }

• 类选择器

  .类名{
      属性:属性值}

  
  
  • 调用的时候在行内用class="类名"来调用. 类名可以有多个,在同一个分号内中间用空格隔开.
    
    
    • 浏览器加载是从上往下加载,后面加载的和前面样式相同的,会把前面的覆盖.
      
    
    
• 选择器分组
  
  
  • 中间用","分开
    
    

    h1,p,a{
        color:red;}

    
    
• 属性选择器 元素[属性]
  
  

  input[type="text"]{
      background-color:red;}

• 后代选择器
  
  
  • 用空格隔开
    
  
  

  *   div strong{
      }

  
  
  • div下面的所有strong元素都被选中
    
• 子元素选择器
  
  
  • 用>隔开
    
  
  

  *  div>strong{
  ​}

  
  
  • div下面第一层的strong元素.
    
  
  
  
  
  

CSS的悬浮

• 使用float属性
• 把一层变成两层.
  
  
  • float的值
    
    
    • left : 向左浮动
    • right: 向右浮动
    • both : 向两边浮动
      
    
    
• clear属性
  
  
  • 清除浮动:就是把浮动效果清除,.影响的是后面的内容.后面的内容不再悬浮,
    
  
  

CSS的样式

• 背景
• 文本
• 字体
• 列表
  

CSS盒子模型

属性

• padding
  

h1{
    padding:10px;}
这是四个边都是10px,优先上和下​
h1{    padding:     10px 0.25em 2ex 20%    }
顺序:上右下左.

• 边框:border
• 外边距:margin
• 内边距:padding
• 边框有四个方向
  
  
  • top
  • right
  • buttom
  • left
    
  
  

CSS中的定位

• position属性设置定位
  
  
  • relative:相对定位
  • absolute:绝对定位
  • 使用另外两个属性,left,right.显示方式
    
• 标签:display
  
  
  • none;不显示
  • block;显示
  • inline;显示到一行上(一般常用于无序列表)
    
  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2