作业练习-下滑栏-每日笔记1.0

最新推荐文章于 2024-08-21 11:04:16 发布

黄色的海绵宝宝

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量112

点赞数 3

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_70552412/article/details/125903288

版权

<title>彩妆热卖</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			a {
			    text-decoration: none;
				color: black;
				margin-left: 10px;
			}
			.wk{
				width: 350px;
				line-height: 2;
				margin: 0 auto;
			}
			.tb{
				background-color: #E9185A;
				color: #ffffff;
				padding-left: 20px;
				margin-left: 20px;
				line-height: 2;
			}
			.st{
				list-style: 2;
				padding-left: 30px;
				
			}
			li{
				border-color:transparent transparent black transparent;
				border-style: dotted;
			}
			li:hover span{
				background-color: #E62261;
			}
			li:hover a{
				color: #E62261;
			}
			span{
				display: block;
				width: 20px;
				height: 20px;
				background-color: black;
				border-radius: 50%;
				color: #ffffff;
				text-align: center;
				font-size: 2px;
				float: left;
			    margin:6px 0 0 -4px ;
				line-height: 20px;
				font-weight: 900;
			}
			.product{
				/* 相对定位 */
			    position:relative;
	      /* 因为要隐藏他，所以高度设置 0px */
			    height: 0px;
				/* 设置下拉栏的宽度 */
			    /* width: 400px; */
			 /* 设置居中，不然会偏左 
			 俺看着咋样看舒服就设置的*/
			    text-align: center;
				/* 下滑的秒数 */
			    transition: 0.5s;
				/* 溢出隐藏 */
			    overflow: hidden;
				
			       
			}
		/* 	hover效果鼠标悬停显示
			选中他进行hover效果 */
			li:hover .product {
			/* 通过hover效果，出现下滑栏效果
			设置的高度出现，下滑200px */
			    height: 200px;
				/* 转成内联样式-行内元素 
				 display: inline; */
				
				/* 转成块元素 */
			    display: block;
				
				/* 转成行内块元素
				display: inline-block; */
			}
		</style>
	</head>
	<body>
			<div class="wk">
				<div class="tb">
					大家都喜欢的彩妆
				</div>
				<div class="st">
					<ul>
						<li><a href="">
								<span >1</span>
								Za姬芮新能真皙美白隔离霜 35g 
								<!-- 俺在这 ！-->
								<!-- 用div包裹class命名 -->
								<div class="product">
									<!-- 这里我导入的是图片和文字 -->
				<!-- 图片	 -->    <img src="./icon-1.jpg" alt="">
			    <!-- 文字	 -->	<p>￥62.00 最近69122人购买</p>
								</div>
							</a>	
						</li>
						<li><a href="">
								<span>2</span>
								美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml 
								<div class="product">
								    <img src="./icon-2.jpg" alt="">
									<p>￥89.00 最近13610人购买</p>
							</a>
						</li>
						<li><a href="">
								<span>3</span>
								 菲奥娜水漾CC霜40g 
								 <div class="product">
								     <img src="./icon-3.jpg" alt="">
								 	<p> ￥59.90 最近13403人购买</p>
							</a>
						</li>
						<li><a href="">
								<span>4</span>
								 DHC 蝶翠诗橄榄卸妆油 200ml 
								 <div class="product">
								     <img src="./icon-4.jpg" alt="">
								 	<p> ￥169.00 最近16757人购买</p>
							</a>
						</li>
						</ul>
				    </div>
		        </div>

怕你们看不到就单拎出来了!

.product{
				/* 相对定位 */
			    position:relative;
	      /* 因为要隐藏他，所以高度设置 0px */
			    height: 0px;
				/* 设置下拉栏的宽度 */
			    /* width: 400px; */
			 /* 设置居中，不然会偏左 
			 俺看着咋样看舒服就设置的*/
			    text-align: center;
				/* 下滑的秒数 */
			    transition: 0.5s;
				/* 溢出隐藏 */
			    overflow: hidden;
				
			       
			}
		/* 	hover效果鼠标悬停显示
			选中他进行hover效果 */
			li:hover .product {
			/* 通过hover效果，出现下滑栏效果
			设置的高度出现，下滑200px */
			    height: 200px;
				/* 转成内联样式-行内元素 
				 display: inline; */
				
				/* 转成块元素 */
			    display: block;
				
				/* 转成行内块元素
				display: inline-block; */
			}
		</style>
	</head>
	<body>
			<div class="wk">
				<div class="tb">
					大家都喜欢的彩妆
				</div>
				<div class="st">
					<ul>
						<li><a href="">
								<span >1</span>
								Za姬芮新能真皙美白隔离霜 35g 
								<!-- 俺在这 ！-->
								<!-- 用div包裹class命名 -->
								<div class="product">
									<!-- 这里我导入的是图片和文字 -->
				<!-- 图片	 -->    <img src="./icon-1.jpg" alt="">
			    <!-- 文字	 -->	<p>￥62.00 最近69122人购买</p>
								</div>
							</a>	
						</li>

下滑栏的效果主要就是相对定位来给他固定在设置高度隐藏和溢出隐藏

再然后设置触发效果触发后会出现你想让他出现的东西

---只恨博主还没搞太明白，先将就着看看，自己再结合一下自己的想法，再实践 QAQ----

请会的搞明白的大哥请务必疯狂dd我 QQ：3185855211 跪谢！

每日笔记

1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level);而span元素的默认display属性值为"inline”，称为"行内”元素。

2、块级元素:占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形;
行内元素:自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

3、例子:链接a元素，在默认情况下是是“行内元素，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样:display:block;强制将它改成块元素。

常用的块状元素有:
<div>、<p>、<h1>….<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>(块引用)、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:＜img＞＜input＞

刘 2022/7/20 23:47:30
设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a[display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。(简直霸道总裁啊，一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。

块状元素也可以通过代码displayinline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。
div[ I
display:inline:
}
<div>我要变成内联元素</div>

黄色的海绵宝宝

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
作业练习-下滑栏-每日笔记1.0

3、例子链接a元素，在默认情况下是是“行内元素，因此对a元素设置高度、宽度等属性，都是无效的。强制将它改成块元素。1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level);.、、、、、、(块引用)、行内元素自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。...
复制链接

扫一扫