HTML和CSS(基于黑马程序员视频学习
HTML和CSS
青柠杆菌
这个作者很懒,什么都没留下…
展开
-
多行文本溢出显示省略号
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <!--多行文本溢出显示省略号,有较大兼容性问题,适用于webkit浏览器或移动端(移动端大部分是webkit内核)--> <!--建议让后台来做--> <title></title&原创 2021-12-06 14:20:43 · 431 阅读 · 0 评论 -
单行文本溢出显示省略号
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> div { width: 100px; height: 50px;原创 2021-12-06 14:20:14 · 255 阅读 · 0 评论 -
图片底侧会有一个空白缝隙问题
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> bug:图片底侧会有一个空白缝隙,原因是行内块元素和文字的基线对齐 主要的解决方法有两种: 1.给图片添加vertical-align:middle|top|bo原创 2021-12-06 14:19:22 · 311 阅读 · 0 评论 -
css的vertical-align属性
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--css的vertical-align属性使用场景: 常用于设置图片或着表单(行内块元素)和文字垂直对齐--> <!--官方解释:用于设置一个元素原创 2021-12-06 14:18:45 · 322 阅读 · 0 评论 -
CSS轮廓线
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> input,textarea { /*取消表单轮廓*/ /*outline: none原创 2021-12-06 14:17:46 · 86 阅读 · 0 评论 -
CSS鼠标样式
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--鼠标样式 cursor--> <!--li {cursor:pointer;}--> <!--设置或者检索在对象上移动的鼠标原创 2021-12-06 14:16:57 · 229 阅读 · 0 评论 -
CSS三角形
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--网页中常见的一些三角形,使用css直接画出来就可以,不必做成图片或者字体图标--> <style> .box1 {原创 2021-12-06 14:16:02 · 254 阅读 · 0 评论 -
土豆网案例
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .tudo { position:relative; height: 280px;原创 2021-12-06 14:14:31 · 238 阅读 · 0 评论 -
overflow溢出
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--overflow溢出--> <!--overflow属性制定了 如果内容溢出一个元素的框时,会发生什么--> <!--vis原创 2021-12-06 14:13:49 · 1783 阅读 · 0 评论 -
CSS visibility
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> visibility属性用于指定一个 元素应可见还是隐藏 visibility:visible;元素可视 visibility:hidden;元素隐藏 v原创 2021-12-06 14:12:39 · 204 阅读 · 0 评论 -
元素的显示与隐藏display
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--类似网页广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现--> <!--本质:让一个元素在页面中隐藏或者显示出来-->原创 2021-12-03 10:11:18 · 532 阅读 · 0 评论 -
页面布局总结
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title></head><body> 通过盒子模型,清除的知道大部分html标签是一个盒子 通过css浮动,定位可以让每个盒子排列成网页。 一个完原创 2021-12-03 10:10:19 · 109 阅读 · 0 评论 -
定位淘宝案例
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; }原创 2021-12-03 10:09:40 · 377 阅读 · 0 评论 -
定位特殊特性
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--定位的特殊性--> <!--绝对定位和固定定位也和浮动类似--> <!--1.行内元素添加绝对或者固定定位,可以直接设置高度原创 2021-12-03 09:43:31 · 350 阅读 · 0 评论 -
css绝对位置水平居中
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--绝对定位的盒子居中--> <!--加了绝对定位的盒子不能通过margin:() aute;水平居中,但是可以通过以下计算方式实现水平和垂直居中-原创 2021-12-03 09:42:55 · 159 阅读 · 0 评论 -
定位叠放次序 z-index
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--定位叠放次序 z-index--> <!--在使用定位布局时,可能出现盒子重叠的情况,此时,可以使用z-index 来控制盒子的前后次序(z轴)原创 2021-12-03 09:42:06 · 281 阅读 · 0 评论 -
css粘性定位
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--粘性定位sticky--> <!--粘性定位可以被认定是相对定位和固定定位的混合。sticky粘性的--> <!--语法:-原创 2021-12-03 09:41:24 · 678 阅读 · 0 评论 -
固定定位小技巧固定到版心右侧
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--小算法:--> <!--1.让固定定位的盒子left:50%,走到浏览器可视区(也可以看作版心)的一半位置--> <!--2原创 2021-12-03 09:40:50 · 381 阅读 · 0 评论 -
css自绝父相
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--绝对定位absolute:--> <!--决定定位是元素在移动位置的时候,是相对于它父元素来说的--> <!--语法:--&原创 2021-12-03 09:39:03 · 267 阅读 · 0 评论 -
css绝对定位
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--绝对定位absolute:--> <!--决定定位是元素在移动位置的时候,是相对于它父元素来说的--> <!--语法:--&原创 2021-11-21 13:57:22 · 126 阅读 · 0 评论 -
静态定位相对定位
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .box1 { position: relative; top: 100px;原创 2021-11-21 13:56:29 · 366 阅读 · 0 评论 -
定位的组成
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title></head><body> 1.定位组成: 定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子 定位=定位模式原创 2021-11-21 13:55:53 · 85 阅读 · 0 评论 -
清除浮动==双伪元素清除浮动
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> 代码简洁 <style> .clearfix:before, .clearfix:after { conte原创 2021-11-21 13:54:57 · 128 阅读 · 0 评论 -
清除浮动--:after伪元素法
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> :after方法是额外标签法的升级版,也是给父级元素添加 <style> .clearfix:after { cont原创 2021-11-21 13:54:22 · 172 阅读 · 0 评论 -
清除浮动-父级添加overflow
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> 代码简洁 <style> .box { /*清除浮动*/ /*overflow: hidde原创 2021-11-21 13:53:47 · 240 阅读 · 0 评论 -
清除浮动--额外标签法
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--额外标签法也称为隔墙法。 额外标签法会在浮动元素末尾添加一个空标签。例如 <div style="clear:both"></div>原创 2021-11-21 13:53:16 · 541 阅读 · 0 评论 -
常见的网页布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; }原创 2021-11-21 13:52:32 · 71 阅读 · 0 评论 -
css外边距
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--margin-left 左外边框--> <!--margin-right 右外边框--> <!--margin-top 上外原创 2021-11-20 10:18:25 · 133 阅读 · 0 评论 -
内边距的复合写法
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--padding: 5px; 1个值,代表上下左右都有5像素内边距--> <!--padding: 5px原创 2021-11-20 10:17:44 · 238 阅读 · 0 评论 -
内边距会影响盒子的大小
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--当我们给盒子指定padding值之后,发生了两件事:--> <!--1.内容和边框有了距离,添加了内边框--> <!--2.原创 2021-11-20 10:17:14 · 461 阅读 · 0 评论 -
css内边距
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--padding-left 左内边距--> <!--padding-right 右内边距--> <!--padding-top原创 2021-11-20 10:16:41 · 101 阅读 · 0 评论 -
padding不会撑开盒子的情况.html
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小--> <style> h1 {原创 2021-11-20 10:16:14 · 321 阅读 · 0 评论 -
css盒子阴影
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <!--css3中新增盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow原创 2021-11-20 10:15:40 · 812 阅读 · 0 评论 -
css圆角边框
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--在css3中,新增了圆角边框样式,这样我们的盒子可以变圆了--> <!--border-radius 属性用于设置元素的外边框圆角-->原创 2021-11-20 10:12:28 · 144 阅读 · 0 评论 -
小米导航栏
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .box { width: 1200px; height: 460px;原创 2021-11-20 10:11:48 · 213 阅读 · 0 评论 -
浮动元素会具有行内块元素的特征
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性--> <!--如果块级盒子没有设置宽度,默认宽度和父级一样宽原创 2021-11-20 10:11:17 · 528 阅读 · 0 评论 -
浮动特性 浮动元素 行显示
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列--> <!--注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级原创 2021-11-20 10:10:47 · 220 阅读 · 0 评论 -
什么是浮动
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <!--float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 选择器{ float:属性值;} none原创 2021-11-19 16:49:41 · 88 阅读 · 0 评论 -
小米浮动案例
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .box { width: 1226px; height: 615px;原创 2021-11-19 16:49:00 · 184 阅读 · 0 评论 -
css文本属性
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> /*预定义颜色值:用英文单词*/ /*十六进制:#开通,最常用*/ /*RGB代码:rgb(255,0原创 2021-11-19 16:48:23 · 57 阅读 · 0 评论