自适应布局 CSS运用

最新推荐文章于 2024-08-08 13:55:38 发布
最新推荐文章于 2024-08-08 13:55:38 发布
阅读量130 收藏
点赞数
文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45906184/article/details/112858225
版权
这段代码展示了如何使用CSS实现自适应布局，适用于90%的餐饮网上店铺网页。通过相对和绝对定位，调整元素在不同屏幕尺寸下的显示，降低维护成本并保证高性能。当鼠标悬停在内容区域时，会显示详细信息，提供友好的用户体验。
摘要由CSDN通过智能技术生成

自适应布局

学完这个代码，基本解决90%餐饮网上店铺网页布局问题，关键就是自适应，可根据文字描述自适应样式，维护成本低，性能好与效率高。一个布局效果鼠标移到图的效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>panpan_6</title>
        <style>
            *{margin:0;padding:0;}
            .wrap{
                width: 1200px;/* 宽度: 200像素; */
                height: 400px;/* 高度 */
                margin: 50px auto;/* 上下 左右 */
               /* background-color: #096;/* 背景颜色: 原谅绿; */ */
            }
            .content{
                position: relative;/* 相对定位 */
                width: 380px;
                height: 180px;
                /* background-color: red; */
				display: inline-block;
				margin-left: 12px;
				margin-bottom: 15px;
            }
            .content:hover .hide{/* 当你鼠标移入名字叫content里让子集hide执行{}中代码 */
                opacity: 1;
            }
            .content:hover .title{
                 opacity: 0;
            }
            .images{
                width: 380px;
                height: 180px;
            }
            .title{
                position: absolute;/* 绝对定位 */
                bottom: 0;
                left: 0;
                width: 100%;
                height: 35px;
                /* rgba(红色0-255,绿,蓝,透明度0-1) */
                background-color: rgba(0,0,0,.5);
                color: #fff;/* 文字颜色 */
                line-height: 35px;/* 行高 = 高度 垂直居中 */
                text-indent: 16px;/*首行缩进 */
                transition: .5s;
            }
            .hide{
                position: absolute;/* 绝对定位 */
                top: 0;
                width: 380px;
                height: 180px;
                background-color: rgba(0,0,0,.5);
                text-align: center;/* 文本对齐方式 居中 */
                opacity: 0;/* css3透明度 */
                transition: .5s;/* css3动画过渡效果 */
            }
            .h-header{
                display: block;/* 元素类型转换 块级元素 */
                margin: 15px auto;
            }
            .h-title{
                display: inline-block;
                /* 边框属性 粗细3px 样式none 颜色: #000 黑色 */
                border-bottom: double;
                color: #fff;
                font-size: 20px;/* 文字大小 */
                line-height: 35px;
            }
            .more{
                position: absolute;
                left: 50%;
                margin: 15px auto;
                padding: 5px 15px;/* 内边距  上下 左右 */
                border: 2px solid #fff;
                color: #fff;
                border-radius: 10px;/* css3圆角属性 */
                transform: translateX(-50%);/* css3变换属性 移动自身当前X方向位移 */
            }
			.more:hover{
				cursor: pointer;
				color: #009966;
			}
            
        </style>
    </head>
    <body>
        <div class="wrap"><!-- 盒子标签 -->
            <div class="content">
                <!-- img加载图片标签 src加载图片的标签 -->
                <img class="images" src="images/1.webp">
                <p class="title">口水菌品鉴│宅男宅女觅食记</p>
                <div class="hide">
                    <img class="h-header" src="images/1.png">
                    <div class="h-title">
                        <img src="images/2.png">
                        <span>口水菌品鉴│宅男宅女觅食记</span>
                        <img src="images/3.png">
                    </div>
                    <div class="more">立即查看</div>
                </div>
            </div>
			<div class="content">
			    <!-- img加载图片标签 src加载图片的标签 -->
			    <img class="images" src="images/2.webp">
			    <p class="title">外酥里嫩，韩式炸蟹肉</p>
			    <div class="hide">
			        <img class="h-header" src="images/1.png">
			        <div class="h-title">
			            <img src="images/2.png">
			            <span>外酥里嫩，韩式炸蟹肉</span>
			            <img src="images/3.png">
			        </div>
			        <div class="more">立即查看</div>
			    </div>
			</div>
			<div class="content">
			    <!-- img加载图片标签 src加载图片的标签 -->
			    <img class="images" src="images/3.webp">
			    <p class="title">寒冬福利：火锅燥起来</p>
			    <div class="hide">
			        <img class="h-header" src="images/1.png">
			        <div class="h-title">
			            <img src="images/2.png">
			            <span>寒冬福利：火锅燥起来</span>
			            <img src="images/3.png">
			        </div>
			        <div class="more">立即查看</div>
			    </div>
			</div>
			<div class="content">
			    <!-- img加载图片标签 src加载图片的标签 -->
			    <img class="images" src="images/4.webp">
			    <p class="title">弄碗蟹黄豆腐开开荤</p>
			    <div class="hide">
			        <img class="h-header" src="images/1.png">
			        <div class="h-title">
			            <img src="images/2.png">
			            <span>弄碗蟹黄豆腐开开荤</span>
			            <img src="images/3.png">
			        </div>
			        <div class="more">立即查看</div>
			    </div>
			</div>
			<div class="content">
			    <!-- img加载图片标签 src加载图片的标签 -->
			    <img class="images" src="images/5.webp">
			    <p class="title">好吃又好看，美食</p>
			    <div class="hide">
			        <img class="h-header" src="images/1.png">
			        <div class="h-title">
			            <img src="images/2.png">
			            <span>好吃又好看，美食</span>
			            <img src="images/3.png">
			        </div>
			        <div class="more">立即查看</div>
			    </div>
			</div>
			<div class="content">
			    <!-- img加载图片标签 src加载图片的标签 -->
			    <img class="images" src="images/6.webp">
			    <p class="title">冬天来了，吃点东西滋补一下</p>
			    <div class="hide">
			        <img class="h-header" src="images/1.png">
			        <div class="h-title">
			            <img src="images/2.png">
			            <span>好吃又好看，美食</span>
			            <img src="images/3.png">
			        </div>
			        <div class="more">立即查看</div>
			    </div>
			</div>
        </div>
    </body>
</html>
panpan_6
关注
自适应布局
smilling sky的博客
04-25 548
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
CSS自适应布局思路
09-27
在Web开发中，CSS自适应布局是构建响应式网站的关键技术，它使得网页可以根据不同设备的屏幕尺寸和方向进行适配，提供良好的用户体验。本篇文章主要探讨CSS自适应布局的思路，以帮助对CSS布局样式感兴趣的开发者更好...
页面自适应布局
北街lhy的博客
09-14 579
题目：三栏布局，高度一定，左右各为300px，中间自适应宽度 方法一：采用浮动方式 浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。 方法二：采用绝对定位 绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布...
vue前端自适应布局，一步到位所有自适应
最新发布
lgx211
08-08 1510
1，左右布局 - 左侧固定宽带，右侧自适应剩余的宽度。 - 中间一条分割线，可以拖拉，自适应调整左右侧的宽度。 - 左侧的高度超长自动出现横向滚动条，左侧宽度超长，自动出现竖向滚动条。 2，上中下布局 - 最上面的 搜索条件 div 固定占用 100 px 高度，下面的 查询条件 div 固定占用 30 px 高度，最下面的分页固定占用高度，页面剩下的高度自动分配给中间的表格内容。 - 表格内容高度超过后自动出现竖向滚动条，宽度超出后自动出现横向滚动条。 - 点击按钮，可以 隐藏/显示 搜索条件 di
css 两边固定中间自适应布局的实现
09-22
通过本文所介绍的四种实现“两边固定、中间自适应”的方法，我们可以更好地理解和掌握CSS布局技术。在实际开发中，应当结合具体的布局需求和浏览器兼容情况，灵活运用不同的布局技术来实现设计要求。
CSS百分比padding制作图片自适应布局
10-19
标题“CSS百分比padding制作图片自适应布局”所指出的核心概念是，当设置元素的`padding`为百分比值时，无论是`padding-top`、`padding-bottom`、`padding-left`还是`padding-right`，它们都是基于父元素宽度来计算...
css3自适应浏览器图片布局特效
07-24
首先，我们要理解CSS3中的媒体查询（Media Queries），这是实现自适应布局的关键。媒体查询允许我们根据设备的物理特性，如视口宽度，来应用不同的样式规则。例如，我们可以定义一个断点，当屏幕宽度小于某个值时，...
CSS响应式布局（自适应布局）
热门推荐
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
自适应布局---自适应宽度
u010513603的博客
10-10 421
在网页代码的头部，加入一行viewport元标签。 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-m
自适应的多栏布局
菜鸟初养成的博客
07-22 322
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width:80%; margin:0 auto; background...
自适应布局解析
GuoZebin的博客
11-04 636
自适应的布局是开发中常用的，也是常考的。 首先说到自适应就不得不说弹性布局flex，flex不多赘述，自行去百度，但很多文档对于flex的介绍不详细。下面是对于flex布局文档的补充： flex属性 是 flex-grow、flex-shrink、flex-basis的缩写。flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理...
流动布局新纪元：自适应CSS设计的全能策略
在当今的Web设计中，自适应布局已经成为关键，特别是在移动设备日益普及的今天。流动布局（Responsive Layout）是一种设计理念，它允许网页内容根据屏幕尺寸的变化自动调整布局，确保在不同分辨率的设备上都能提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值