标签 css 下的文章 - 小熊猫学习记录

登录

标签搜索

小熊猫

累计撰写 52 篇文章
累计收到 0 条评论
今日撰写 0 篇文章

搜索到 2 篇与的结果

2021-12-19
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">  <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>  <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>  <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效果图
- 2021年12月19日
- 586 阅读
- 0 评论
- 1 点赞
2021-12-05
CSS中的选择器目录：常用选择器1.元素选择器：　作用：根据标签名来选中指定的元素　语法: 标签名{}　例子：p{} h1{} div{}2.id选择器：　作用：根据元素的id属性选中一个元素　语法: #id属性值{}　例子：#box{}3.类选择：　作用：根据元素的class属性值选中一组元素　语法: .class属性值{} 　例子：.box{}4.通配选择器　作用：选中页面中的所有元素　语法: *{}关系选择器1.子元素选择器　作用：选中指定父元素的指定子元素　语法：父元素 > 子元素<div><p></p></div> div > p{ }2.后代选择器　作用：选中指定元素内指定的后代元素　语法：祖先后代 html： <p> <span>我是p元素中的span元素</span><br> <em>我是p元素的第一个em</em><br> <em>我是p元素的第二个em</em><br> <em>我是p元素的第三个em</em><br> <em>我是p元素的第四个em</em><br> </p>css： div span{ color: blue; }3.选择下一个兄弟选择器　语法：前一个 + 下一个 span + em { color: orangered; }4.选择下边所有兄弟语法：前一个 ~ 所有span ~ em{ color:pink }属性选择器[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值得元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名^=属性值] 选择属性值含有谋值的元素伪类选择器伪类：不存在的类，特殊的类　　-伪类用来描述一个元素的特殊状态　　　　比如：第一个元素，最后一个元素，鼠标移入的元素...　　-伪类一盘情况下都是使用：开头的　　:first-child 第一个元素　　:last-child 最后一个元素　　:nth-child() 选中第n个元素　　　　特殊值：　　　　　n 第n个 n的范围0到正无穷　　　　　2n 表示选中偶数位的元素　　　　　2n+1 表示选中奇数位的元素　　　　-以上这些伪类都是根据所有的子元素进行排列　　first-of-type 　　last-of-type 　　nth-of-type 　　　　-这几个伪类的功能和上述类似，不同的是他们是在同类元素中进行排列　　 :not() 否定伪类　　　　-将符合条件的元素从元素器中去除代码演示： <ul> <span>我是span元素</span> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul>css代码 /*ul > li:first-child{ color: blue; } ul > li:last-child{ color: red; } ul > li:nth-child(2){ color: seagreen; }*/ /*ul > li:first-of-type{ color: teal; }*/ ul > li:not(:nth-of-type(3)){ color: tomato; }选择器的权重选择器的权重内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式没有优先级比较优先级时，需要将所有的选择器得优先级相加计算，最后优先级越高，则越优先显示（分组选择器单独计算）选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器（同类型不会无限叠加）可以在某一个样式的1后边添加 !important ,则此时该样式会获取到最高的优先级，甚至超过内联样式注意：一般在开发的时候不会使用样式的继承样式继承，我们为一个元素设置的样式同时也会应用到他的后代　　-继承是发生在祖先后后代之间的继承的设计是为了我们开发　　-利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，　　-这样只需设置一次即可让所有的元素都具有该样式　　-注意：并不是所有的样式都会被继承　　-比如说:背景相关的，布局相关的这些样式都不会被继承a元素的伪类css <style> a{ text-decoration: none; } /* :link 用来表示没访问过的链接（正常的链接） */ a:link{ color: red; } /* :visited 用来表示访问过的链接由于隐私，所以viosited这个伪类只能修改链接的颜色 */ a:visited{ color: orange; } /*其他的（不限制于a元素） :hover 用来表示鼠标移入的状态 */ a:hover{ color: blue; } /* :active 用来表示鼠标点击 */ a:active{ color: chartreuse; } </style>html <a href="http://baidu.com/">访问的链接</a> <br><br> <a href="https://blog.32yunbk.cn/">没有访问过的链接</a>
- 2021年12月05日
- 503 阅读
- 0 评论
- 1 点赞