哈尔滨网站推广公司,网站商城定制网站建设,邯郸哪里做网站,微信小程序商城开源源码01-定位
作用#xff1a;灵活的改变盒子在网页中的位置
实现#xff1a;
1.定位模式#xff1a;position
2.边偏移#xff1a;设置盒子的位置 left right top bottom
相对定位
position: relative
特点#xff1a; 不脱标#xff0c;占用自己原来位置 显示模…01-定位
作用灵活的改变盒子在网页中的位置
实现
1.定位模式position
2.边偏移设置盒子的位置 left right top bottom
相对定位
position: relative
特点 不脱标占用自己原来位置 显示模式特点保持不变 设置边偏移则相对自己原来位置移动
div {position: relative;top: 100px;left: 200px;
}
绝对定位
position: absolute
使用场景子级绝对定位父级相对定位子绝父相
特点 脱标不占位 显示模式具备行内块特点 设置边偏移则相对最近的已经定位的祖先元素改变位置 如果祖先元素都未定位则相对浏览器可视区改变位置
.father {position: relative;
}
.father span {position: absolute;top: 0;right: 0;
}
定位居中 实现步骤 绝对定位 水平、垂直边偏移为 50% 子级向左、上移动自身尺寸的一半 左、上的外边距为 –尺寸的一半 transform: translate(-50%, -50%)
img {position: absolute;left: 50%;top: 50%;
/* margin-left: -265px;margin-top: -127px; */
/* 方便 50% 就是自己宽高的一半 */transform: translate(-50%, -50%);
}
固定定位
position: fixed
场景元素的位置在网页滚动时不会改变
特点 脱标不占位 显示模式具备行内块特点 设置边偏移相对浏览器窗口改变位置
div {position: fixed;top: 0;right: 0;
width: 500px;
}
堆叠层级z-index 默认效果按照标签书写顺序后来者居上
作用设置定位元素的层级顺序改变定位元素的显示顺序
属性名z-index
属性值整数数字默认值为0取值越大层级越高
.box1 {background-color: pink;/* 取值是整数默认是0取值越大显示顺序越靠上 */z-index: 1;
}
.box2 {background-color: skyblue;left: 100px;top: 100px;
z-index: 2;
}
02-高级技巧
CSS精灵
CSS 精灵也叫 CSS Sprites是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中再background-position 精确的定位出背景图片的位置。 优点减少服务器被请求次数减轻服务器的压力提高页面加载速度 实现步骤 创建盒子盒子尺寸与小图尺寸相同 设置盒子背景图为精灵图 添加 background-position 属性改变背景图位置
3.1 使用 PxCook 测量小图片左上角坐标
3.2 取负数坐标为 background-position 属性值向左上移动图片位置
案例-京东服务 HTML结构
div classserviceullih5/h5p品类齐全轻松购物/p/lilih5/h5p多仓直发极速配送/p/lilih5/h5p正品行货精致服务/p/lilih5/h5p天天低价畅选无忧/p/li/ul
/div
CSS样式
style* {margin: 0;padding: 0;box-sizing: border-box;}
li {list-style: none;}
.service {margin: 100px auto;width: 1190px;height: 42px;/* background-color: pink; */}
.service ul {display: flex;}
.service li {display: flex;padding-left: 40px;width: 297px;height: 42px;/* background-color: skyblue; */}
.service li h5 {margin-right: 10px;width: 36px;height: 42px;/* background-color: pink; */background: url(./images/sprite.png) 0 -192px;}
.service li:nth-child(2) h5 {background-position: -41px -192px;}
.service li:nth-child(3) h5 {background-position: -82px -192px;}
.service li:nth-child(4) h5 {background-position: -123px -192px;}
.service li p {font-size: 18px;color: #444;font-weight: 700;line-height: 42px;}
/style
字体图标 字体图标展示的是图标本质是字体
作用在网页中添加简单的、颜色单一的小图标
优点 灵活性灵活地修改样式例如尺寸、颜色等 轻量级体积小、渲染快、降低服务器请求次数 兼容性几乎兼容所有主流浏览器 使用方便先下载再使用
下载字体
iconfont 图标库iconfont-阿里巴巴矢量图标库
登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标加入购物车 → 购物车添加至项目确定 → 下载至本地 使用字体 引入字体样式表iconfont.css 标签使用字体图标类名 iconfont字体图标基本样式字体名字体大小等等 icon-xxx图标对应的类名 上传矢量图
作用项目特有的图标上传到 iconfont 图标库生成字体 上传步骤上传 → 上传图标 → 选择 svg 矢量图打开 → 提交 → 系统审核
03-CSS修饰属性
垂直对齐方式 属性名vertical-align 过渡
作用可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名transition复合属性
属性值过渡的属性 花费时间 (s)
提示 过渡的属性可以是具体的 CSS 属性 也可以为 all两个状态属性值不同的所有属性都产生过渡效果 transition 设置给元素本身
img {width: 200px;height: 200px;transition: all 1s;
}
img:hover {width: 500px;height: 500px;
}
透明度opacity
作用设置整个元素的透明度包含背景和内容
属性名opacity
属性值0 – 1 0完全透明元素不可见 1不透明 0-1之间小数半透明
光标类型cursor
作用鼠标悬停在元素上时指针显示样式
属性名cursor 04-综合案例-轮播图 图片效果
HTML结构
div classbanner!-- 图: ul li --ullia href#img src./images/banner1.jpg alt/a/lilia href#img src./images/banner2.jpg alt/a/lilia href#img src./images/banner3.jpg alt/a/li/ul
/div
CSS样式
* {margin: 0;padding: 0;box-sizing: border-box;
}
li {list-style: none;
}
.banner {position: relative;margin: 100px auto;width: 564px;height: 315px;/* background-color: pink; */overflow: hidden;
}
/* 图片 */
.banner img {width: 564px;border-radius: 12px;vertical-align: middle;
}
.banner ul {display: flex;
}
箭头
HTML结构
!-- 箭头 --
!-- 上一张 prev --
a href# classprevi classiconfont icon-zuoce/i
/a
!-- 下一张 next --
a href# classnexti classiconfont icon-youce/i
/a
CSS样式
/* 箭头 */
.banner .prev,
.banner .next {/* 隐藏 */display: none;position: absolute;top: 50%;transform: translateY(-50%);
width: 20px;height: 30px;background-color: rgba(0,0,0, 0.3);
text-decoration: none;color: #fff;line-height: 30px;
}
/* 鼠标滑到banner区域箭头要显示 display:block */
.banner:hover .prev,
.banner:hover .next {display: block;
}
.banner .prev {left: 0;border-radius: 0 15px 15px 0;
}
.banner .next {right: 0;border-radius: 15px 0 0 15px;text-align: center;
}
圆点
HTML结构
!-- 圆点 --
olli/lili classactive/lili/li
/ol
CSS样式
/* 圆点 */
.banner ol {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);height: 13px;background-color: rgba(255,255,255,0.3);
display: flex;
border-radius: 10px;
}
.banner ol li {margin: 3px;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;cursor: pointer;
}
/* 橙色的li */
.banner ol .active {background-color: #ff5000;
}
