首页 > 编程语言 >JavaWeb__HTML&CSS

JavaWeb__HTML&CSS

时间：2024-07-08 19:56:25浏览次数：20  
标签：__ JavaWeb color 标签 元素 HTML background 选择器 CSS

目录

一、HTML

1、网页的组成部分

页面由三部分组成，分别是内容（结构）、表现、行为

  • 内容（结构）：是我们在页面中可以看到的数据，我们称之为内容，一般内容，我们使用html技术来展示
  • 表现：指的是这些内容在页面上的展示形式，比如说。布局、颜色、大小等等。一般使用CSS技术实现。
  • 行为：指的是页面中元素与输入设备交互的响应，一般使用javaScript技术实现。

2、HTML文件的书写规范

HTML通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

<!DOCTYPE html><!--约束，声明为html5文档-->
<html lang="en"><!--html标签表示html的开始 lang="zh_CN表示中文" html标签中一般分为两个部分，分别是head和body-->
<head><!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
    <title>标题</title><!--表示标题-->
</head>
<body><!--body标签是整个html页面显示的主题内容-->
    hello
</body>
</html>

3.HTML标签的介绍

  • 标签的格式：<标签名>封装的数据</标签名>
  • 标签名大小写不敏感
  • 标签拥有自己的属性
    • 分为基本数据：bgcolor=“red” 可以修改简单的样式效果
    • 事件属性：οnclick=“alert(‘你好！’)” 可以直接设置事件响应后的代码
  • 标签又分为，单标签和双标签
    • 单标签格式：<标签名/>
    • 双标签格式：<标签名>…封装的数据</标签名>

4、标签的语法

  • 标签不能交叉嵌套
<!--标签不能交叉嵌套-->
正确:<div><span>早安，尚硅谷</span></div>
错误:<div><span>早安，尚硅谷</div></span>
  • 标签必须正确关闭
  • 没有文本内容你那个的标签
<!--没有文本内容的标签-->
正确:<br/>1
错误:<br>2
  • 属性必须有值，属性值必须加引号
<!--属性必须有值，属性值必须加引号-->
正确：<font color="blue">尚硅谷</font><br/>
错误：<font color=blue>尚硅谷</font><br/>
错误：<font color>尚硅谷</font><br/>
  • 注释不能嵌套

5、常用标签介绍

  • font字体标签
<font color="red" face="宋体" size="7">标签字体</font>
  • 特殊字符
    在这里插入图片描述
我是&nbsp; &lt; &gt; &amp; &quot; &apos; 标签
  • 标题标签（h1-h6）

align对齐属性（left，right，center）然后放大缩小网页它会自动对齐

<h1 align="left">标题一</h1>
<h2 align="right">标题二</h2>
<h3 align="center">标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
  • 超链接
  • href属性设置链接的地址
  • target属性设置哪个目标进行跳转
  • _self表示当前页面 默认是这个
  • _blank 表示打开新页面进行跳转
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

在这里插入图片描述

  • 列表标签
  • ul是无序列表
  • ol是有序列表
    • li列表项
    • type属性可以修改列表项前面的符号
<ul>
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>
  • img标签

img标签是图片标签，用来显示图片

  • src属性可以设置图片的路径
  • width属性设置图片的宽度
  • height属性设置图片的高度
  • border属性设置边框的大小
  • title属性设置鼠标悬停时提示的文字
  • alt属性设置当指定路径找不到图片时，用来代替的信息

在javase中路径也分为相对路径和绝对路径

  • 相对路径：从工程名开始算
  • 绝对路径：盘符：/目录/文件名

在web中路径分为相对路径和绝对路径两种

  • 相对路径：
    • . 表示当前文件所在的目录
    • . .表示当前文件所在的上一级目录
    • 文件名： 表示当前文件所在目录的文件，相当于 ./文件名 ./可以省略
  • 绝对路径： 格式是： http://ip:port/工程名/资源路径
<img src="../imgs/02.jpg" width="100" height="260" border="20"/>
  • table标签

table是表格标签

  • border 是表格边框大小
  • width 是表格宽度
  • height 是表格高度
  • align设置整体表格的对齐方式
  • cellspacing是设置单元格之间的间距

tr是行标签

  • td表示单元格，但是还要去设置加粗、居中
  • th是表头标签，已经设置好了加粗和居中
  • align设置单元格的对齐方式
  • b是加粗标签
<table border="3" width="300" height="200" align="center" cellspacing="10">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>13</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>23</td>
    </tr>
</table>

在这里插入图片描述

  • table标签跨行和跨列
<table border="1" width="400" align="center" height="200" cellspacing="0">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>13</td>
        <td rowspan="6">你还哦</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>23</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王二</td>
        <td>93</td>
    </tr>
    <tr>
        <td>总人数 </td>
        <td colspan="2"> 2000</td>
    </tr>
    <tr>
        <td> 平均数</td>
        <td colspan="2">20 </td>
    </tr>
    <tr>
        <td> 及格率</td>
        <td colspan="2">20% </td>
    </tr>

</table>

在这里插入图片描述

  • iframe标签（内嵌窗口）

ifarme标签它可以在一个html页面上，打开一个小窗口去加载单独的页面。

<body>
    这是一个单独的页面<br/>
<!--    iframe标签可以在页面上开辟一个小区域显示一个单独的页面-->
<!--        iframe和a标签使用步骤-->
<!--            1、在iframe标签上使用name属性定义一个名称-->
<!--            2、在a标签的target属性上设置iframe的name的属性值-->
    <iframe src="table表格.html" name="abc" width="350" height="250">
    </iframe>
    <br/>
    <br/>
    <br/>
    <ol>
        <li><a href="font标签.html" target="abc">font标签</a></li>
        <li><a href="table表格.html" target="abc">table表格</a></li>
    </ol>
</body>
  • 表单显示

标签就是html页面中，用来收集用户信息的所有元素集合，然后发送服务器

form标签就是表单项

  • input type="text"是单行文本输入框 value属性设置文本框的默认值
  • input type="password"是密码输入框 value属性设置密码框的默认值
  • input type="radio"是单选框 name属性可以对其分组，同一组只可以选一个 checked="checked"就是默认选择
  • input type="checkbox"是复选框 checked="checked"就是默认选择
  • input type="reset"是重置按钮 value可以修改按钮上的文字
  • input type="submit"是提交按钮 value可以修改按钮上的文字
  • input type="button"是按钮 value可以修改按钮上的文字
  • input type="file"是提交文件
  • input type="hidden"是隐藏域 当我们要发送某些信息，而这些信息，不需要用户看见或参与，就可以使用（提交也会发给服务器）
  • select是下拉列表框
    • option是下拉列表框中的选项， selected="selected"设置默认选中
  • textarea 表示多行文本输入框（起始标签和结束标签中的值是默认值）
    • rows属性设置可以显示几行
    • cols属性设置每行可以显示几个字符宽度
<body>
<!--需求1 ：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），-->
<!--兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交-->

<form>
    用户名称：<input type="text" value="123"></input><br/>
    用户密码：<input type="password"></input><br/>
    确认密码：<input type="password"></input><br/>
    
    性别：<input type="radio" name="sex" checked="checked">男</input>
         <input type="radio" name="sex">女</input><br/>
         
    兴趣爱好：<input type="checkbox">Java</input>
             <input type="checkbox" >JavaScript</input>
             <input type="checkbox" >C++</input></br>
             
    国籍：<select>
        <option>--请选择国籍--</option>
        <option>中国</option>
        <option>美国</option>
        <option>英国</option>
    </select></br>
    
    自我评价：<textarea rows="10" cols="20">默认是在这</textarea></br>
    
    <input type="reset" value="重置"></input>
    <input type="submit"value="登录"></input>
    <input type="file"></input>
    <input type="hidden"></input>
</form>
</body>

在这里插入图片描述

在这里插入图片描述

表单提交的时候，数据没有发送给服务器的有三种原因
（1）表单项没有name属性值
（2）单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
（3）表单项不在提交的form标签中

  • GET请求的特点：
    （1）浏览器地址栏中的地址是：action属性+？+请求参数
         请求的格式是：name=value&name=value
    （2）不安全
    （3）它有数据长度的限制
  • POST请求的特点：
    （1）浏览器地址栏中只有action属性值
    （2）相对于GET请求更安全
    （3）理论上没有数据长度的限制
<body>

<form action="http://www.baidu.com" method="post">
    <input type="hidden" name="action" value="login"></input>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <th>用户名称：</th>
            <th><input type="text" value="123" name="username"></input><br/></th>
        </tr>
        <tr>
            <th>用户密码：</th>
            <th><input type="password" name="pwd"></input><br/></th>
        </tr>
        <tr>
            <th>性别：</th>
            <th>
                <input type="radio" name="sex" checked="checked" value="男">男</input>
                <input type="radio" name="sex" value="女">女</input><br/>
            </th>
        </tr>
        <tr>
            <th>兴趣爱好：</th>
            <th>
                <input type="checkbox" name="hobby" value="java">Java</input>
                <input type="checkbox" name="hobby" value="jsp">JavaScript</input>
                <input type="checkbox" name="hobby" value="c++">C++</input></br>
            </th>
        </tr>
        <tr>
            <th>国籍：</th>
            <th>
                <select name="country">
                    <option>--请选择国籍--</option>
                    <option value="中国">中国</option>
                    <option value="美国">美国</option>
                    <option value="英国">英国</option>
                </select></br>
            </th>
        </tr>
        <tr>
            <th>自我评价：</th>
            <th><textarea name="desc" rows="10" cols="20">默认是在这</textarea></br></th>
        </tr>
        <tr>
            <th><input type="reset"></input></th>
            <th><input type="submit"></input></th>
        </tr>
    </table>
</form>
</body>
  • 其他标签（div,span,p，br）
  • div标签 默认独占一行
  • span标签 它的长度是封装数据的长度
  • p段落标签 默认会在段落的上方或下方各空出一行来
  • br标签 换行
  • div 标签 俗称"块"，主要用于划分页面结构，做页面布局
    • div属于块元素（h1~h6也属于块元素）
    • 块元素：自己独占一行的元素。
      • 块元素的CSS样式的宽、高等等，往往都是不生效的
  • span标签 俗称"层"，主要用于划分元素范围，配合CSS做页面元素样式的修饰
    • span属于行内元素
    • 行内元素：不会自己独占一行的元素
      • 行内元素的CSS样式的宽、高等等，很多都是不生效的
      • 适合将某些地方单独拎出来强调等用途
<body>
<!--需求：div span p标签-->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>
    <br/>
</body>

二、CSS

1、CSS技术介绍

CSS是[层叠样式表单]。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记行语言

2、CSS语法规则

在这里插入图片描述

  • 选择器：浏览器根据“选择器”决定CSS样式影响的html元素（标签）
  • 属性（property）：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明
  • 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开，虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）

3、CSS和HTML的结合方式

3.1、 行内式

<body>
<!--需求：分别定义两个div，span标签分别修改每个div标签的样式为：边框1个像素，实线，红色-->
    <div style="border: 1px solid red;">div标签1</div>
    <div style="border: 1px solid red;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>

缺点：

  • 如果标签多了。样式多了，代码量庞大
  • 可读性非常差
  • css代码没什么复用性可言

3.2、 内嵌式

在head标签中，使用style标签来定义本页面的公共样式
通过选择器确定样式的作用元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--需求：分别定义两个div，span标签分别修改每个div标签的样式为：边框1个像素，实线，红色-->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

缺点：

  • 只能在同一页面内复用代码，不能再多个页面中复用css代码
  • 维护起来不方便，实际的项目中会有成千上万的页面，- 要到每个页面中去修改，工作量大

3. 3、外部样式表

把css样式写成一个单独的.css文件，那个html需要这些代码就在head中通过link标签引入。

  • 使用html的
<link rel="stylesheet" type="text/css" href="./styles.css">
  • 标签 导入css样式文件
div{
    border: 1px solid red;
}
span{
    border: 1px solid red;
}


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!--需求：分别定义两个div，span标签分别修改每个div标签的样式为：边框1个像素，实线，红色-->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

4、CSS选择器

4.1、标签名选择器

根据标签的名字确定样式的作用元素

  标签名{
      属性:值;
  }

<head>
    <meta charset="UTF-8">
   <style>
    input {
        display: block;
        width: 80px; 
        height: 40px; 
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: '隶书';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
    <button>按钮5</button>
</body>

在这里插入图片描述

4.2、 id选择器

根据标签的id值确定样式的作用元素
id值有唯一性，样式只能作用到一个元素上

  #id 属性值{
        属性：值;
  }

<head>
    <meta charset="UTF-8">
   <style>
    #btn1 {
        display: block;
        width: 80px; 
        height: 40px; 
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: '隶书';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮1"/> 
    <input id="btn2" type="button" value="按钮2"/> 
    <input id="btn3" type="button" value="按钮3"/> 
    <input id="btn4" type="button" value="按钮4"/> 
    <button id="btn5">按钮5</button>
</body>

在这里插入图片描述

说明

  • 一般每个元素都有一个唯一的id属性。但是在一个页面中，每个元素的id值不应该相同，即，id具有唯一性。因此所有id选择器也只能影响一个元素的样式
    • 一个id选择器 对应 一个元素的样式
    • 一个id选择器 不能对应 多个元素的样式

4.3、class选择器（类选择器）

根据元素的class属性有效的选择地去使用这个样式

  .class属性值{
         属性：值;
  }

与id选择器的区别就是id只能有一个标签去使用他，而类选择器中能有好多标签去使用他

<head>
    <meta charset="UTF-8">
   <style>
    .shapeClass {
        display: block;
        width: 80px; 
        height: 40px; 
        border-radius: 5px;
    }
    .colorClass{
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
    }
    .fontClass {
        font-size: 22px;
        font-family: '隶书';
        line-height: 30px;
    }

   </style>
</head>
<body>
    <input  class ="shapeClass colorClass fontClass"type="button" value="按钮1"/> 
    <input  class ="shapeClass colorClass" type="button" value="按钮2"/> 
    <input  class ="colorClass fontClass" type="button" value="按钮3"/> 
    <input  class ="fontClass" type="button" value="按钮4"/> 
    <button class="shapeClass colorClass fontClass" >按钮5</button>
</body>

在这里插入图片描述

4.4、组合选择器

  选择器1，选择器2，选择器3…n{
              属性：值;
  }

组合选择器可以让多个选择器共用同一个代码。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class01, #id001{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }

    </style>
</head>
<body>
<!--  需求修改class="class01"的div标签和id="id01"所有的span标签，-->
<!--  字体颜色为蓝色，字体大小为20个像素，边框为1像素的黄色实线-->

<div class="class01">div标签</div>
<span id="id001">span 标签</span>
<div>div标签</div>
<div>div标签id01</div>
</body>

4.5、CSS常用样式

  • 字体颜色

color: red;
颜色可以写颜色名字：black、red等
颜色也可以写rgb值和十六进制表示值，如rgb(255, 0, 0)，如果写十六进制必须加#

  • 宽度

width: 19px;
宽度可以写像素值： 19px;
也可以写百分比值：20%;

  • 高度

height: 20px;
高度可以写像素值： 19px;
也可以写百分比值：20%;

  • 背景颜色

background-color:#OF2D4C

  • 字体样式

color:#FF0000；
font-size: 20px;

  • 红色1像素实现边框

border: 1px soild red;

  • DIV居中

margin-left:auto; //向左对齐
margin-right:auto; //向右对齐 这样就左不左右不右 就居中了

  • 文字居中

text-align: center //文字居中

  • 超链接去下划线

text-decoration: none;

  • 表格细线

table{
​ border: 1px solid black; //这里设置的是表格的最外面
​ border-collapse:collapse; //将边框合并
​ }
td,th{
​ border:1px solid black; //这里设置的是表格的里面的单元格的线
​ }

  • 列表去除修饰

ul{
list-style:none;
}

5、CSS浮动

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • 浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。
  • 文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

浮动原理

  • 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
    在这里插入图片描述
  • 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失
    在这里插入图片描述
  • 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
    在这里插入图片描述
  • 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
    在这里插入图片描述
  • 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
    在这里插入图片描述
    浮动的样式名:float
    在这里插入图片描述

通过代码感受浮动的效果

代码1+效果

  • 代码
    • display: inline
      • display- 表现出来的属性
      • block- 块元素
      • inline- 行内元素
<head>
    <meta charset="UTF-8">
   <style>
    .outerDiv {
        width: 500px;
        height: 300px;
        border: 1px solid green;
        background-color: rgb(230, 224, 224);
    }
    .innerDiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        float: left;
    }
    .d1{
        background-color: greenyellow;
       /*  float: right; */
    }
    .d2{
        background-color: rgb(79, 230, 124);
    }
    .d3{
        background-color: rgb(26, 165, 208);
    }
   </style>
</head>
<body>
   <div class="outerDiv">
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
   </div> 
</body>

在这里插入图片描述
代码2+效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 
        display: inline
        display-表现出来的属性 block-块元素  inline-行内元素
    -->
    <style>
        .outerDiv{
            width: 500px;
            height: 300px;
            border: 1px solid rgb(112, 126, 112);
            background-color: beige;
        }

        .innerDiv1{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        .innerDiv2{
            width: 100px;
            height: 150px;
            border: 1px solid blue;
        }
        .innerDiv3{
            width: 100px;
            height: 200px;
            border: 1px solid blue;
        }

        /*
        float：浮动属性。 
        当进行操作的时候会出现释放文档流的现象，有些元素可能会被遮挡，
        但是由于设计的初衷是不会挡住文本，因此这些被遮挡的元素里的文本又会在它上涌之前的位置显示出来。
        */
        .d1{
            background-color: greenyellow;
            float: left;
        } 
        
        .d2{
            background-color:rgb(210, 119, 119);
            float: left;
        } 
        
        .d3{
            background-color: rgb(142, 236, 229);
            float: left;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv1 d1">div1</div>
        <div class="innerDiv2 d2">div2</div>
        <div class="innerDiv3 d3">div3</div>
    </div>
</body>
</html>

在这里插入图片描述

6、CSS定位

position 属性指定了元素的定位类型。

  • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
  • 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
  • position：
    • static - 默认值
    • absolute - 绝对定位
    • relative - 相对定位1：相对元素原本的位置来定位 不释放文档流，下面的div2不会涌上来占位
    • fixed - 相对定位2：相对浏览器窗口的位置来定位 释放文档流，下面的div2会涌上来占位
  • left - 距离页面左端的距离
  • right - 距离页面右端的距离
  • top - 距离页面顶端的距离
  • bottom - 距离页面底端的距离

在这里插入图片描述

6.1、静态定位

  • 说明
    • 不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: static;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

在这里插入图片描述

6.2、绝对定位（absolute）

  • 说明
    • absolute ,通过 top left right bottom 指定元素在页面上的固定位置
    • 定位后元素会让出原来位置,其他元素可以占用
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: absolute;
            left: 300px;
            top: 100px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

在这里插入图片描述

6.3、相对定位(relative)

  • 说明
    • relative 相对于自己原来的位置进行移位
    • 定位后保留原来的站位,其他元素不会移动到该位置
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: relative;
            left: 30px;
            top: 30px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

在这里插入图片描述

6.4、固定定位(fixed)

  • 说明
    • fixed 始终在浏览器窗口固定位置,不会随着页面的上下移动而移动
    • 元素定位后会让出原来的位置,其他元素可以占用
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: fixed;
            right: 30px;
            top: 30px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
        br*100+tab
</body>

在这里插入图片描述

7、 CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

  • CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）
    在这里插入图片描述
  • 说明：
    • Margin(外边距) - 清除边框外的区域，外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    • Content(内容) - 盒子的内容，显示文本和图像。

在这里插入图片描述

    <head>
        <meta charset="UTF-8">
       <style>
        .outerDiv {
            width: 800px;
            height: 300px;
            border: 1px solid green;
            background-color: rgb(230, 224, 224);
            margin: 0px auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            /* margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px; */
            margin: 10px 20px 30px 40px;
           
        }
        .d1{
            background-color: greenyellow;
            /* padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px; */
            padding: 10px 20px 30px 40px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
       </style>
    </head>
    <body>
       <div class="outerDiv">
            <div class="innerDiv d1">框1</div>
            <div class="innerDiv d2">框2</div>
            <div class="innerDiv d3">框3</div>
       </div> 
    </body>

在这里插入图片描述
在浏览器上,通过F12工具查看盒子模型状态

在这里插入图片描述

标签：__,JavaWeb,color,标签,元素,HTML,background,选择器,CSS
From： https://blog.csdn.net/qq_45606619/article/details/140189301

相关文章

  • 构建自己的docker基础镜像
    构建自己的docker基础镜像构建一个完全定制的基础镜像意味着您需要从一个非常小的镜像（例如scratch镜像）开始，然后逐步添加您需要的所有内容。scratch镜像是一个空白的基础镜像，可以用来创建高度定制的容器环境。创建一个基础镜像构建debian基础镜像准备根文件系统：要构......
  • Android 10.0 SystemUI启动流程
    1、手机开机后，Android系统首先会创建一个Zygote（核心进程）。2、由Zygote启动SystemServer。3、SystemServer会启动系统运行所需的众多核心服务和普通服务、以及一些应用及数据。例如：SystemUI启动就是从SystemServer里启动的。4、进入锁屏界面，开机完成。SystemServer中......
  • C#中的异常捕获 try catch finally
    处理异常提供的四个关键字，try...catch...finally...throwfinally最后，不管异常是否被抛出都会执行，例如打开一个文件，不管是否出现异常都需要关闭，throw:当问题出现的时候程序可以抛出一个异常，使用throw关键字抛出异常，try{执行的代码}catch(ExceptionNamee1){处理异常t......
  • 高效维护区间之和/区间最值的数据结构(一)——树状数组
    高效维护区间之和/区间最值的数据结构(一)——树状数组树状数组的核心思想：分治。将数组以二叉树的形式进行维护区间之和。设aaa为原数组，......
  • git合并代码方法
    你合并代码用merge还是用rebase?macrozheng 2024年07月08日14:10 江苏 1人听过 以下文章来源于古时的风筝 ，作者风筝古时的风筝.写代码是一种爱好，写文章是一种情怀。mall学习教程官网：macrozheng.com你们平时合并代码的时候用merge还是rebase？我问了......
  • mormot.core.threads--TBlockingProcess
    mormot.core.threads--TBlockingProcesstype///TBlockingProcess实例的当前状态TBlockingEvent=(evNone,//无状态evWaiting,//等待状态evTimeOut,//超时状态evRaised);//触发状态{$M+}//开启内存管理消息，用于调试......
  • 常见的概率分布
    1.离散型分布1.1两点分布（伯努利分布/贝努利分布/0-1分布）称随机变量\(X\)服从参数为\(p\)的伯努利分布，如果它分别以概率\(p\)和\(1-p\)取1和0为值。​\[P(X=k)=p^k(1-p)^{1-k},\quadk=0,1\\X\simB(1,p)\\E(X)=p\\D(X)=p(1-p)\]1.2二项分布n次独立的伯努利......
  • 工具安装
    虚拟机——VMware安装Vmware官方地址kali镜像kali镜像win10镜像（教育版）工具站卸载工具——geek安装文件检索工具——everythingeverything下载地址截图工具——snipastesnipaste下载地址解压缩工具——7.zip7.zip下载地址文本编辑器——notepad++notepad++下......
  • CSE 105 Summer Session
    CSE 105Summer Session 1 2024Homework 1Due date: Sunday July 7 at 11:59pmInstructionsOne member of the group should upload your group submission to Gradescope. During thesubmissionprocess,theywillbepromptedtoaddthenameso......
  • C++数据结构底层实现算法
    1.vector底层数据结构为数组，支持快速随机访问2.list底层数据结构为双向链表，支持快速增删3.deque底层数据结构为一个中央控制器和多个缓冲区，详细见STL源码剖析P146，支持首尾（中间不能）快速增删，也支持随机访问deque是一个双端队列(double-endedqueue)，也是在堆中保存内容的.每个......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99