搜索到
2
篇与
font
的结果
-
pc端小米官网首页部分练习 目录：参考图index.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>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./fa/css/all.css"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> <!-- 设置网站的图标(在标题栏和收藏栏) -网站图片一般存储在网站的跟目录下，名字一般叫做favicon.ico --> <link rel="icon" href="./favicon.ico"> </head> <body> <!-- 外部容器，顶部导航条 --> <div class="top-bar-outer"> <!-- 内部容器 --> <div class="top-bar w clearfix"> <ul class="top-list"> <li><a href="javascript:;">小米商城</a></li> <li class="line">|</li> <li><a href="javascript:;">MIUI</a></li> <li class="line">|</li> <li><a href="javascript:;">IOT</a></li> <li class="line">|</li> <li><a href="javascript:;">云服务</a></li> <li class="line">|</li> <li><a href="javascript:;">金融</a></li> <li class="line">|</li> <li><a href="javascript:;">有品</a></li> <li class="line">|</li> <li><a href="javascript:;">小爱开发平台</a></li> <li class="line">|</li> <li><a href="javascript:;">企业团购</a></li> <li class="line">|</li> <li><a href="javascript:;">协议规则</a></li> <li class="line">|</li> <li class="app-download"> <a class="app" href="javascript:;">下载app <div class="download"> <img src="./img/mi.app.png"> <span>小米商城app</span> </div> </a> </li> <li class="line">|</li> <li><a href="javascript:;">智能生活</a></li> <li class="line">|</li> <li><a href="javascript:;"> Select Location</a></li> </ul> <ul class="shop-cart"> <li><a href="javascript:;"> <i class="fas fa-shopping-cart"></i> 购物车（0） </a></li> </ul> <ul class="user-info"> <li><a href="javascript:;">消息通知</a></li> <li class="line">|</li> <li><a href="javascript:;">注册</a></li> <li class="line">|</li> <li><a href="javascript:;">登录</a></li> </ul> </div> </div> <!-- 头部导航，外部容器--> <div class="header-list"> <div class="header w clearfix"> <h1 class="logo"> <a href="/"></a> </h1> <!-- 创建中间部分的导航条 --> <div class="nav-wrapper"> <ul class="nav"> <li class="all-wrapper"> <a class="all" href="#">全部商品分类</a> <!-- 创建左侧菜单 --> <div class="left-menu"> <nav class="menu"> <a href="javaScript:;">手机 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">电视 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">笔记本 平板 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">家电 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">出行 穿戴 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">智能 路由器 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">电源 配件 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">健康 儿童 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">耳机 音响 <i class="fas fa-angle-right"></i> </a> </nav> <nav class="menu"> <a href="javaScript:;">生活 箱包 <i class="fas fa-angle-right"></i> </a> </nav> </div> </li> <li class="goods-show"><a href="#">小米手机</a></li> <li class="goods-show"><a href="#">Redmi 红米</a></li> <li class="goods-show"><a href="#">电视</a></li> <li class="goods-show"><a href="#">笔记本</a></li> <li class="goods-show"><a href="#">家电</a></li> <li class="goods-show"><a href="#">路由器</a></li> <li class="goods-show"><a href="#">智能硬件</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> <!--创建商品隐藏层 --> <div class="goods-info"> </div> </ul> </div> <!-- 搜素框外部容器 --> <div class="search-for"> <form class="search" action="#"> <input class="search-inp" type="text"> <button class="search-btn" type="button"> <i class="fas fa-search"></i> </button> </form> </div> </div> </div> <!-- 创建banner 容器--> <div class="banner-wrapper"> <!-- 创建内容部 --> <div class="banner w"> <ul class="banner-img"> <li> <a href="javaScript:;"> <img src="./img/banner2.png" alt=""> </a> <li> <a href="javaScript:;"> <img src="./img/banner1.png" alt=""> </a> </li> <li> <a> <img src="./img/banner3.png" alt=""> </a> </li> <li> <a href="javaScript:;"> <img src="./img/banner4.png" alt=""> </a> </li> </li> </ul> <div class="drop"> <a class="active" href="javaScript:;"></a> <a href="javaScript:;"></a> <a href="javaScript:;"></a> <a href="javaScript:;"></a> </div> <div class="previous-next"> <a class="previous" href="javaScript:;"></a> <a class="next" href="javaScript:;"></a> </div> </div> </div> <!-- 创建banner下的容器 --> <div class="span1 w"> <ul class="special-list"> <li> <a href=""> <img src="./img/1.png" alt="保障服务">保障服务 </a> </li> <li> <a href=""> <img src="./img/2.png" alt="企业团购">企业团购 </a> </li> <li> <a href=""> <img src="./img/3.png" alt="F码通道">F码通道 </a> </li> <li> <a href=""> <img src="./img/4.png" alt="米粉卡">米粉卡 </a> </li> <li> <a href=""> <img src="./img/6.png" alt="依旧换新">依旧换新 </a> </li> <li> <a href=""> <img src="./img/5.png" alt="话费充值">话费充值 </a> </li> </ul> <!-- 图片 --> <ul class="span1-imgs"> <li> <a href=""> <img src="./img/7.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./img/8.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./img/9.jpg" alt=""> </a> </li> </ul> </div> </body> </html>index.css/*设置外部容器*/ .top-bar-outer{ background-color: #333; line-height: 40px; } /*设置字体*/ .top-bar a { color: #b0b0b0; font-size: 12px; display: block; } /*设置鼠标移入时候文字颜色*/ .top-bar a:hover{ color: #fff; } /*设置左侧导航*/ .top-bar .top-list li{ float: left; } /*给li设置鼠标移入*/ .app-download:hover .download, .app-download .app:hover::after { display: block; height: 148px; } /*给下载app超链接开启相对定位，这样三角会父元素进行定位*/ .app{ position: relative; } /*设置小三角样式，利用border，去除top，left+right的color为透明transparent*/ .app-download .app::after{ display: none; content: ''; border: 8px solid transparent; border-top: none; border-bottom-color: #fff; width: 0px; height: 0px; /*开启绝对定位*/ position: absolute; /*让小三角相对于父元素居中，根据绝对定位水平居中公式条件，right:0 left:0 margin:auto*/ bottom: 0px; left: 0px; right: 0px; margin: auto; } /*设置下载app下拉框*/ .app .download{ /* display: none; */ width: 124px; /* height: 148px; */ height: 0px; overflow: hidden; background-color: #fff; line-height: 1px; text-align: center; position: absolute; z-index: 999; left: -40px; box-shadow: 0px 0px 10px rgba(0, 0,0 , .3); /* transition:用于为样式设置过渡效果，样式高度必须发现变化才有效果*/ transition: height 0.5s; } /*这是二维码*/ .app .download img{ width: 90px; height: 90px; margin: 17px; } /*设置二维码下拉框*/ .app .download span{ color: #000; font-size: 14px; } /*设置右侧user*/ .top-bar .user-info li{ float: right; } /*设置右侧购物*/ .top-bar .shop-cart li{ float: right; } .shop-cart a{ width: 120px; background-color: #424242; text-align: center; margin-left: 23px; } .shop-cart:hover a{ color: #FF6B00; background-color: #fff; } /*设置分割线*/ .line{ color: #424242; font-size: 12px; margin: 0px 8px; } /* 头部布局样式*/ .header-list{ position: relative; } /* 内部容器*/ .header{ height: 100px; } .header .logo{ float: left; width: 55px; height: 55px; margin-top: 22px; /*隐藏小米官网文字*/ /* text-indent: -999px; */ } /*logo设置*/ .header .logo a{ position: absolute; width: 55px; height: 55px; background-color: #FE6700; background-image: url(../img/logo-mi2.png); background-size: contain; } /*头部中间导航条样式*/ .header .nav-wrapper{ float: left; margin-left: 7px; } /*设置导航条*/ .nav{ height: 100px; line-height: 100px; padding-left: 58px; } .header .nav-wrapper li{ float: left; } /*设置字体样式*/ .nav-wrapper li a{ font-size: 16px; margin-right: 20px; display: block; color: #333; } .nav-wrapper li a:hover{ color: #FF6700; } /*设置商品下拉框*/ .goods-info{ width: 100%; /* height: 228px; */ height: 0px; overflow: hidden; /* border-top: 1px solid rgb(224, 224, 224); box-shadow: 0px 5px 3px rgba(0, 0,0 , .2); */ background-color: #fff; position: absolute; z-index: 9999; left: 0px; top: 100px; transition: height 0.3s; } /*设置鼠标移入出来*/ .nav .goods-show:hover ~ .goods-info, .goods-info:hover{ height: 228px; border-top: 1px solid rgb(224, 224, 224); box-shadow: 0px 5px 3px rgba(0, 0,0 , .2); } /*隐藏全部商品*/ .all{ visibility: hidden; } /*设置左侧导航菜单*/ .all-wrapper{ position: relative; } .left-menu{ width: 234px; height: 420px; background-color: rgba(0, 0,0 , .6); padding: 20px 0 ; line-height: 1; position: absolute; z-index: 999; left: -120px; } .left-menu .menu a{ display: block; height: 42px; line-height: 42px; margin-right: 0px; padding: 0 30px; color: white; font-size: 14px; } .left-menu .menu i{ float: right; line-height: 42px; } .left-menu .menu a:hover{ color: white; background-color: #FE6700; } /*设置搜素框*/ .search-for{ width: 296px; height: 50px; float: right; margin-top: 25px; } .search-for .search-inp{ box-sizing: border-box; width: 244px; height: 50px; padding: 0px; float: left; border: none; padding: 0 10px; border: 1px solid rgb(224, 224, 224); outline: none; } .search-for .search-btn{ height: 50px; width: 52px; float: left; /* padding: 0px; border: none; */ background-color: #fff; color: #616161; font-size: 16px; border: 1px solid rgb(224, 224, 224); border-left: none; } /*获取焦点*/ .search-for .search-inp:focus, .search-for .search-inp:focus + button{ border-color: #FF6700; } .search-for .search-btn:hover{ background-color: #FF6700; color: white; border: 0px; } /*banner的布局*/ .banner { height: 460px; position: relative; } .banner .banner-img li { position: absolute; } .banner .banner-img img{ width: 100%; vertical-align: top; } /*设置4个导航点*/ .drop{ position: absolute; bottom: 22px; right: 35px; } .drop a{ float: left; width: 6px; height: 6px; border: 2px solid rgba(255, 255,255,.4); border-radius: 50%; background-color:rgba(0, 0,0 ,.4); margin-right: 6px; } .drop a:hover, .drop a.active{ border: 2px solid rgba(0, 0,0 ,.4); background-color: rgba(255, 255,255,.4); } /*设置图片上箭头*/ .previous-next a{ width: 41px; height: 69px; background-image: url(../img/icon-slides.png); position: absolute; top: 0px; bottom: 0px; margin: auto 0; } .previous-next .previous{ left: 234px; background-position: -86px 0; } .previous-next .next{ right: 0px; background-position: -125px 0; } .previous-next .previous:hover{ background-position: 0 0; } .previous-next .next:hover{ background-position: -42px 0; } /* 设置banner下*/ /*设置左侧快捷方式*/ .span1{ height: 170px; margin-top: 14px; } .span1 .special-list, .span1-imgs, .span1 li{ float: left; } .special-list{ width: 234px; height: 170px; background-color: #5F574E; margin-right: 14px; padding-top: 2px; } .span1 .special-list a{ display: block; width: 75px; height: 66px; text-align: center; padding-top: 18px; font-size: 12px; color: #CFCAC1; margin: 0px; } .span1 .special-list a:hover{ color: #fff; } /*快捷方式图片*/ .special-list img { display: block; width: 24px; height: 24px; margin: 0 auto 4px; border: 0px; } .span1 .special-list li{ position: relative; } /*设置上边框*/ .span1 .special-list li::before{ content: ''; width: 64px; height: 1px; background-color: #665E57; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; } /*设置左边框*/ .span1 .special-list li::after{ content: ''; position: absolute; width: 1px; height: 70px; background-color: #665E57; top: 0; bottom: 0; margin: auto 0; } /*设置右侧图片*/ .span1 .span1-imgs li{ float: left; width: 316px; margin-right: 15px; } .span1 .span1-imgs li:last-child{ margin: 0; } .span1 .span1-imgs img{ width: 100%; vertical-align: top; } base.css.clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } body{ font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; color: #333; min-width: 1226px; } a{text-decoration: none; /* color: #b0b0b0; font: 12px; */} .w{ width:1226px ; margin: 0 auto; }其他cssreset.css 这个为去除浏览器默认样式all.css 这个为图标字体图片的使用http://www.wxly.cc/usr/uploads/2021/12/2237414842.pnghttp://www.wxly.cc/usr/uploads/2021/12/2635064497.pnghttp://www.wxly.cc/usr/uploads/2021/12/1419879778.pnghttp://www.wxly.cc/usr/uploads/2021/12/1332906518.pnghttp://www.wxly.cc/usr/uploads/2021/12/1779354082.pnghttp://www.wxly.cc/usr/uploads/2021/12/1608171574.pnghttp://www.wxly.cc/usr/uploads/2021/12/647259256.pnghttp://www.wxly.cc/usr/uploads/2021/12/1500518471.pnghttp://www.wxly.cc/usr/uploads/2021/12/3454991676.pnghttp://www.wxly.cc/usr/uploads/2021/12/2893227666.jpghttp://www.wxly.cc/usr/uploads/2021/12/2873788110.jpghttp://www.wxly.cc/usr/uploads/2021/12/3121258918.jpghttp://www.wxly.cc/usr/uploads/2021/12/2875614189.pnghttp://www.wxly.cc/usr/uploads/2021/12/3159512756.pnghttp://www.wxly.cc/usr/uploads/2021/12/4168604913.pnghttp://www.wxly.cc/usr/uploads/2021/12/1225035722.pnghttp://www.wxly.cc/usr/uploads/2021/12/4267209792.pnghttp://www.wxly.cc/usr/uploads/2021/12/4267209792.png效果图 -
CSS中字体和背景(font && background) 目录：图标字体图标字体（inconfont） -在网页中经常需要使用一些图标，可以通过图片引入图标，但是图片大小本身比较大，并且非常的不灵活 -所以在使用图标时，我们还可以将图标直接设置为字体 通过font-face的形式来对字体进行引入fontawesome 使用步骤 1.官网https://fontawesome.com/ 2.解压 3.将css和webfonts引入到项目中 4.将all.css引入到网页中 5.使用图标字体-直接通过类名来使用图标字体 class="fas fa-bell" fas和fab是固定格式 class="fab ......"通过伪元素来设置图标字体 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab font-family:'Font Awsesome 5 Free'; font-weight:900;字体<!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> <style> texte-decoration 设置文本样式 可选值 none underline 下划线 line-through 删除线 overline 上划线 white-space 设置网页如何处理空白 可选值： normal 正常 nowrap 不换行 pre 保留空白 .box1{ width: 100px; white-space: nowrap; overflow: hidden; /*text-overflow:ellipsis将文字多余的显示为省略号，这几项缺一不可*/ text-overflow: ellipsis; } </style> </head> <body> <div class="box1"> ajklsdhaSDFHJddosssssspofsidfu9hjdasoifkjaioekdfjasiodgjhguspfdghjkfvmaf </div> </body> </html>行高行高（line-hight） -行高指的是文字占有的实际高度 -可以通过line-height来设置行高 行高可以指定一个大小（px em） 也可以直接为行高设置一个整数 -行高经常还用来设置文字的行间距 可以将行高设置为何高度一样的值，使单行文字在一个元素中垂直居中背景background-image设置背景图片 语法： background-image: url("图片路径");background-repeat 用来设置背景的重复方式 语法：background-repeat:no-repeat; 可选值： repeat 默认值，背景会沿着x轴和y轴重复 repeat-x 沿者x轴方向重复 repeat-y 沿者y轴方向重复 no-repeat 背景图片不重复background-position 用来设置背景图片的位置 设置方式： 通过top left right bottom center 使用方位词同时必须要指定两个值 通过偏移量来指定背景图片的位置 水平方向偏移量 垂直方向偏移量 background-position:center center; background-position:-100px 300px;设置背景的范围 background-clip 可选值： boder-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 设置背景图片的大小 第一个值表示宽度 第二个值表示高度 -如果只写一个，则第二个值默认为auto cover 图片的比例不变，将元素铺满 contain 图片比例不变，将图片在元素中完整显示 background-size:contain 了解： background-attachment -背景图片是否跟随元素移动 -可选值： scroll 默认值 背景图片会跟随元素移动 fixed 背景会固定在页面中，不会随元素移动 background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment -background背景相关的简写属性，所有的样式都可以通过改样式来设置,并且该样式没有顺序要求，也没有哪个属性是必须写的 注意： background-size必须写在background-position的后边，使用/隔开 background-position/background-size bakcgroud-origin background-clip 两个样式，orgin要在clip前面 线性渐变<!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> <style> .box1{ width: 200px; height: 200px; 渐变： 通过渐变来设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 ！！渐变是图片，需要通过background-image来设置 线性渐变，颜色沿者一条直线发生变化 linear-gradient() linear-gradient(red,yellow)从红色开头，黄色结尾，中间是过渡区域 -线性渐变的开头，可以指定一个渐变的方向 to left to right to bottom to top xxxdeg deg表示度数 turn turn表示圈 -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布， 也可以手动指定渐变的分布情况 background-image: repeating-linear-gradient() 可以平铺的线性渐变 background-image: linear-gradient( red 50px,yellow 100px); */ background-image: linear-gradient(red,yellow,#bfa); */ background-image: repeating-linear-gradient(red 50px,yellow 100px); } </style> </head> <body> <div class="box1"></div> </body> </html>
