练习京东顶部导航条、背景、渐变、按钮练习(雪碧图)、渐变

article/2025/3/10 13:05:03

练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东顶部导航条</title><!-- 引入重置样式表 --><link rel="stylesheet" href="./css/reset.css"><!-- 引用图标字体 --><link rel="stylesheet" href="./fa/css/all.css"><style>.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}body{/* 设置字体 */font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;}/* 设置外部容器的样式 */.top-bar-wrapper{/* 设置宽度 */width: 100%;/* 设置背景颜色 */background-color: #E3E4E5;height: 30px;/* 设置行高,没有设置高度 使文字垂直居中 */line-height: 30px;/* 设置下边框 */border-bottom: 1px #ddd solid}/* 设置内部容器的样式 */.top-bar{/* 固定宽度 */width: 1190px;/* 设置水平居中 */margin: 0 auto;position: relative;}/* 设置字体样式 */.top-bar a ,.top-bar span,.top-bar i{color: #999;text-decoration: none;}.top-bar a:hover,.top-bar a.highlight{color: #f10215;}/* 设置location */.location{float: left;}/* 设置location下的小图标 */.location .fas{color: #f10215;}/* 设置城市列表的效果 */.location .city-list{display: none;width: 320px;height: 436px;background-color: white;border: 1px solid rgb(204, 204, 204);/* 设置绝对定位,使其不占据页面的位置 */position: absolute;top:31px;z-index: 999;box-shadow: 0 2px 2px rgba(0, 0, 0, .2)}/* 当鼠标移入到location时,让city-list显示 */.location:hover .city-list{display: block;}.current-city{padding: 0 10px;border: 1px solid transparent;border-bottom: none;position: relative;z-index: 9999;}/* 设置current-city的移入的效果 */.location:hover .current-city{background-color: white;border: 1px solid rgb(204, 204, 204);border-bottom: none;padding-bottom: 1px;}/* 设置shortcut */.shortcut{float: right;}/* 设置分割线 */.shortcut .line{width: 1px;height: 10px;background-color: rgb(204, 202, 202);margin: 12px 12px 0;}/* 设置li */.shortcut li{float: left;}</style>
</head><body><!-- 创建外围的容器 --><div class="top-bar-wrapper"><!-- 创建内部容器 --><div class="top-bar"><!-- <div class="top-bar clearfix"> --><!-- 左侧的菜单 --><div class="location"><div class="current-city"><i class="fas fa-map-marker-alt"></i><a href="javascript:;">北京</a></div><!-- 放置城市列表的div --><div class="city-list"></div></div><!-- 右侧的菜单 --><ul class="shortcut"><!-- <ul class="shortcut clearfix"> --><li><a href="javascript:;">你好,请登录</a><a class="highlight" href="javascript:;">免费注册</a></li><!-- 分割线 --><li class="line"></li><li><a href="javascript:;">我的订单</a></li><li class="line"></li><li><a href="javascript:;">我的京东</a><i class="fas fa-angle-down"></i></li><li class="line"></li><li><a href="javascript:;">京东会员</a></li><li class="line"></li><li><a class="highlight" href="javascript:;">企业采购</a><i class="fas fa-angle-down"></i></li><li class="line"></li><li><span>客户服务</span><i class="fas fa-angle-down"></i></li><li class="line"></li><li><span>网站导航</span><i class="fas fa-angle-down"></i></li><li class="line"></li><li><span>手机京东</span></li></ul></div></div>
</body></html>

背景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 500px;height: 500px;/* background-color 设置背景颜色*/background-color: #bfa;/* background-image 设置背景图片 - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色- 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满- 如果背景的图片大于元素,将会一个部分背景无法完全显示- 如果背景图片和元素一样大,则会直接正常显示*/background-image: url("./img/1.png");/* background-repeat 用来设置背景的重复方式可选值:repeat 默认值 , 背景会沿着x轴 y轴双方向重复repeat-x 沿着x轴方向重复repeat-y 沿着y轴方向重复no-repeat 背景图片不重复*/background-repeat: no-repeat;/*background-position 用来设置背景图片的位置设置方式:通过 top left right bottom center 几个表示方位的词来设置背景图片的位置使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center通过偏移量来指定背景图片的位置:水平方向的偏移量 垂直方向变量*//* background-position: center; */background-position: -50px 300px;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 500px;height: 500px;overflow: auto;background-color: #bfa;background-image: url("./img/2.jpg");background-repeat: no-repeat;background-position: 0 0;padding: 10px;/*设置背景的范围 background-clip 可选值:border-box 默认值,背景会出现在边框的下边padding-box 背景不会出现在边框,只出现在内容区和内边距content-box 背景只会出现在内容区background-origin 背景图片的偏移量计算的原点padding-box 默认值,background-position从内边距处开始计算content-box 背景图片的偏移量从内容区处计算border-box 背景图片的变量从边框处开始计算*//* background-origin: border-box;background-clip: content-box; *//* background-size 设置背景图片的大小第一个值表示宽度 第二个值表示高度- 如果只写一个,则第二个值默认是 autocover 图片的比例不变,将元素铺满contain 图片比例不变,将图片在元素中完整显示*/background-size: contain;/* background-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-originbackground-clipbackground-attachment- backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求,也没有哪个属性是必须写的注意:background-size必须写在background-position的后边,并且使用/隔开background-position/background-sizebackground-origin background-clip 两个样式 ,orgin要在clip的前边*/}.box2{width: 300px;height: 1000px;background-image: url('./img/1.png');background-repeat: no-repeat;background-position: 100px 100px;/* background-attachment- 背景图片是否跟随元素移动- 可选值:scroll 默认值 背景图片会跟随元素移动fixed 背景会固定在页面中,不会随元素移动*/background-attachment: fixed;}.box3{border: 10px red double;padding: 50px;width: 500px;height: 500px;background: url('./img/2.jpg') #bfa  center center/contain border-box content-box no-repeat ;}</style>
</head>
<body><div class="box3"></div><!-- <div class="box1"><div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aut, odio iusto accusantium ipsum aliquid omnis facere sapiente, nobis vel dicta alias ducimus. Repellat similique unde eius tempore, quia quo.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, accusamus quibusdam. Adipisci in dolorem qui accusantium accusamus voluptatibus magnam nesciunt minus enim quaerat! Quidem, rem. Ipsum amet praesentium enim aliquid!Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam provident repellendus ipsum dolorum optio quo, iure eveniet beatae cupiditate rerum minus corporis illum aliquam illo ut quidem aliquid expedita deserunt.</div></div> -->
</body>
</html>

雪碧图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a:link{display: block;width: 93px;height: 29px;background-image: url('./img/08/link.png')}a:hover{background-image: url('./img/08/hover.png')}a:active{background-image: url('./img/08/active.png')}/*图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载,浏览器加载外部资源时是按需加载的,用则加载,不用则不加载像我们上边的练习link会首先加载,而hover和active会在指定状态触发时才会加载*/</style>
</head>
<body><a href="javascript:;"></a></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a:link{display: block;width: 93px;height: 29px;background-image: url('./img/09/btn.png')}a:hover{background-position: -93px 0;}a:active{background-position: -186px 0;}/* 解决图片闪烁的问题:可以将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示的图片这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图雪碧图的使用步骤:1.先确定要使用的图标2.测量图标的大小3.根据测量结果创建一个元素4.将雪碧图设置为元素的背景图片5.设置一个偏移量以显示正确的图片雪碧图的特点:一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户的体验*/.box1{width: 128px;height: 46px;background-image: url('./img/09/amazon-sprite_.png');background-position:0 0;}.box2{width: 42px;height: 30px;background-image: url('./img/09/amazon-sprite_.png');background-position: -58px -338px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><a href="javascript:;"></a></body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 200px;height: 200px;/* background-color: #bfa; *//* 通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果!!渐变是图片,需要通过background-image来设置线性渐变,颜色沿着一条直线发生变化linear-gradient()linear-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域- 线性渐变的开头,我们可以指定一个渐变的方向to leftto rightto bottomto topdeg deg表示度数turn 表示圈- 渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况repeating-linear-gradient() 可以平铺的线性渐变*//* background-image: linear-gradient(red,yellow,#bfa,orange); *//* background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px); */background-image: repeating-linear-gradient(to right ,red, yellow 50px);}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 300px;height: 300px;/* radial-gradient() 径向渐变(放射性的效果) *//* 默认情况下径向渐变的形状根据元素的形状来计算的正方形 --> 圆形长方形 --> 椭圆形- 我们也可以手动指定径向渐变的大小circleellipse- 也可以指定渐变的位置- 语法:radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)大小:circle 圆形ellipse 椭圆closest-side 近边	closest-corner 近角farthest-side 远边farthest-corner 远角位置:top right left center bottom*/background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

http://chatgpt.dhexx.cn/article/f7Jr6ZLu.shtml

相关文章

DaZeng:雪碧图(精灵图)的使用

雪碧&#xff08;精灵&#xff09;图 要求显示效果&#xff1a;&#xff08;轮播图导航栏效果&#xff09; 页面结构&#xff1a; <ul class"list-box"><li></li><li></li><li></li><li></li><li><…

a与雪碧图在导航处的使用

a与雪碧图在导航处的使用 实现效果为鼠标未放上之前为默认颜色&#xff0c;放上之后变成可以选中的红色。 选中前的效果&#xff1a; 选中后的效果&#xff1a; 设置的HTML源代码为&#xff1a; 设置未选中前的CSS代码&#xff1a; 设置选中前的a颜色以及div中的雪碧图类型…

【Unity ShaderGraph使用雪碧图制作导航光效效果】

效果&#xff1a; ShaderGraph的制作&#xff1a; shader中uv数和雪碧图的uv数对上就能出效果。 直接上代码&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class TurnDirEffectController : …

css超链接样式+雪碧图实现导航

一、CSS链接的四种状态【演示前清除浏览器记录】 1.1 a:link 普通的、未被访问的链接&#xff1f;&#xff1f;&#xff1f; 1.2 a:visited 用户已被访问的链接&#xff1f;&#xff1f;&#xff1f; 1.3 a:hover 鼠标指针位于链接的上方 1.4 a:active 链接被点…

Apache Flink Meetup 8.7 深圳站,企业实践 + 1.14 新特性预览

时隔 10 个月&#xff0c;Apache Flink Meetup 又来到了深圳这个与 Flink 契合度很高的城市。正如改革和创新是深圳的标签&#xff0c;Apache Flink 给技术开发者们带来的&#xff0c;也是摒弃旧的 “批处理” 思维&#xff0c;迎接新的 “流批一体” 趋势。那么本次的 Meetup …

JUST技术:利用轨迹拼接分析实时可达区域

如何快速得知从你的位置开始出发&#xff0c;在当前的交通状况下&#xff0c;5分钟之内能够抵达的空间区域范围&#xff1f;当你掏出手机打车时&#xff0c;出租车调度平台应该通知哪些范围的车主进行接单&#xff1f;本文将带来被国际著名数据库和数据挖掘会议DASFAA 2020 &am…

基于在线地图的轨迹跟踪服务_JUST技术:利用轨迹拼接分析实时可达区域

作者&#xff1a;JUST团队-李瑞远 如何快速得知从你的位置开始出发&#xff0c;在当前的交通状况下&#xff0c;5分钟之内能够抵达的空间区域范围&#xff1f;当你掏出手机打车时&#xff0c;出租车调度平台应该通知哪些范围的车主进行接单&#xff1f;本期技术前沿&#xff0c…

CCF 区块链国际会议 统计 有哪些接收区块链论文的会议 (最全)

投稿截止日期排序 区块链相关会议和论文信息&#xff1a;元宇宙最新报告 1. USENIX ATC CCF等级&#xff1a;A 最近截止日期&#xff1a;2022-01-06 会议全称&#xff1a; USENIX Annual Technical Conference 是否有区块链Topics&#xff1a;否 录用率&#xff0c;接收比…

【计算机视觉】会议投稿相关推荐

一个call for paper的站点&#xff0c;small推荐给我的&#xff1a;http://www.wikicfp.com/cfp/ 能够加入自己关注的会议&#xff0c;会生成对应的deadline列表。非常方面~ 还有一个是中科院的CCF推荐排名&#xff1a;http://www.ccf.org.cn/sites/ccf/paiming.jsp&#xff0c…

中科院计算所在可信大数据软件技术方面的研究工作【DOC+PPT下载】

http://pan.baidu.com/s/1qWOCMxm 清单&#xff1a; 中科院计算所在可信大数据软件技术方面的研究工作.doc 【本文doc文档】 中科院计算所在可信大数据软件技术方面的研究工作.ppt 【本文ppt演讲稿】 PS&#xff1a;前段时间接到任务&#xff0c;对中科院计算所在可信大数…

蚂蚁金服ATEC城市峰会上海举行,三大发布迎接金融科技2019

2019年1月4日&#xff0c;蚂蚁金服ATEC城市峰会以“数字金融新原力&#xff08;The New Force of Digital Finance&#xff09;”为主题在上海举办。稠州银行副行长程杰、蚂蚁金服副总裁刘伟光、蚂蚁金服金融科技产品技术总监杨冰、蚂蚁金服创新科技部资深总监李杰力等出席本场…

论文阅读《Multi-view Multi-behavior Contrastive Learning in Recommendation》

多行为推荐&#xff08;MBR&#xff09;旨在联合考虑多种行为以提高目标行为的推荐效果。我们认为 MBR 模型应该&#xff1a;&#xff08;1&#xff09;对用户不同行为之间的粗粒度共性进行建模&#xff0c;&#xff08;2&#xff09;在多行为建模中同时考虑局部的序列视图和全…

技术动态 | 不确定性知识图谱的表示和推理

本文转载自漆桂林知乎。 作者 | 张嘉韬、漆桂林、吴天星 文章链接 | https://zhuanlan.zhihu.com/p/369068016

【全年汇总】2023年CCF数据库/数据挖掘/内容检索会议截稿时间汇总(持续更新)

本博文是根据CCF会议推荐的数据库&#xff0f;数据挖掘&#xff0f;内容检索领域相关会议目录撰写。 一、截稿时间总览 截稿时间的总时间轴内容将会持续更新...... 往年投稿及录用情况及链接详见图片后面的内容。 二、会议详细目录 由于一些会议的投稿时间还没公开&#xff0c…

多视图多行为对比学习推荐系统

嘿&#xff0c;记得给“机器学习与推荐算法”添加星标 作者&#xff1a;吴贻清 单位&#xff1a;中科院计算所 研究方向&#xff1a;多行为推荐 多行为推荐&#xff08;MBR&#xff09;旨在联合考虑多种行为以提高目标行为的推荐效果。我们认为 MBR 模型应该&#xff1a;&…

深度 | 蚂蚁金服DASFAA论文带你深入了解GBDT模型

小蚂蚁说&#xff1a; 2018年5月21日&#xff0c;国际顶级数据库会议DASFAA 2018&#xff08;International Conference on Database Systems for Advanced Applications&#xff09;在澳大利亚黄金海岸举办。 本文是蚂蚁金服录用于DASFAA的论文Unpack Local Model Interpretat…

DASFAA 2023|创邻周研博士分享前沿图数据库观点

4月17-20日&#xff0c;2023年第28届高级应用数据库系统国际会议&#xff08;DASFAA2023&#xff09;在天津成功举行。创邻科技CTO周研博士受邀参会&#xff0c;围绕Galaxybase国产高性能图数据库进行精彩分享。 DASFAA 2023由DASFAA指导委员会&#xff08;DASFAA Steering Co…

MATLAB卸载时卡住无响应解决办法——已解决

先把安装MATLAB的文件夹内容全部删除 再winR, 输入regedit&#xff0c;CtrlF, 搜索mathworks全部删掉

window10下matlab7.0怎么卸载

解决在Windows10环境下想要卸载matlab7时&#xff0c;如果直接点击uninstall文件夹中的uninstall.exe文件&#xff0c;会弹出exception calling main问题,这时修改一下兼容性即可正常卸载&#xff0c;步骤如下&#xff1a; 一、找到matlab7安装目录下的uninstall文件夹&#x…

解决win10电脑无法卸载matlab7.1的问题

解决在Windows10环境下想要卸载matlab7.1时&#xff0c;如果直接点击安装目录下&#xff0c;例如&#xff1a;C:\Program Files (x86)\MATLAB71\uninstall文件夹中的uninstall.exe文件&#xff0c;会弹出exception calling main问题。 解决方法&#xff1a; 找到matlab7.1安装…