大家好，欢迎来到IT知识分享网。
前言
本篇博客就不给大家讲解了，直接上代码
💓 个人主页：普通young man-CSDN博客
⏩ 文章专栏：手机网页(HTML+CSS)
若有问题 评论区见📝
🎉欢迎大家点赞👍收藏⭐文章
目录
大家直接复制吧，如果需要图片的可以私信我,免费给大家，大家给个关注点赞评论就行
网页展示
代码
HTML
enroll.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="login_enrool.css" />
</head>
<style>
</style>
<body>
<div class="all">
<div class="reg">
<div class="reg_1">
<h2>已有账号？</h2>
<p>请使用你的账号进行登录！</p>
<a href="login.html">
<button type="button" class="sig">登录</button>
</a>
</div>
</div>
<div class="log">
<div>
<div class="register" id="tiao">
<form>
<div class="register-top-grid">
<h3>注册新用户</h3>
<div class="input">
<input
class="input-text"
type="text"
placeholder="请输入用户名"
v-model="name"
/>
</div>
<div class="input">
<input
class="input-text"
type="password"
placeholder="请输入密码"
v-model="password"
/>
</div>
<div class="clearfix"></div>
</div>
<div class="text-center">
<a href="index.html"><button type="button" class="zhuce">注册</button></a>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oppo官网</title>
<!-- 引入重置样式 -->
<link rel="stylesheet" href="reset.css">
<!-- 引入自定义样式 -->
<link rel="stylesheet" href="style.css">
</head>
<!--saks -->
<body>
<div class="topBar">
<div class="barIn w">
<!-- 顶通栏的左边 -->
<div class="barL">
<a href="#">
<img src="img/微博.png" alt="">
</a>
<p>4001-666-888</p>
</div>
<!-- 顶通栏的右边 -->
<ul class="barR">
<li><a href="login.html">登录</a></li>
<li><a href="enroll.html">注册</a></li>
<li><a href="#">积分兑换</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#" class="gwc">购物车</a></li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="header w">
<!-- 左边的logo -->
<div class="logo">
<img src="img/oppo.jpg">
</div>
<!-- 右边的导航 -->
<ul class="nav">
<li class="cur"><a href="#">首页</a></li>
<li class="cur"><a href="#">手机配件</a></li>
<li class="cur"><a href="#">服务</a></li>
<li class="cur"><a href="#">专卖店</a></li>
<li class="cur"><a href="#">应用商店</a></li>
<li class="cur"><a href="#">ColorOS</a></li>
<li class="cur"><a href="#">社区</a></li>
</ul>
</div>
<!-- banner -->
<div class="banner">
<a href="#"></a>
</div>
<!-- 内容区域 -->
<!-- 明星机型 -->
<div class="star">
<div class="starIn w">
<!-- 标题盒子 -->
<div class="star_title">
<!-- 线 -->
<div class="line"></div>
<h3>OPPO <strong>STAR</strong> 明星机型</h3>
<div class="line"></div>
<h4> COLLECTION <a href="">全部手机</a></h4>
</div>
<!-- 手机 -->
<div class="mobile">
<ul >
<li>
<img src="img/手机/1.png">
<h3>坤坤手机</h3>
<p></p>
</li>
<li>
<img src="img/手机/2.png">
<h3>坤坤手机</h3>
<p></p>
</li>
<li>
<img src="img/手机/3.png">
<h3>坤坤手机</h3>
<p></p>
</li>
<li>
<img src="img/手机/4.png">
<h3>坤坤手机</h3>
<p></p>
</li>
<li>
<img src="img/手机/5.png">
<h3>坤坤手机</h3>
<p></p>
</li>
<li>
<img src="img/手机/6.png">
<h3>坤坤手机</h3>
<p></p>
</li>
<li>
<img src="img/手机/7.png">
<h3>坤坤手机</h3>
<p></p>
</li>
<li>
<img src="img/手机/8.png">
<h3>坤坤手机</h3>
<p></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- machine 配件区域开始 -->
<!-- 探索区域开始 -->
<div class="tansuo">
<div class="w">
<div class="tansuo-top">
<div class="conmon-title">
<div class="line"></div>
<div class="title">
<span>WORLD</span> OF OPPO 探索欧珀
</div>
<div class="line"></div>
</div>
</div>
<div class="tansuo-bottom">
<div class="left">
<ul>
<li class="large-img"><img src="img/手机/a1.png" alt=""></li>
<li><img src="img/手机/a2.jpg" alt=""></li>
<li><img src="img/手机/a3.jpg" alt=""></li>
<li><img src="img/1570600296511873.jpg" alt=""></li>
<!-- 其他小图片... -->
</ul>
</div>
</div>
<div class="right">
<div class="container">
<div class="right">
<div class="accessory-card">
<img src="img/其他/202003100403395e674cabe09be.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>智能手表</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥2999</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<div class="accessory-card">
<img src="img/其他/2021051809051360a3bbc549fb2.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>原装耳机</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥199</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<div class="accessory-card">
<img src="img/其他/R-C.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>头戴耳机</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥1999</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<div class="accessory-card">
<img src="img/其他/011.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>充电器</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥60</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<div class="accessory-card">
<img src="img/其他/rrrrr.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>游戏手柄</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥199</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<div class="accessory-card">
<img src="img/其他/vvvv.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>移动电源</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥1999</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<div class="accessory-card">
<img src="img/其他/dddd.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>智能眼镜</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥60</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<div class="accessory-card">
<img src="img/其他/cccc.png" alt="原装耳机" class="accessory-img">
<div class="accessory-info">
<h3>音响</h3>
<p>完美适配全系列手机，提供沉浸式音质体验。</p>
<p class="price">价格: ￥60</p>
<a href="#" class="learn-more">了解更多</a>
</div>
</div>
<!-- 重复上述结构以添加更多卡片 -->
<!-- ... -->
</div>
</div>
</div>
</div>
</div>
<div class="main conter">
<div class="top">
<h1>推荐信息</h1>
</div>
<div class="new">
<!-- ... 其他内容省略以保持简洁，你可以根据上面提供的样式自行添加... -->
<!-- 示例部分 -->
<div class="new1-content clearfix">
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/1.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">K系列</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/2.png">
<div class="text">
<p class="cate">产品</p>
<p class="name">OPPO IoT产品</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/3.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">oppo手机降价！</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/4.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">ColorOS</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/5.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">K系列</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
</div>
<div class="new1-content clearfix">
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/6.png">
<div class="text">
<p class="cate">产品</p>
<p class="name">OPPO智能电视</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/7.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">OPPO IoT</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/8.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">OPPO Watch</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/10.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">OPPO Enco</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/推荐/9.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">oppo Find</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
<a href="" target="_blank">
<div class="left fl">
<img src="img/1570600296511873.jpg">
<div class="text">
<p class="cate">产品</p>
<p class="name">oppo Find</p>
<a href="">了解更多<span>></span></a>
</div>
</div>
</a>
</div>
<!-- 更多内容请参照上面的结构自行添加 -->
</div>
</div>
<!-- 底部区域开始 -->
<!-- 保障区域开始-->
<div class="baozhang w">
<ul>
<li>
<p>正品保障</p>
<p>保障所有产品都是原装正品</p>
</li>
<li>
<p>正品保障</p>
<p>保障所有产品都是原装正品</p>
</li>
<li>
<p>正品保障</p>
<p>保障所有产品都是原装正品</p>
</li>
<li>
<p>正品保障</p>
<p>保障所有产品都是原装正品</p>
</li>
<li>
<p>正品保障</p>
<p>保障所有产品都是原装正品</p>
</li>
</ul>
</div>
<!-- 保障区域结束-->
<!-- list 链接区域开始 -->
<div class="list">
<div class="w">
<dl>
<dt>关于我们</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">新闻中心</a></dd>
<dd><a href="#">人才招聘</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">新闻中心</a></dd>
<dd><a href="#">人才招聘</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">新闻中心</a></dd>
<dd><a href="#">人才招聘</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">新闻中心</a></dd>
<dd><a href="#">人才招聘</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">新闻中心</a></dd>
<dd><a href="#">人才招聘</a></dd>
</dl>
<dl class="last">
<dt>关于我们</dt>
<dd>
<p class="contact">4001-666-888</p>
<p>7*24小时客服电话</p>
</dd>
<dd class="">
<p class="contact">在线客服</p>
<p>服务时间段8:30-22:00</p>
</dd>
</dl>
</div>
</div>
<!-- list 链接区域结束 -->
<!-- 底部区域结束 -->
<!-- footer区域 -->
<div class="footer"> -->
<div class="w">
<div class="left">
©2014东莞市永盛通信科技有限公司 粤ICP 备08130115号
</div>
<ul class="right">
<li><a href="#">版权说明</a></li>
<li><a href="#">使用协议</a></li>
<li><a href="#">网站地图</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<!-- footer区域结束 -->
</body>
</html>login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="login_enrool.css" />
</head>
<style>
</style>
<body>
<div class="all">
<div class="log">
<div class="register">
<form>
<div class="register-top-grid">
<h3>用户登录</h3>
<div class="input">
<span>用户名 <label style="color: red">* </label></span>
<input
type="text"
v-model="name"
placeholder="请输入用户名"
class="input-text"
/>
</div>
<div class="input">
<span>密码 <label style="color: red">*</label></span>
<input
type="password"
v-model="password"
placeholder="请输入密码"
class="input-text"
/>
</div>
</div>
<div class="text-center">
<a href="index.html"><button type="button" class="zhuce">登录</button></a>
</div>
</form>
</div>
</div>
<div class="reg">
<div class="reg_1">
<h2>没有账号？</h2>
<p>请点击这里注册账号</p>
<a href="enroll.html">
<button type="primary" class="sig">注册</button>
</a>
</div>
</div>
</div>
</body>
</html>CSS
login_enrool.css
/*登录/注册*/ .all { width: 800px; box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9); margin: auto; margin-top: 5%; display: flex; border-radius: 35px; background-color: #ffffff; height: 550px; } .log { width: 50%; margin: auto; } .reg { width: 50%; height: 100%; margin: auto; background-color: #20b2aa; border-radius: 35px; color: #ffffff; } .reg_1 { text-align: center; margin: auto; margin-top: 50%; } .reg_1 h2 { font-weight: 700; } .reg_1 p { margin: 15px 0px 25px 0px; } .sig { width: 70px; height: 30px; border-radius: 12px; background-color: #20b2aa; border-color: #fff; color: #ffffff; } #tiao { padding: 0em 0; } .reg_1 a { color: #ffffff; } h3 { font-size: 3em; color: black; padding-bottom: 1em; margin: 0; text-align: center; font-family: "Marvel-Regular"; } .input { margin: 10px 50px; width: 300px; height: 70px; } span { color: #999; font-size: 0.85em; padding-bottom: 0.2em; display: block; text-transform: uppercase; margin-bottom: 4px; } .input-text { border: 1px solid #555; outline-color: #fd9f3e; width: 90%; font-size: 1em; padding: 0.5em; line-height: inherit; } .input-text { border: 1px solid #555; outline-color: #fd9f3e; width: 90%; font-size: 1em; padding: 0.5em; line-height: inherit; } .register-top-grid { color: black; padding-bottom: 1em; margin: 0; font-family: "Marvel-Regular"; margin: 10px 0; } .text-center { text-align: center; } .zhuce { color: rgb(255, 253, 253); width: 80px; height: 35px; background-color: rgb(40, 40, 40); border: none; } .zhuce:hover { background-color: #; /* 深绿色背景，鼠标悬停时改变颜色 */ } .sig:hover { background-color: #1fa7a0; /* 深绿色背景，鼠标悬停时改变颜色 */ }reset.css
/* 因为不是全部标签都有默认内外边距，做项目的时候清除默认边距可以选中对应标签去清除，代码执行效率就更高 */ h1, h2, h3, h4, h5, h6, body, p, dl, dt, dd, ul, li, ol { padding: 0; margin: 0; } li { list-style: none; } body { font: 14px "微软雅黑"; color: #999; } a { text-decoration: none; color: #999; } style.css
/* 版心 */ .w { width: 1200px; margin: 0 auto; /* background-color: #e90000; */ } .topBar { height: 37px; background: #; border-top: 3px solid green; } .barIn{ margin-top: 6px; height: 37px; /* background-color: pink; */ } .barL{ float: left; /* background-color: rgb(247, 109, 132); */ } .barL a,p,li{ float: left; } /* 设置顶通栏左边图片的位置 */ .barL :nth-child(1){ margin:2px 15px 0 0; } .barL :nth-child(2){ margin:4px 15px 0 0; } .barL a img{ width: 20px; /* background-color: #00925f; */ } /* 设置顶通栏右边的导航栏 */ .barR{ margin-top: 6px; float:right; /* background-color: #00925f; */ } .barR li{ float: left; } .barR a{ padding: 0 15px; border-right: 1px solid #; /* background-color: black; */ } /* 设置购物车图标 background:颜色 url 禁止平铺 坐标x 坐标Y */ .barR .gwc { text-decoration: none; /* color: #bdbdbd; */ font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; background:linear-gradient(to right,#ffffff,#ffffff) no-repeat left bottom; background-size: 0 1px; transition: background-size 100ms; } /*文字变色*/ .barR li a { text-decoration: none; color: #bdbdbd; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; background:linear-gradient(to right,#ffffff,#ffffff) no-repeat left bottom; background-size: 0 1px; transition: background-size 100ms; } .barR li a:hover { color: rgb(121, 115, 115); background-position-x:left; background-size:100% 2px; } /*在上面的顶通栏添加个超出隐藏*/ .topBar { height: 37px; background: #2b2b2b; border-top: 3px solid rgb(0, 0, 0); /* 添加个超出隐藏 */ overflow: hidden; } /* 头部 */ .header{ height: 80px; } .logo { width: 160px; height: 50px; float: left; /* background-color: #00925f; */ margin-top: -10px; } /* a指定宽高不会生效 所以要变成块 */ .logo img{ width: 170px; height: 50px; margin-top: 30px; /* background-color: #00935f; */ } .nav{ height: 80px; float: right; line-height: 80px; } .nav li{ float: left; font-size: 18px; font-weight: bold; margin: 0 18px; /* 添加以下两行以实现椭圆化和设置透明度 */ border-radius: 10px;/* 来调整椭圆程度 */ opacity: 0.5; /* 设置透明度，范围从0(完全透明)到1(完全不透明) */ transition: background-color 0.3s ease; /* 添加过渡效果，使颜色变化更平滑 */ } .nav a{ color: #000000; } .cur a{ color: #000000; } .cur:hover{ background-color: #b8bab8; } / * banner */ .banner{ height: 621px; } .banner a{ display: block; height: 621px; /* 设置背景图片 */ background-image: url("img/banner.jpg"); /* 设置图片在水平方向平铺 */ background-repeat: repeat; /* 图片大小覆盖整个屏幕/容器，这里的关键是 'cover'，它会保持图片的宽高比并将图片缩放以完全覆盖背景区域 */ background-size: cover; /* 确保背景图片始终居中 */ background-position: center; /* background-color: #00925f; */ } / * 内容区域 */ /* 明星机型 */ .star { height: 846px; background-color: #f2f2f2; } .starIn { height: 846px; /* height: 1180px; */ margin: 0 auto; } .star_title { padding-top: 47px; text-align: center; /* background-color: #00925f; */ } .star_title .line { width: 92px; height: 1px; background-color: #dadada; margin: 0 auto; transition: 0.5s; } .star_title h3 { height: 48px; line-height: 48px; font-size: 28px; font-weight: 400; text-align: center; color: #2b2b2b; } .star_title h4{ /* background-color: #; */ line-height: 62px; text-align: center; } .star_title h4 a{ color: #00935f; } /* 鼠标移动线变长的动画 */ .star_title:hover .line{ width: 150px; } .mobile { background-color: rgba(181, 183, 182, 0.5); /* 修改此处，颜色值和透明度 */ margin-right: 20px; } .mobile ul li{ text-align: center; float: left; /* border-bottom: 5px solid #dfdfdf; */ width: 240px; height: 300px; margin: 15px; /* background-color: #9c9c9c; */ } .mobile ul{ margin-left: 25px; position: relative; /* 为绝对定位的伪元素做准备 */ display: inline-block; text-align: center; cursor: pointer; /* 改变鼠标指针形状，提示可点击 */ } .mobile ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 0; } .mobile li img { width: 100%; height: auto; transition: transform 0.3s ease; /* 平滑的过渡效果 */ } .mobile li:hover img { transform: scale(1.1); /* 鼠标悬停时放大图片 */ } .mobile h3 { margin: 0.5rem 0; /* 给标题留出一点空间 */ } /* machine 配件区域开始 */ /* machine 配件区域开始 */ /* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 探索区域样式 */ .tansuo { background-color: #f8f8f8; padding: 80px 0; } .w { max-width: 1200px; margin: 0 auto; } /* 标题样式 */ .tansuo-top { text-align: center; } .conmon-title { display: flex; align-items: center; justify-content: center; gap: 10px; } .line { height: 2px; width: 40px; background-color: #000; } .title { font-size: 24px; font-weight: bold; color: #000; } .title span { color: #0091ff; } /* 内容区域样式 */ /* 设置左侧列表项的基础样式与悬停效果 */ .left li { position: relative; /* 为绝对定位的子元素准备 */ overflow: hidden; /* 防止悬停效果超出边界 */ } /* 图片基础样式，确保响应式且填充容器 */ .large-img img, .left li img { width: 100%; height: auto; object-fit: cover; /* 保持图片原始比例并填满容器 */ transition: opacity 0.3s; /* 平滑过渡透明度变化 */ } /* 大图布局调整，跨多列和行以突出显示 */ .large-img img { grid-column: span 2; /* 横向跨越两列 */ grid-row: span 2; /* 纵向跨越两行，可按需调整 */ } /* 鼠标悬停时降低图片透明度 */ .left li:hover img { opacity: 0.8; } /* 底部区域布局 */ .tansuo-bottom { display: flex; justify-content: space-between; margin-top: 50px; } /* 左侧列表去除默认样式并设置弹性布局 */ .left ul { list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; } /* 左侧区域整体网格布局配置 */ .left { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */ grid-gap: 10px; padding: 10px; } /* 大图容器样式 */ .large-img { grid-column: span 2; grid-row: span 2; max-width: 100%; height: auto; /* 自动高度适应内容 */ } /* 重复定义左侧列表项，确保一致性和明确性 */ .left li { list-style-type: none; position: relative; overflow: hidden; } /* 左右两侧图片圆角美化 */ .left li img, .right img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; } /* 右侧图片宽度调整 */ .right img { width: calc(50% - 20px); } /* 鼠标悬停放大效果 */ .left li img:hover, .right img:hover { transform: scale(1.1); /* 图片放大 */ transition: transform 0.3s ease; /* 平滑动画过渡 */ } /* 响应式设计，针对小屏幕优化 */ @media (max-width: 768px) { .tansuo-bottom { flex-direction: column; /* 垂直堆叠元素 */ } .right img { width: 100%; /* 图片全宽适应小屏 */ margin-top: 20px; /* 上边距调整 */ } } /*右侧表单*/ .container { /* 假设这是外部容器，可以根据需要调整 */ } .right { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; } .accessory-card { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; background-color: #ffffff; padding: 10px; /* 减少内边距以提供更多空间给图片 */ margin-bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; width: 270px; max-width: 300px; margin-top: 50px; } .accessory-img { max-width: 100%; height: 250px; /* 进一步增加图片高度以突出 */ object-fit: cover; /* 保持图片比例并填充容器 */ border-radius: 8px 8px 0 0; /* 只给图片上边和左边加圆角 */ margin-bottom: 10px; } .accessory-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 20px; /* 内容区域增加一些内边距 */ text-align: center; } .accessory-card h3 { margin: 0; color: #333; font-size: 16px; line-height: 1.2; } .accessory-card p { margin: 5px 0 10px; color: #666; font-size: 14px; line-height: 1.4; } .accessory-card .price { font-weight: bold; color: #c00; } .accessory-card a { display: block; margin: 10px auto 0; padding: 8px 16px; background-color: #0091FF; color: #fff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; width: fit-content; /* 使按钮宽度自适应内容 */ } .accessory-card a:hover { background-color: #0056b3; } /* machine 配件区域结束 */ /* 探索区域开始 */ .main { max-width: 1400px; margin: 0 auto; } .top { text-align: center; } .new { margin-top: 20px; } .new1-content, .new2-content, .new3-content { display: flex; justify-content: space-between; margin-bottom: 20px; } .clearfix::after { content: ""; display: table; clear: both; } .left, .right { position: relative; } .left img, .right img { width: 100%; height: auto; } .text { padding: 10px; background-color: rgba(255, 255, 255, 0.8); position: absolute; bottom: 0; left: 0; right: 0; color: #333; } .cate { font-size: 14px; margin-bottom: 5px; } .name { font-size: 18px; margin-bottom: 10px; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } /* 探索区域结束 */ /*内容区域结束 */ /* 保障区域开始 */ .baozhang { padding: 43px 0 36px 0; height: 45px; } .baozhang li { float: left; height: 45px; padding-left: 55px; /* width: 236px; */ width: 181px; background: url(img/保障.png) no-repeat left center; /* background-color: pink; */ font-size: 14px; } .baozhang li p { height: 21px; line-height: 21px; } .baozhang li p:nth-child(2) { color: #; } /* 保障区域结束 */ /* list 链接区域开始 */ .list { border-top: 1px solid #ccc; padding-top: 34px; height: 175px; } .list dl { float: left; width: 196px; font-size: 14px; } .list dl dt, .list dl dd { height: 30px; line-height: 30px; } .list dl dt { font-weight: 700; } .list dl dd a { color: #; } .list dl.last dd { margin-top: 7px; height: 50px; padding-left: 50px; background: url(img/电话.png) no-repeat; } .list dl.last dd. { background: url(img/.png) no-repeat; } .list dl.last dd p { font-size: 12px; line-height: 17px; color: #999; } .list dl.last dd p.contact { color: #00925f; } /* list 链接区域结束 */ /* footer区域 */ .footer { height: 72px; line-height: 25px; background-color: #2b2b2b; font-size: 12px; } .footer .left { float: left; padding-left: 130px; margin-top: -10px; background: url(img/oppo000.png) no-repeat left center; color: #; } .footer .right { /* background-color: #0056b3; */ margin-top: 20px; width: 500px; float: right; } .footer .right li { margin-top: -20px; float: left; margin-left: 40px; } .footer .right li a { font-size: 13px; color: #; } 大家直接复制吧，如果需要图片的可以私信我,免费给大家，大家给个关注点赞评论就行
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/129846.html
