CSS案例分析

今日案例

使用CSS完成网站首页的美化

使用CSS完成网站注册页面的美化

学习目标：

• 了解CSS的概念
• 了解CSS的引入方式
• 了解CSS的基本用法和常用的选择器
• 了解CSS的盒子模型，悬浮和定位

html简介

注意html是弱标记语言, 标签随便怎么写,都没有问题, 只是无法达到预期的效果

注意: 先写开始标签,再写结束标签, 再写里面的内容

使用CSS完成网站首页的美化

需求分析:

由于表格标签再布局的时候,嵌套太多层,很容易出现问题,并且它存在缺陷,不能自由移动位置,所以DIV+CSS来对我们的布局结构进行优化

技术分析

HTML的块标签:

• DIV: 它是块标签,会自动换行
• SPAN: 不会自动换行

HTML中头部标签含义

        <!--指定编码,告诉浏览器以什么编码方式打开文件-->        <meta charset="gbk">         <!--指定标签页的标题-->        <title>Span的演示案例</title>

CSS概述

• 什么是CSS
  
  • Cascading Style Sheets 层叠样式表
• CSS有什么作用
  
  • 主要用来类似于刷墙,美化我们的页面.
  • 将html页面内容和样式进行了分离,让文档看起来更清晰
  • 提高了代码复用

CSS的简单语法:

 /*    选择器{        属性名称:属性的值;        属性名称2: 属性的值2;    } */ h2{    color:red; }

CSS选择器:

• 它是主要是用于帮助我们更加精确查找页面元素

• CSS的基本选择器

  • ID选择器

  /*#ID的名称{        属性名称:属性的值;    属性名称2: 属性的值2;}*/#div1{color:blue;}

  • 类选择器

          /*         .类名{            属性名称:属性的值;         }        */        .shuiguo{            color:red;        }   

  • 元素选择器

  /*元素(标签)名称{    属性名称:属性值}*/div{    color:green;}

CSS的引入方式:

• 行内样式:

<!--行内样式-->        <div style="color: red;">111111</div>

• 内部样式:

  <style>         /*            #ID的名称{                属性名称:属性的值;                属性名称2: 属性的值2;            }         */        #div1{          color:blue;          border:1px solid red;        }    </style>

• 外部样式: 注意在新建的css文件中,不需要定义style标签

.shuiguo{            color:green;        }.shuchai{    color:green;}

CSS优先级:

• ID选择器优先级　＞　类选择器 > 元素选择器 精确度越高,优先级越大
• 类选择器在class中声明的顺序根本不重要, 重要的是谁先被引入到html中; 就近原则

CSS浮动:

        <!--            先创建一小水池            需要使用到float属性                    left: 向左浮动                    right: 向右浮动            clear:                both:  清除两侧浮动                none: 不清楚浮动        -->        <div style="width: 400px;height: 400px; border: 1px solid red;">            <div style="float:left;width: 100px;height: 100px; border: 1px solid blue;"></div>            <div style="clear: both;"></div>            <div style="width: 110px;height: 100px; border: 1px solid red;"></div>            <div style="width: 120px;height: 100px; border: 1px solid green;"></div>        </div>  

步骤分析:

1. 创建一个最外层div
2. 第一行: LOGO
3. 第二行:导航栏
4. 第三行:广告大图
5. 第四行:热门商品
6. 第五行: 广告图片
7. 第六行: Ctrl + C 第四行内容
8. 第7行: 页脚
9. 第八行: 网站声明:

代码实现:

使用DIV+CSS完成注册页面的优化

需求分析

技术分析

CSS的盒子模型:

CSS绝对定位:

注意:必须先写上position:absolute之后,left,top 属性才有效果

代码实现:

CSS部分内容的总结: