练习京东顶部导航条、背景、渐变、按钮练习（雪碧图）、渐变
2024-06-04 04:24:04
练习
<!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>
练习京东顶部导航条、背景、渐变、按钮练习（雪碧图）、渐变相关推荐
- HTML+CSS 背景之雪碧图+渐变
一:雪碧图 雪碧图是什么? 一个页面可能会用到多个图片或者图标,如果每个图片都是一个单独的文件,则需要浏览器进行多次加载,浪费性能和带宽. 而且在某也情况下图片会延迟加载,导致用户体验不好. 将多个图 ...
- 背景的样式（雪碧图）
目录 一.背景的基础设置 1.background-color : 设置背景颜色 2.background-image:来设置背景图片 3:background-repeat:用于设置背景图片的重复方 ...
- iOS UIImagePickerController 自定义导航条背景、标题和按钮的颜色
UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init];// 左右按钮颜色[[U ...
- HTML+CSS简单实现京东顶部导航栏
效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 京东左侧导航条练习笔记
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 如何构建顶部导航条_如何构建导航栏
如何构建顶部导航条 导航栏 (Navigation Bars) Navigation bars are a very important element to any website. They pr ...
- jquery根据滚动像素显示隐藏顶部导航条
本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scroll ...
- 小程序的横向二级顶部导航条，可以切换、拖动、二级定位在一级的下面，高度怎么办
项目场景: **做一个小程序的横向二级顶部导航条,可以切换.拖动.二级定位在一级的下面** 问题描述: 我只能设置scroll-view的高度,不然不显示二级菜单 这是html代码 <view ...
- 【荐】DIV+CSS仿360buy京东商城导航条
代码简介: [荐]DIV+CSS仿360buy京东商城导航条 ,很棒的,赶快来试试. 代码内容: <html xmlns="http://www.w3.org/1999/xhtml&q ...
- JS控制网页滑动顶部导航条变色
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
最新文章
- Docker构建Nginx+Tomcat动静分离架构
- python3字典详解_python3中字典详解
- ipa 上传卡在鉴权_解决App Store上传ipa卡在Authenticating with App Store的问题
- 关于渲染流水线的几何变化
- Vue学习笔记一 创建vue项目
- Python扩展库numpy中where()函数的三种用法
- php结束外部程序,PHP执行外部程序的方法
- 信息系统项目管理04——项目整体管理
- 对于模拟交易所引发的思考
- virtual box和vmware有什么区别吗_真发假发套与普通假发有什么区别吗？
- xcode checkout验证错误解决方法
- UITableViewCell高度自适应变化
- itextpdf 更换字体
- Jupyter Notebook 更改默认浏览器
- Android 4高级编程(第3版)
- 情感分析（判断文章正负向）
- 基于51单片机+ULN2003控制步进电机S曲线加减速
- Java 压缩PDF文档
- html切换导航不同页面,HTML按钮：导航到其他页面 - 不同的方法
- pythoncookie自动登录_Python爬虫连载6-cookie深入使用实例化实现自动登录
热门文章
- 最全的Excel-sumif函数多条件求和案例汇总
- 计算机本地连接无internet访问权限,ipv4连接无internet访问权限怎么解决
- 联通混改旗开得胜，这也太容易了！
- 动态相关系数dcc_常相关系数(CCC)和动态条件相关系数(DCC)
- c++ de-mangle 反编译器命名工具：c++filt
- 新机Switch OLED真机实测分享
- unity 阳光插件_PR插件LUT Mixer2.1.1安装教程
- 51定时器PWM调节
- 中柏平板u盘启动_中柏A13笔记本如何进bios设置u盘启动
- CCS编译 报警#190-D enumerated type mixed with another type