html、css 实现网页弹出层
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">最后</span>效果：利用纯粹的html、css实现静态网页弹出层，并在弹出层中实现登录功能 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">利用html、css实现网页弹出层（是静态的），我在弹出层中加入了form表单实现了登录功能</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一：先<span style="color: black;">运用</span>一个<span style="color: black;">照片</span>来<span style="color: black;">做为</span>页面： </p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-56e01591442986c3944ff4d71f54da44_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> html：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"main"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">img</span> <span style="color: black;">src</span><span style="color: black;">=</span><span style="color: black;">"./img/ahri.jpg"</span> <span style="color: black;">alt</span><span style="color: black;">=</span><span style="color: black;">""</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">main</span> <span style="color: black;">img</span><span style="color: black;">{</span>
<span style="color: black;">object-fit</span><span style="color: black;">:</span> <span style="color: black;">cover</span><span style="color: black;">;</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">object-fit<span style="color: black;">通常</span>在视频、<span style="color: black;">照片</span>中<span style="color: black;">运用</span>，<span style="color: black;">暗示</span>其适应方式 它有三个取值：</p>fill默认值，不保持比例，<span style="color: black;">照片</span><span style="color: black;">所有</span><span style="color: black;">表示</span>contain保持宽高比例，<span style="color: black;">照片</span><span style="color: black;">不可</span>溢出cover比例不变，填充满，牺牲掉<span style="color: black;">照片</span>信息<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">二：<span style="color: black;">通常</span>弹出层出<span style="color: black;">此刻</span>网页上时，<span style="color: black;">全部</span>网页<span style="color: black;">做为</span>背景会虚化 <span style="color: black;">必须</span>一个遮罩层： </p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-d1171c73d9000c6e62ecbf3b7ad5c9fb_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> html：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!-- 遮罩层 --></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"modal"</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">modal</span><span style="color: black;">{</span>
<span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">fixed</span><span style="color: black;">;</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">left</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
<span style="color: black;">top</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">rgba</span><span style="color: black;">(</span><span style="color: black;">0</span><span style="color: black;">,</span> <span style="color: black;">0</span><span style="color: black;">,</span> <span style="color: black;">0</span><span style="color: black;">,</span> <span style="color: black;">0.5</span><span style="color: black;">);</span>
<span style="color: black;">}</span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">固定定位 </p>position: fixed 宽高为auto，适应内容 元素<span style="color: black;">必定</span>是块盒（即display: block） <span style="color: black;">无</span>外边距合并 <span style="color: black;">包括</span>块：固定为视口（浏览器的可视窗口）<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个元素，只要position的取值不是static，认为该元素为定位元素 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">定位元素会脱离文档流（相对定位position: relative除外） 文档流中的元素摆放时，会忽略掉脱离了文档流的元素文档流中元素计算auto高度时，会忽略脱离了文档流的元素（高度坍塌）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在颜色位置设置alpha通道 </p><span style="color: black;">每一个</span>颜色都有透明通道，取值0~1（0：完全透明；1：不透明） rgba(red, green, blue, alpha) hex：#rgba<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置透明还有另一种： 利用opacity属性，<span style="color: black;">然则</span>它设置的是<span style="color: black;">全部</span>元素的透明度</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">由于</span>我<span style="color: black;">这里</span>是为了实现弹出层，除了弹出层的网页部分<span style="color: black;">必须</span>虚化，而不是<span style="color: black;">全部</span>网页都虚华；<span style="color: black;">因此</span>我才用的是在颜色位置设置alpha通道</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">三：遮罩层的中间<span style="color: black;">必须</span>装一个弹出层：</p>
交流如星光璀璨，点亮思想夜空。 i免费外链发布平台 http://www.fok120.com/ i免费外链发布平台 http://www.fok120.com/
页:
[1]