JSD-2204-HTML-CSS-Day03

最新推荐文章于 2024-07-11 17:14:12 发布
最新推荐文章于 2024-07-11 17:14:12 发布
阅读量285 收藏
点赞数
文章标签： css html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheNewSystrm/article/details/125527996
版权

1.css

1.1CSS三大特性

  • 继承: 指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如超链接的字体颜色
  • 层叠: 多个选择器可以选择到同一个元素, 如果作用的样式不同,层叠性指的是可以将多个不同的样式层叠到一起显示, 如果作用的样式相同则由优先级决定哪个生效.
  • 优先级: 指选择器的优先级, 作用范围越小 优先级会越高,
  • !important>id选择器>class选择器>标签名选择器>继承(间接选中)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      color: red;
    }
    div{
      color: green;
    }
    /*!important 提升样式的优先级为最高 */
    p{color: blue !important;}
    #p1{color: yellow }
  </style>
</head>
<body>
<div id="d1">
  <p id="p1">这是个p标签</p>
  <span>这是一个span</span>
  <div><p>这个p是孙子元素</p></div>
  <a href="">超链接</a>
</div>
</body>
</html>

1.2居中相关内容

  • 如果元素是块级元素,让元素自身居中使用margin:0 auto,如果让元素内容居中则使用text-align:center
  • 如果元素是行内块元素, 让元素自身居中 需要给上级添加text-align:center , 内容居中也是text-align:center;
  • 如果元素是行内元素,让元素自身居中 需要给上级添加text-align:center ,内容居中(不存在)

1.2.1综合练习1 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 611px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
      background-size: 318px 319px;
      background-repeat: no-repeat;
      background-position: 90% 90%;
      overflow: hidden;
    }
    div>div{
      width: 245px;
      height: 232px;
      margin: 68px 0 0 36px;
    }
    .title_p{
      font-size: 32px;
      color: #333;
      margin-bottom: 12px;
    }
    .price_p{
      font-size: 24px;
      color: #0aa1ed;
      font-weight: bold;
      margin-bottom: 12px;
    }
    a{
      background-color: #0aa1ed;
      width: 132px;
      height: 40px;
      display: block;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      color: white;
      text-decoration: none;
      border-radius: 3px;
    }


  </style>
</head>
<body>
<div>
  <div>
    <p class="title_p">灵越 燃7000系列</p>
    <p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
      英特尔HD显卡620含共享显卡内存</p>
    <p class="price_p">￥4999.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>

1.2.2综合练习2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 375px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
      background-size: 292px 232px;
      background-repeat: no-repeat;
      background-position: 90% 90%;
      overflow: hidden;
    }
    div>div{
      width: 252px;
      height: 232px;
      margin: 39px 0 0 25px;
    }
    .title_p{
      font-size: 32px;
      color: #333333;
      margin-bottom: 12px;
    }
    .price_p{
      font-size: 24px;
      color: #0aa1ed;
      margin-bottom: 12px;
      font-weight: bold;
    }
    a{
      background-color: #0aa1ed;
      width: 132px;
      height: 40px;
      color: white;
      text-align: center;
      line-height: 40px;
      display: block;
      font-size: 20px;
      text-decoration: none;
      border-radius: 3px;
    }


  </style>
</head>
<body>
<div>
  <div>
    <p class="title_p">颜值 框不住</p>
    <p>酷睿双核i5处理器|256GB SSD| 8GB内存<br>
      英特尔HD显卡620含共享显卡内存</p>
    <p class="price_p">￥6888.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>

1.2.3综合练习3 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 198px ;
      height: 233px;
      background-color: #e8e8e8;
      text-align: center;
    }
    .title_p{
      margin-top: 0;
      color: #000;
      margin-bottom: 6px;
    }
    .price_p{
      margin: 6px 0;
      color: #0aa1ed;
      font-weight: bold;
    }
    a{

        display: inline-block;
        background-color: #0aa1ed;
        width: 100px;
        height: 24px;
        /*上下0 左右auto(居中),
        让块级元素的文本内容居中使用text-align:center;
        让块级元素自身在所在行内居中使用margin:0 auto*/
        /*margin: 0 auto;*/
        text-decoration: none;
        color: white;
        line-height: 24px;
        border-radius: 3px;
    }


  </style>
</head>
<body>
<div>
  <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" alt="">
  <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
  <p class="price_p">￥4600.00</p>
  <a href="">查看详情</a>
</div>
</body>
</html>

1.3定位方式

  • 共五种定位方式:
    • 静态定位
    • 相对定位
    • 绝对定位
    • 固定定位
    • 浮动定位

1.4定位方式之静态定位

  • 默认的定位方式,也叫作文档流定位
  • 格式: position:static
  • 特点: 元素以左上为基准 , 块级元素从上往下依次排列, 行内元素从左向右依次排列
  • 通过外边距控制元素的位置
  • 无法实现元素层叠显示

1.5定位方式之相对定位

  • 格式: position: relative;
  • 特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置)
  • 通过left/right/top/bottom相对于元素的初始位置做偏移
  • 相对定位可以实现元素层叠效果
  • 应用场景: 当需要移动某一个元素,而且其它元素不受影响时
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{width: 100px;height: 100px;border: 1px solid red}
    div:hover{
      /*margin: 20px 0 0 20px;*/
      /*修改定位方式为相对定位*/
      position: relative;
      top: 20px;
      left: 20px;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

1.6定位方式之绝对定位

  • 格式: position:absolute;
  • 特点: 元素脱离文档流(不占原来的位置,后面的元素会顶上来)
  • 通过left/right/top/bttom相对于窗口或某一个上级元素做位置偏移
  • 应用场景:需要层叠显示并且元素不需要占原来的位置
  • 相对定位和绝对定位区别:
    • 相对定位不脱离文档流(占位置) 绝对定位脱离文档流不占位置
    • 相对定位参照物是原来位置, 绝对定位参照物是窗口(默认)或某一个上级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{width: 100px;height: 100px;border: 1px solid red}
    #d1{
      /*设置为绝对定位,元素脱离文档流*/
      position: absolute;
      /*相对于窗口做位置偏移*/
      right: 20px;
      bottom: 50px;
    }
  #big{
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px 0 0 100px;

  }
  #big>div{
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 50px 0 0 50px;
    /*如果想让绝对定位的元素位置偏移 以某个元素做参照物需要给元素添加相对定位*/
    position: relative;/*做参照物*/
  }
  #big>div>div{
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    left: 0;
    top: 0;

  }


  </style>
</head>
<body>
<div id="big">
  <div>
    <div></div>
  </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

1.6.1绝对定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body>div{
      width: 300px;
      background-color: rgba(0,0,0,0.3);
      padding: 10px;/*内容缩进10个像素*/
      position: relative;/*做参照物*/
    }
    input{
      width: 260px; /*300-40=260*/
      border: 0;/*去掉自带边框*/
      padding: 10px 20px;/**/
    }
    img{
      position: absolute;
      right: 40px;
      top: 14px;
    }
    p{
      font-size: 12px;
      color: red;
      margin: 0;
    }
  </style>
</head>
<body>
<div>
  <input type="text">
  <img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" alt="">
  <p>用户名不能为空!</p>
</div>
</body>
</html>

1.7定位方式之固定定位

  • 格式: position:fixed;
  • 特点: 元素脱离文档流, 元素固定在窗口的某个位置 不随内容位置的移动而移动.
  • 通过left/right/top/bottom相对于窗口做位置偏移

1.8position定位回顾:

  1. 静态定位: static(默认) 无法层叠显示, 元素以左上为基准, 通过外边距
  2. 相对定位: relative 不脱离文档流, 通过left/right/top/bottom相对于初始位置做偏移
  3. 绝对定位: absolute 脱离文档流,通过left/right/top/bottom相对窗口或某一个上级元素
  4. 固定定位: fixed 脱离文档流, 通过left/right/top/bottom相对窗口做位置偏移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 1000px;
      height: 100px;
      background-color: red;
      /*设置固定定位*/
      position: fixed;
      top: 0;
    }
    body{
      padding-top: 100px;/*避免内容被盖上*/
    }
    #d2{
      width: 50px;
      height: 200px;
      background-color: blue;
      position: fixed;
      right: 20px;
      bottom: 50px;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
</body>
</html>

1.9浮动定位

  • 格式: float:left/right;
  • 特点: 元素脱离文档流,从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止
  • 一行装不下时会自动折行,折行时有可能被卡主
  • 如果某个元素的所有子元素全部浮动,则自动识别的高度为0, 后面的元素会顶上来(如果被盖的内容有文字,文字会被挤出来) 最终可能导致显示异常, 给元素添加overflow:hidden可以解决此问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body>div{
      width: 200px;
      border: 1px solid red;
      overflow: hidden;/*解决高度识别为0,带来的显示异常*/
    }
    #d1{
      width: 50px;height: 50px;
      background-color: red;
      float: left;
    }
    #d2{
      width: 50px;height: 50px;
      background-color: green;
      float: left;
    }
    #d3{
      width: 50px;height: 50px;
      background-color: blue;
      float: left;
    }
    #d4{
      width: 300px;
      height: 300px;
    }
    ul{
      list-style-type: none;/*去掉列表图标*/
      overflow: hidden; /*解决子元素全部浮动 自动识别高度为0 的问题*/
    }
    li{
      float: left;
      margin-right: 20px;
    }
  </style>
</head>
<body>
<ul>
  <li><a href="">首页</a></li>
  <li><a href="">免费课</a></li>
  <li><a href="">直播课</a></li>
  <li><a href="">精品课</a></li>
  <li><a href="">线上班</a></li>
</ul>
<div>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>
<div id="d4">我是粉色的</div>
</body>
</html>

1.9.1综合练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				
			}
			body{
				font: 12px "simhei", Arial, Helvetica, sans-serif;
				color: #666;
			}
			#div01{
				width: 366px;
				height: 233px;
				background-color: #E8E8E8;
			}
			#top_div{
				width: 366px;
				height: 35px;
				background-color: #0AA1ED;
				line-height: 35px;
			}
			span{
				
				margin: 0 9px 0 0 ;
				font-size: 16px;
				color: #FFFFFF;
				line-height: 35px;
			}
			img{
				margin-top: 5px;
				margin-left: 5px;
				float: left;
			}
			ul{
				list-style: none;
				overflow: hidden;
				padding: 0px;
			}
			li{
				float: left;
				margin-left: 10px;
				margin-bottom: 10px;
				
			}
			.c_div{
				width: 366px;
				color: #0AA1ED;
				font-size: 12px;
			}
			.c_div>p{
				margin-left: 10px;
			}
			li>a{
				color: #0AA1ED;
				text-decoration: dashed;
			}
		</style>
	</head>
	<body>
		<div id="div01">
			<div id="top_div"><img src="computer_icon1.png" alt=""><span>&nbsp;&nbsp;电脑,办公/1F</span></div>
			<div class="c_div">
				<p>电脑壁纸</p>
				<ul>
					
					<li><a href="">笔记本</a></li>
					<li><a href="">游戏机</a></li>
					<li><a href="">台式机</a></li>
					<li><a href="">一体机</a></li>
					<li><a href="">服务器</a></li>
					<li><a href="">联想</a></li>
				</ul>
			</div>
			<div class="c_div">
				<p>电脑配件</p>
				<ul>
					
					<li><a href="">CPU</a></li>
					<li><a href="">SSD硬盘</a></li>
					<li><a href="">显示器</a></li>
					<li><a href="">显卡</a></li>
					<li><a href="">组装电脑</a></li>
					<li><a href="">机箱</a></li>
				</ul>
			</div>
			<div class="c_div">
				<p>外设/游戏</p>
				<ul>
					
					<li><a href="">键盘</a></li>
					<li><a href="">鼠标</a></li>
					<li><a href="">U盘</a></li>
					<li><a href="">移动硬盘</a></li>
					<li><a href="">游戏设备</a></li>
					<li><a href="">智能单车</a></li>
				</ul>
			</div>
		</div>
		
	</body>
</html>

1.10将上述综合练习进行总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font: 12px "simhei", Arial, Helvetica, sans-serif;
				color: #666;
			}
			*{}
			#wai{
				float: left;
				
				width: 611px;
				height: 376px;
				background-color: #e8e8e8;
				background-image: url(study_computer_img1.png);
				background-repeat: no-repeat;
				background-size: 318px 319px;
				background-position: 90% 90%;
				overflow: hidden;
			}
			#nei{
				width: 255px;
				height: 242;
				padding:5px;
				margin-top: 68px;
				margin-left: 36px;
			}
			#wai1{
				margin-left: 10px;
				float: left;
				display: inline-block;
				width: 375px;
				height: 376px;
				background-color: #e8e8e8;
				background-image: url(study_computer_img2.png);
				background-repeat: no-repeat;
				background-size: 292px 232px;
				background-position: 85% 90%;
				overflow: hidden;
			}
			#nei1{
				width: 261px;
				height: 240px;
				padding:5px;
				margin-top: 39px;
				margin-left: 25px;
			}
			.title_P{
				margin-top: 0;
				color: #333333;
				font-size: 32px;
				margin-bottom: 12px;
				font-weight: lighter;
			}
			.intro_p{
				margin-bottom: 24px;
				font-size: 12px;
				font-weight: lighter;
			}
			.price_p{
				margin-bottom: 12px;
				font-weight: bold;
				color: #0AA1ED;
				font-size: 24px;
			}
			.a1{
				display: block;
				width: 132px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #0AA1ED;
				font-size: 20px;
				color: white;
				text-decoration: dashed;
				border-radius: 3px;
			}
			#bigdiv{
				overflow: hidden;
				width: 1000px;
				height: 376px;
			}
			#div01{
				float: left;
				width: 366px;
				height: 233px;
				background-color: #E8E8E8;
			}
			#top_div{
				width: 366px;
				height: 35px;
				background-color: #0AA1ED;
				line-height: 35px;
			}
			span{
				
				margin: 0 9px 0 0 ;
				font-size: 16px;
				color: #FFFFFF;
				line-height: 35px;
			}
			img{
				margin-top: 5px;
				margin-left: 5px;
				float: left;
			}
			ul{
				list-style: none;
				overflow: hidden;
				padding: 0px;
			}
			li{
				float: left;
				margin-left: 10px;
				margin-bottom: 10px;
				
			}
			.c_div{
				width: 366px;
				color: #0AA1ED;
				font-size: 12px;
			}
			.c_div>p{
				margin-left: 10px;
			}
			li>a{
				color: #0AA1ED;
				text-decoration: dashed;
			}
			.d1{
				float: left;
				width: 198px;
				height: 233px;
				text-align: center;
				background-color: #e8e8e8;
				margin-left: 12px;
			}
			.intro_p1{
				margin-top: 0;
				color: #000000;
				margin-bottom: 6px;
			}
			.price_p1{
				margin-top: 0;
				margin-bottom: 6px;
				font-size: 12px;
				font-weight: bold;
				color: #0AA1ED;
			}
			.a2{
				display: block;
				width: 100px;
				height: 24px;
				color: white;
				background-color: #0AA1ED;
				margin: 0 auto;
				line-height: 24px;
				text-decoration: solid;
				border-radius: 3px;
			}
			#bigdiv1{
				margin-top: 10px;
				width: 1000px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="bigdiv">
			<div id="wai">
				<div id="nei">
					<p class="title_P">灵越 燃7000系列</p>
					<p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
						英特尔HD显卡620含共享显卡内存</p>
					<p class="price_p">￥4999.00</p>
					<a href="" class="a1">查看详情</a>
				</div>
			</div>
			<div id="wai1">
				<div id="nei1">
					<p class="title_P">颜值 框不住</p>
					<p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
						英特尔HD显卡620含共享显卡内存</p>
					<p class="price_p">￥6888.00</p>
					<a href="" class="a1">查看详情</a>
				</div>
			</div>
		</div>
		
		<div id="bigdiv1">
			<div id="div01">
				<div id="top_div"><img src="computer_icon1.png" alt=""><span>&nbsp;&nbsp;电脑,办公/1F</span></div>
				<div class="c_div">
					<p>电脑壁纸</p>
					<ul>
						
						<li><a href="">笔记本</a></li>
						<li><a href="">游戏机</a></li>
						<li><a href="">台式机</a></li>
						<li><a href="">一体机</a></li>
						<li><a href="">服务器</a></li>
						<li><a href="">联想</a></li>
					</ul>
				</div>
				<div class="c_div">
					<p>电脑配件</p>
					<ul>
						
						<li><a href="">CPU</a></li>
						<li><a href="">SSD硬盘</a></li>
						<li><a href="">显示器</a></li>
						<li><a href="">显卡</a></li>
						<li><a href="">组装电脑</a></li>
						<li><a href="">机箱</a></li>
					</ul>
				</div>
				<div class="c_div">
					<p>外设/游戏</p>
					<ul>
						
						<li><a href="">键盘</a></li>
						<li><a href="">鼠标</a></li>
						<li><a href="">U盘</a></li>
						<li><a href="">移动硬盘</a></li>
						<li><a href="">游戏设备</a></li>
						<li><a href="">智能单车</a></li>
					</ul>
				</div>
			</div>
			<div class="d1">
				<img src="study_computer_img3.png" alt="" width="198px" height="136px">
				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
				<br>寸微边框笔记本电脑</p>
				<p class="price_p1">￥4600.00</p>
				<a href="" class="a2">查看详情</a>
			</div>
			<div class="d1">
				<img src="study_computer_img4.png" alt="" width="198px" height="136px">
				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
				<br>寸微边框笔记本电脑</p>
				<p class="price_p1">￥4600.00</p>
				<a href="" class="a2">查看详情</a>
			</div>
			<div class="d1">
				<img src="study_computer_img5.png" alt="" width="198px" height="136px">
				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
				<br>寸微边框笔记本电脑</p>
				<p class="price_p1">￥4600.00</p>
				<a href="" class="a2">查看详情</a>
			</div>
		</div>
	</body>
</html>

程序猿 Monkey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSD-2204-HTML-CSS-Day02
TheNewSystrm的博客
06-28 301
JSD-2204-HTML-CSS-Day02
Java小白修炼手册--第三阶段--WebBasic( Web前端)--CSS
陳风弥的博客
06-10 567
WebBasic 网页编程基础 (学习如何开发页面,安装HBuilder) CSS: (学习如何美化页面) Cascading Style Sheet 层叠样式表. 作用: 美化页面 引入方式: 在html页面中添加css样式代码: 如何在html页面中添加css样式代码?总共有三种方式: 1. 内联样式: 在标签的style属性中添加css样式代码, 弊端:不能复用 2. 内部样式: 在head标签里面添加style标签,标签体内写样式代码,弊端:只能在当前页面复用 ...
JSD-2204-HTML-CSS-Day01
TheNewSystrm的博客
06-27 361
JSD-2204-HTML-CSS-Day01
JSD-2204-HTML-CSS-JavaScript-Day04
TheNewSystrm的博客
06-30 306
JSD-2204-HTML-CSS-JavaScript-Day03
jsd-advanced-js：JavaScript，高级
02-17
在“jsd-advanced-js”这个主题中，我们将深入探讨JavaScript的高级特性，包括但不限于异步编程、模块化、面向对象编程、闭包、作用域链以及性能优化等关键概念。 1. **异步编程**： JavaScript是单线程的，但通过...
联合训练jsd-alpha
02-17
【联合训练JSD-Alpha】是一种机器学习方法，主要用于数据分布不对称或存在多个相关但不完全重叠的特征空间的场景。在这种情况下，传统的单模型训练可能无法捕捉到所有领域的知识，而联合训练（Co-Training）通过构建...
jsd-teacup：使用JavaScript进行系统动力学仿真
02-15
"jsd-teacup"项目就是一个很好的例子，它展示了如何利用JavaScript实现系统动力学模型。该项目创建了一个小实验，可以用来演示系统动力学的基本概念和运行机制。用户无需安装额外的软件，只需克隆项目的代码仓库，并...
JSD2302 bird-boot V1-V20完整项目
07-03
【JSD2302 bird-boot V1-V20完整项目】是一个专注于Java开发的实践项目，涵盖了从版本V1到V20的逐步发展和改进。该项目的核心是"bird-boot"，它很可能是一个基于Spring Boot框架的应用程序，因为"boot"在Java开发中...
CSS实现从上往下过渡效果
最新发布
m0_56164131的博客
07-11 172
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
CSS的选择器、常用属性、盒子模型和定位
secret010的博客
07-08 445
CSS选择器：选择页面(文档)中对应的标签，并设置样式。
旋转木马案例
喵喵的博客
07-08 692
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
朝阳39的博客
07-06 1241
idCSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。
如何使一个盒子水平垂直居中（常用的）
karlaofsky的博客
07-08 557
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。//子元素宽度的一半。//子元素高度的一半。来直接减去盒子自身的50%大小。将盒子的上下左右定位全部设置为0，同时设置外边距自适应。
CSS上下悬浮特效
m0_56164131的博客
07-09 406
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
【前端】css控制背景图片缩放
姜太小白的博客
07-08 263
css控制背景图片缩放
CSS 指南
lsx202406的博客
07-08 385
CSS是网页设计和开发中不可或缺的一部分。通过掌握CSS的基础知识和进阶技巧，您可以创建出美观、响应式和易于维护的网页。希望本指南能为您提供帮助，祝您学习愉快！
原生CSS变量
喵喵的博客
07-08 369
声明的变量是有作用域的，比如是在html中声明的变量，那么该变量在html中的任何地方都可以使用这个变量，如果该变量在p标签中声明的，那么只能在p标签下使用这个变量。var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。变量声明的时候，变量名之前加上两根连词线（–）即可。css变量遵从 css优先级的原则 变量值会被覆盖。css中我们可以统一设置。
100家互联网大公司java笔试题汇总
08-08
# 100家互联网大公司Java笔试题汇总 ## 题目描述 编译运行以下程序后，关于输出结果的说明...jsd-01-101-1002 ## 知识点 Java基础-Java语言基础-运算符和表达式-转义字符 ## 难易程度 80 以上是所给论述的总结。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值