day32_CSS-CSDN博客

本文链接：https://blog.csdn.net/qq_57747969/article/details/135871349

今日内容

0 复习昨日

1 css属性

2 盒子模型【重点】

3 css扩展属性

4 Bootstrap【重点】

0 复习昨日

1 表格标签

table
表格里面有tr , (行)
行内有单元格,td
行合并,rowspan
列合并,colspan

2 写出input标签type属性的值
文本框 text
密码框 password
单选框 radio
复选框 checkbox

文件框 file
日期框 date
邮箱框 email
普通按钮 button
重置按钮 reset
提交按钮 submit

3 input标签的name属性,用来给值定义名字,将来通过name来获得输入框的值

4 input标签的value属性,是框的默认值

5 CSS是让页面刚好看,HTML只需要写标签,把形式展现出来,其余的样式统统交给CSS来实现

6 引入css的三种方式

标签内使用style属性,写css代码
文件内使用<style>写css代码
单独创建css文件,在html文件中引入

7 写出3个基本选择器的基本语法

标签名选择器
id选择
类选择

8 css属性,各写出一个
字体属性 font-size
文本属性 color,text-align
背景属性 background-color
显示属性 display,值: 1) none 2)block 3)inline

标签是否显示
<input type="hidden"> 只是将输入框隐藏
----------------------------------------
<div class="xianshi"></div>
<p class="xianshi"></p>
<span class="xianshi"></span>
.xianshi{
	display:none
}
css属性display是对任何标签都可以设置隐藏和显示

1 盒子模型

通过"盒子模型"对页面进行布局,调整位置,一般将div设置成盒子

盒子有边框border
盒子内容与边框之间有填充padding
盒子与页面的页边距,margin

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子模型</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        /* 可以单独设置某一边
            border-xxx;
          可以给边框设置线形
            border-style
          可以给边框设置颜色
            border-color
          可以给边框设置尺寸
            border-width
          一般是同时设置四边线型,颜色,尺寸(没有顺序)
        */
        border: 2px dashed red;
        /* 可以单独设置某一边的填充
            padding-xxx;
           一般同时设置四边填充
           填充会将盒子尺寸变大(撑大)
        */
        padding: 20px;

        /* 
            可以单独设置某一边距
            margin-top;
            可以同时设置四边,是按照上,右,下,左的顺序
        */
        /* margin: 100px 200px 300px 400px; */
        /* 单独设置某一边的位置会更方便 */
        margin-left: 550px;
        margin-top: 150px;
      }
    </style>
  </head>
  <body>
    <div>
      用户名<input /><br />
      用户名<input />
    </div>
  </body>
</html>

调整边距是相对于父元素的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>嵌套的盒子</title>
    <style>
      #box1 {
        border: 2px red solid;
        width: 400px;
        height: 400px;
        margin-left: 200px;
        margin-top: 100px;
      }
      #box2 {
        border: 2px red solid;
        width: 100px;
        height: 100px;
        margin-left: 50px;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <div id="box2"></div>
    </div>
  </body>
</html>

在这里插入图片描述

2 浮动属性[了解]

盒子模型来定义,有些情况是无法布局实现的.

例如: 让盒子并排在一行

给标签设置css属性,完成浮动

float
left,向左浮动,直到碰到左边的边缘
right,向右浮动

特点:

浮动后,会脱离原来的文档流,不再占用原来的位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      #box1 {
        background-color: red;
        float: right;
      }
      #box2 {
        background-color: green;
        float: right;
      }
      #box3 {
        background-color: blue;
        float: right;
      }
    </style>
  </head>
  <body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
  </body>
</html>

练习,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>演示浮动应用</title>
    <style>
      body {
        background-color: #f5f5f5;
      }
      #box {
        width: 1000px;
        height: 800px;
        border: 1px white solid;
        background-color: white;
        margin-left: 200px;
      }
      img {
        float: right;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <img src="java4.jpg" />
      <p>
        20世纪90年代，硬件领域出现了单片式计算机系统，这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意，因为使用它可以大幅度提升消费类电子产品（如电视机顶盒、面包烤箱、移动电话等）的智能化程度。Sun公司为了抢占市场先机，在1991年成立了一个称为Green的项目小组，帕特里克、詹姆斯·高斯林、麦克·舍林丹和其他几个工程师一起组成的工作小组在加利福尼亚州门洛帕克市沙丘路的一个小工作室里面研究开发新技术，专攻计算机在家电产品上的嵌入式应用
      </p>
      <p>
        由于C++所具有的优势，该项目组的研究人员首先考虑采用C++来编写程序。但对于硬件资源极其匮乏的单片式系统来说，C++程序过于复杂和庞大。另外由于消费电子产品所采用的嵌入式处理器芯片的种类繁杂，如何让编写的程序跨平台运行也是个难题。为了解决困难，他们首先着眼于语言的开发，假设了一种结构简单、符合嵌入式应用需要的硬件平台体系结构并为其制定了相应的规范，其中就定义了这种硬件平台的二进制机器码指令系统（即后来成为“字节码”的指令系统），以待语言开发成功后，能有半导体芯片生产商开发和生产这种硬件平台。对于新语言的设计，Sun公司研发人员并没有开发一种全新的语言，而是根据嵌入式软件的要求，对C++进行了改造，去除了留在C++的一些不太实用及影响安全的成分，并结合嵌入式系统的实时性要求，开发了一种称为Oak的面向对象语言。
      </p>
    </div>
  </body>
</html>

3 定位属性

用于实现页面布局的功能之一.

使用的是css属性position,属性值有

relative
absolute
fixed

使用了定位属性后,才可以使用css属性,top,bottom,left,right这些属性

3.1 相对定位

语法: position: relative;

特点: 相对于当前原有位置进行移动,原有的位置还在

3.2 绝对定位

语法: position: absolute;

特点: 相对于父元素进行定位(父元素要定位),原有位置会从文档流消失

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      #box1 {
        background-color: red;
      }
      #box2 {
        background-color: green;
        /* 定位属性, position*/
        /* 属性值, relative 相对,相对于自己原有位置*/
        /* 属性值, absolute 绝对,相对于父元素调整*/
        position: absolute;
        /* 只有使用了定位,才可以使用left,right,top,bottom  */
        left: 100px;
        top: 100px;
      }
      #box3 {
        background-color: blue;
      }
      #fu {
        /* 父元素定位,子元素绝对定位才可以根据父元素定位 */
        position: relative;
        border: 2px red solid;
        width: 200px;
        height: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box1">box1</div>
    <div id="fu">
      <div id="box2">box2</div>
    </div>
    <div id="box3">box3</div>
  </body>
</html>

练习: 登录框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #login {
        width: 350px;
        height: 400px;
        border: 3px red solid;
        position: absolute;
        left: 600px;
        top: 150px;
        font-size: 20px;
      }
      #input {
        position: absolute;
        left: 50px;
        top: 125px;
      }
      input {
        width: 200px;
        height: 30px;
        font-size: 20px;
      }
      #img {
        position: absolute;
        left: 75px;
        top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="login">
      <div id="img">
        <img src="new_logo.png" />
      </div>
      <div id="input">
        用户名<input /><br />
        密码<input /><br />
      </div>
    </div>
  </body>
</html>

3.3 固定定位[了解]

固定定位相对于浏览器窗口固定,固定不动!

语法: position: fixed

特点: 相对于当前浏览器窗口固定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>固定定位</title>
    <style>
      #fixbox {
        border: 2px red solid;
        width: 300px;
        font-size: 25px;
        position: fixed;
        background-color: bisque;
        top: 300px;
        right: 0px;
      }
    </style>
  </head>
  <body>
    <div id="fixbox">小小千想和你聊一下~~</div>
    <p>
      您好，欢迎访问千锋教育，专注职业教育11年，已覆盖全国20个城市，大品牌，值得信赖！
    </p>
    <p>
      您好，欢迎访问千锋教育，专注职业教育11年，已覆盖全国20个城市，大品牌，值得信赖！
    </p>
  </body>
</html>

4 Boostrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷

官网: Bootstrap中文网 (bootcss.com)

4.1 下载

下载 https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip

生产环境版本
是压缩后,不包含源码和文档
文件大小比较小,节省资源
生产环境就是指项目已经开发完成,部署到服务器,为公司产生效益

源码版本
有完整的源码,文档
文件大小较大
一般用于开发环境,即就是在编码阶段

或者可以使用在线版本的

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">


<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

4.2 文件内容

在这里插入图片描述

4.3 入门使用

复制官网的样式,组件,到自己项目即可…

使用Boostrap的样式,组件前,

1.要将下载的boostrap的源码复制粘贴到当前项目文件夹下

2.创建html文件,在文件内引入bootstrap的样式文件

4.3.1 Bootstrap样式

4.3.1.1 栅格

将网页窗口系统会自动分为最多12列

    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

可以使用对页面的布局

    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>

4.3.1.2 表格

写table标签后,只需要给table标签设置class属性,然后使用bootstrap提供的表格样式类,即可出现不同的效果

table
table-striped
table-bordered
table-hover

可以配合栅格系统,调整表格大小

    <div class="row">
      <div class="col-md-6">
        <table class="table table-striped table-bordered table-hover">
          <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>邮箱</td>
          </tr>
          <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
            <td>111@qq.com</td>
          </tr>
          <tr>
            <td>2</td>
            <td>李四</td>
            <td>19</td>
            <td>222@qq.com</td>
          </tr>
          <tr>
            <td>3</td>
            <td>王王</td>
            <td>20</td>
            <td>333@qq.com</td>
          </tr>
        </table>
      </div>
    </div>

4.3.2 Bootstrap组件

4.3.2.1 字体图标

应该创建一个嵌套的 <span> 标签，并将图标类(class)应用到这个 <span> 标签上。

  <head>    
		<link href="./dist/css/bootstrap.css" rel="stylesheet" />
  </head>
  <body>
    <a href="#">
      <span class="glyphicon glyphicon-heart"></span>
    </a>
    <div>
      <span class="glyphicon glyphicon-remove"></span>
    </div>
  </body>

4.3.2.2 导航

4.3.2.3 分页

5 使用Bootstrap的模板

1 找到模板

2 复制模板的html代码

3 读代码,把不用的html标签删除

4 再引入自己项目中的bootstrap样式

5 再通过F12,调出开发者工具,找到源代码[source]

6 在其中找到模板自定义样式,拷贝粘贴到自己项目中的css文件

6 作业

1 重复今日代码2遍
2 尝试写一个登陆页面
3 抄一遍登陆页面的案例
4 boostrap要练熟悉,会用它的模板

lass)应用到这个 <span> 标签上。

  <head>    
		<link href="./dist/css/bootstrap.css" rel="stylesheet" />
  </head>
  <body>
    <a href="#">
      <span class="glyphicon glyphicon-heart"></span>
    </a>
    <div>
      <span class="glyphicon glyphicon-remove"></span>
    </div>
  </body>

4.3.2.2 导航

4.3.2.3 分页

5 使用Bootstrap的模板

1 找到模板

2 复制模板的html代码

3 读代码,把不用的html标签删除

4 再引入自己项目中的bootstrap样式

5 再通过F12,调出开发者工具,找到源代码[source]

6 在其中找到模板自定义样式,拷贝粘贴到自己项目中的css文件

6 作业

1 重复今日代码2遍
2 尝试写一个登陆页面
3 抄一遍登陆页面的案例
4 boostrap要练熟悉,会用它的模板