首页
友情链接
留言
统计
推荐
计算机网络技术视频
华为ensp视频
Linux服务器视频
Windows服务器视频
Search
1
华为ICT概述
47 阅读
2
神州数码设备命令大全
36 阅读
3
Windows server使用命令行形式安装林根级域和加入域
27 阅读
4
kali换国内源
25 阅读
5
rocky(Linux),配置DNS服务器和备用DNS服务器
23 阅读
网络技术
Windows服务器
Linux服务器
网络设备
前端
html
css
JavaScript
技能大赛
网络建设与运维
信息安全与评估
网络系统管理
实用工具
宝藏网站
登录
/
注册
Search
标签搜索
JavaScript
css
网络安全
html
宝藏网站
实用工具
网络设备
网络技术
Linux服务器
kali
网络建设与运维
windows服务器
技能大赛
公告
网络系统管理
信息安全与评估
ctf
渝
累计撰写
207
篇文章
累计收到
3
条评论
首页
栏目
网络技术
Windows服务器
Linux服务器
网络设备
前端
html
css
JavaScript
技能大赛
网络建设与运维
信息安全与评估
网络系统管理
实用工具
宝藏网站
页面
友情链接
留言
统计
推荐
计算机网络技术视频
华为ensp视频
Linux服务器视频
Windows服务器视频
搜索到
47
篇与
的结果
2024-09-30
28、CSS基本定位机制-文档流
<!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>CSS基本定位机制-文档流</title> <style> /* CSS盒子三种基本定位机制: 普通流 normal flow、 浮动 float、 定位 position 一、文档流(标准流、普通流 normal flow):HTML文档中一切皆为盒子,而盒子在HTML文档中默认的显示标准,称为文档流 二、元素在文档流中的显示模式: 1.块元素 1.常见的块元素 div h1~h6 p ul li 等 2.特点: -独占一行 -宽度和高度等都可以设置 -默认宽度是父级元素宽度的100% -块元素是容器,里面可以放块元素、行内元素、行内块元素 3.注意: -文字类的块元素不能自由嵌套(尽量不要放块元素) 2.行内元素 1.常见的行内元素 span a strong em ins del等 2.特点: -和相邻的行内元素(行内块元素)在一行显示 -宽度和高度设置无效 -默认宽度是其内容的宽度 -行内元素可以设置border、padding、margin,但是垂直方向不会影响页面的布局 -行内元素水平外边距不会发生重叠 -行内元素只能容纳文本或其他行内元素 3.注意: 1.a 链接中不能放链接 2 特殊情况下,a链接可以放块元素,但最好将a转换为块元素 3.行内块元素 在行内元素中有几个标签:img input td 他们同时拥有块元素和行内元素的特点 因此我们称为 行内块元素 1.特点: 1.和相邻的块元素(行内快元素)在一行显示 2.默认宽度是其内容的宽度 3.宽度和高度都可以设置 */ span{ background-color: #c7edcc; /*width: 200px; height: 200px; 设置无效*/ border: 10px solid red; padding: 10px; margin: 100px; } .box1{ width: 200px; height: 200px; background-color: #fed6e0; } </style> </head> <body> <H1>我是标题</H1> <div>我是div</div> <p>我是段落 <div></div> </p> <span>我是span</span> <span>我是span</span> <span>我是span</span> <div class="box1"></div> </body> </html>
2024年09月30日
4 阅读
0 评论
0 点赞
2024-09-30
27、轮廓阴影圆角
<!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> /* 一、轮廓 outline 设置元素的轮廓 使用方式与border一样、不同在于不影响盒子大小 设置轮廓为元素起到一个突出强调的作用 二、阴影 box-shadow 设置元素的阴影 第一个值:设置阴影水平距离 第二个值:设置阴影垂直距离 第三个值:设置阴影模糊半径 第四个值:设置阴影尺寸 第五个值:设置阴影的颜色 第六个值:设置内部还是外部阴影, outset 默认值为外部阴影 inset 设置为内部阴影 三、圆角 border-radius设置元素的圆角的 可以设置四个角的圆角 border-top-left-radius border-top-right-radius border-button-right-radius border-button-left-radius border-radius 可以直接设置四个角 border-radius:50px 100px 150px 200px;左上 右上 右下 左下(顺时针) border-radius:50px 100px 150px;左上 右上 左下 右下 */ .box1{ width: 200px; height: 200px; background-color: #c7edcc; margin:100px auto; /*设置轮廓*/ outline: 10px solid red; /*设置阴影 box-shadow: 30px 30px 50px 5px rgba(0,0,0,.3); */ /*设置圆角 border-radius:50px 100px 150px 200px; border-radius:50px 100px 150px; */ position: relative; top: 0; left: 0; transition: 0.3s linear all; } .box1:hover{ box-shadow: 0px 0px 20px black; top: -1px; left: 0; } /* .box2{ width: 300px; height: 200px; background-color: #fed6e0; } */ </style> </head> <body> <div class="box1"></div> <!--<div class="box2"></div>--> </body> </html>
2024年09月30日
4 阅读
0 评论
0 点赞
2024-09-30
26、盒子的垂直布局
<!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> /* 一、盒子的垂直布局的注意 1.若两个相邻垂直摆放的盒子,上面盒子的下外边距与下面盒子的上外边距会发生重叠,称为外边距合并 若合并后,外边距会选择重叠外边距的较大值 2.若两个盒子具有父子关系,则两个盒子的上外边距会发生重叠,若改变盒子的上外边距,父子盒子都会随之移动位置 三种解决办法: 1.可以为父元素添加边框 2.可以为父元素加内边距 3.为父元素添加overflow:hidden; 学习完清除浮动的最终解决方案: .father::before{ content:""; display:table; clear:both; } */ div{ width: 200px; height: 200px; } /* .box1{ background-color: #c7edcc; margin-bottom: 100px; } .box2{ background-color: #fde6e0; margin-top: 200px; } */ .father::before{ content: ""; display: table; clear: both; } .father{ background-color: #c7edcc; /*overflow: hidden;*/ } .son{ width: 100px; height: 100px; background-color: #fde6e0; margin-top: 100px; } </style> </head> <body> <!-- <div class="box1"></div> <div class="box2"></div> --> <div class="father"> <div class="son"></div> </div> </html>
2024年09月30日
4 阅读
0 评论
0 点赞
2024-09-30
25、盒子模型的溢出
<!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> /* 一、盒子模型的溢出 父子两个盒子,子盒子的宽度或高度,大于父盒子,则子盒子多余的部分会在父盒子之外进行显示 多余的部分,称为溢出的部分 overflow属性,可以设置父元素如何处理溢出的内容 可选值 viside 不会处理溢出部分(默认值) hidden 溢出的内容隐藏 scroll 为父元素添加滚动条 auto 会根据需要自动的添加滚动条 */ .father{ width: 200px; height: 200px; background-color: #c7edcc; } .son{ width: 100px; height: 1000px; background-color: #fde6e0; } </style> </head> <body> <div class="father"> <div class="son"></div> </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> /* 一、盒子模型的溢出 父子两个盒子,子盒子的宽度或高度,大于父盒子,则子盒子多余的部分会在父盒子之外进行显示 多余的部分,称为溢出的部分 overflow属性,可以设置父元素如何处理溢出的内容 可选值 viside 不会处理溢出部分(默认值) hidden 溢出的内容隐藏 scroll 为父元素添加滚动条 auto 会根据需要自动的添加滚动条 */ .father{ width: 200px; height: 200px; background-color: #c7edcc; } .son{ width: 100px; height: 1000px; background-color: #fde6e0; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
2024年09月30日
3 阅读
0 评论
0 点赞
2024-09-30
24、盒子的水平布局
<!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> /* 一、盒子水平宽度 当一个盒子出现在另一个盒子的内容区时,该盒子的水平宽度“必须”等于父元素内容区的宽度 盒子水平宽度: margin-left+border-left+padding-left+width+padding-right+border-right+margin-right 水平居中:(margin:0 auto;) */ .father{ width: 1200px; height: 200px; border: 5px solid red; } .son{ width: 200px; height: 200px; background-color: #c7edcc; margin: 0 auto; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
2024年09月30日
4 阅读
0 评论
0 点赞
1
...
4
5
6
...
10