css、HTML制作小米商城网页（三）

input:（输入） button（按钮） :focus（选取获得焦点）

float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距）

:hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）

text-shadow: 1px 1px 1px red(红); 阴影效果
可选值: 水平效果(必填)，垂直效果(必填)，模糊半径(选填)，颜色(选填)

代码：

            <menu class="zt"><div class="clxk"><div class="clxx swbj"><a href="">手机</a><span class="dy">&gt;</span><div class="sjll"><ul class="clk"><li class="cl margin_left"><img src="./img/侧拉框图片.PNG" alt=""><a href="#">Note 11T Pro+</a></li><li class="cl"><img src="./img/侧拉框图片.PNG" alt=""><a href="#">Note 11T Pro+</a></li><li class="cl"><img src="./img/侧拉框图片.PNG" alt=""><a href="#">Note 11T Pro+</a></li><li class="cl"><img src="./img/侧拉框图片.PNG" alt=""><a href="#">Note 11T Pro+</a></li></ul></div></div><div class="clxx"><a href="">电视</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">笔记本 平板</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">出行 穿戴</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">耳机 音响</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">家电</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">智能 路由器</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">电源 配件</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">健康 儿童</a><span class="dy">&gt;</span></div><div class="clxx"><a href="">生活 箱包</a><span class="dy">&gt;</span></div></div>  <div class="swiper"><!-- 图片 --><div class="swiper-wrapper"><div class="swiper-slide"><a href="#"><img src="./img/img2-1.jpg" alt="" /></a></div><div class="swiper-slide"><a href="#"><img src="./img/img2-2.jpg" alt="" /></a></div><div class="swiper-slide"><a href="#"><img src="./img/img2-3.png" alt="" /></a></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev prev"></div><div class="swiper-button-next"></div></div><script>var mySwiper = new Swiper(".swiper", {autoplay: true, //设置自动循环播放loop: true, // 循环模式选项// 如果需要分页器pagination: {el: ".swiper-pagination",clickable: true, //配置点击切换效果},// 如果需要前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script></menu>

侧拉框写一个就够了，剩下的就是复制粘贴了。

主体区侧拉框不能遮挡住搜索区的下拉框：

css样式表：

/* 主体盒子 */
.zt{width: 1226px;height: 460px;/* background-color: #8f979a; */margin: 0px auto;position: relative;
}
/* 产品浏览 */
.clxk{width: 234px;height: 460px;background-color: rgb(105,101,101,.6);position: absolute;z-index: 11;
}
/* 上外间距 */
.swbj{margin-top: 20px;
}
/* 侧拉框选项 */
.clxx{height: 42px;line-height: 42px;/* background-color: #c7bcbc; */padding-left: 25px;
}
/* 箭头位置 */
.clxx>.dy{float: right;padding-right: 20px;
}
/* 触发背景色 */
.clxx:hover{ background-color: #ed772f;
}
/* 箭头触发色 */
.clxx:hover span{color: #a3a2a2;
}
/* 字体色 */
.clxx>a,.clxx>span{color: #fefefe;
}
/* 侧拉框盒子 */
.clk{width: 992px;height: 460px;/* border: 1px red solid; */position: absolute;left: 234px;background-color: #fefefe;position: absolute;top: 0px;z-index: 1;box-shadow: 0px 3px 12px 4px rgba(143, 141, 141, 0.5);
}
/* 侧拉框产品 */
.cl{width:200px;height: 80px;margin: 10px 30px 10px 10px;float: left;
}
/* 外边距 */
.margin_left{margin-left: 40px;
}
/* 行高、内边距、字体色 大小 */
.cl>a{line-height: 80px;padding: 15px;color: black;font-size: 13px;
}
/* 图片 */
.cl>img{float: left;margin-top: 10px;
}
/* 字体色 */.clk>.cl:hover a{color: #ed772f;
}
/* 隐藏侧拉框 */
.clk{display: none;
}
/* 显示侧拉框 */
.swbj:hover .clk{display: block;
}/* 轮播图外壳 */
.swiper {width: 1226px;height: 460px;overflow: hidden;position: relative;
}
.swiper{--swiper-theme-color: #ff6600;/* 设置Swiper风格 */--swiper-navigation-color: #a3a3a5;/* 单独设置按钮颜色 */--swiper-navigation-size: 30px;/* 设置按钮大小 */}
.swiper img{width: 1226px;height: 460px;
}
.swiper .prev{position: absolute;left: 234px;
}

对于轮播图最简单省事的方法就是引入外部轮播图插件

css、HTML制作小米商城网页（三）相关推荐

基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页带轮播带js校验
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
基于HTML+CSS+JavaScript制作学生网页——外卖服务平台10页带js 带购物车
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 ...
基于HTML+CSS+JavaScript制作学生网页——海贼王网站 4页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
css、HTML制作小米商城网页（一）
一.顶部导航栏制作首页导航栏属性: float:(浮动)display: block;(显示块元素)display: none;(隐藏块元素)margin(外边距) :hover(悬浮变色)bord ...
css、HTML制作小米商城网页（二）
一.快速导航搜索区 input:(输入) button(按钮) :focus(选取获得焦点) float:(浮动)display: block;(显示块元素)display: none;(隐藏块元素) ...
css选择器制作一个网页,CSS选择器和做网页思路
这节要做出以下效果的网页其实,做网页就像画画一样,要分为一个一个的区域制作当把基本的区域确定好后,我们才能开始制作网页拿我们今天要做的这种个网页为例,我们可以先把它分为三个区域分别为蓝绿黄区域 ...
中秋之美——html+css+js制作中秋网页
前言八月十五,秋已过半,是为中秋. "但愿人长久,千里共婵娟",中秋时节,气温已凉未寒,天高气爽,月朗中天,正是观赏月亮的最佳时令.古人把圆月视为团圆的象征,因此,又称八月十五为 ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
基于HTML+CSS+JavaScript制作学生网页——斗破苍穹动漫(6页) 排版整洁，内容丰富，主题鲜明
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

css、HTML制作小米商城网页（三）

css、HTML制作小米商城网页（三）相关推荐

最新文章

热门文章