小米官网图片下载步骤及应用较为综合选择器

杂七杂八2年前 (2023)发布 baiyan

603 0 0

小米黑色导航栏

1）准备工作

首先我们打开火狐浏览器，进入小米官方网站（网址），将网站所需的图片全部下载到本地，在网页上“右键”→“查看页面信息”→“媒体” →“全选”→“另存为”，如图6-2所示。

注意/

此过程仅火狐浏览器支持，其他浏览器没有此功能。

■图6-2 小米官网下载图片步骤

在开发工具中创建小米商城项目，将下载的图片复制到该项目中。

然后从阿里矢量图标库（参考书5.5.1节）下载网站中需要的字体图标（如放大镜、购物车、右箭头）并导入到项目中，如图6 -3。

■图6-3 字体图标下载

项目结构如图6-4所示。

■图6-4 项目结构

2）引入头文件信息

在CSS文件夹下创建reset.css（全局初始化样式）。

每个浏览器都有一些内置的或者通用的默认样式，这会带来一些布局上的麻烦。 reset.css的作用就是重置这些默认样式，使样式一致。代码如下：

//reset.css
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}

body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;
  font-family:"宋体", arial;}

li{list-style-type:none;}
a{text-decoration: none;}
img,input{border:none;vertical-align:middle;}

创建一个空的自定义样式文件 xiaomiStyle.css 并将其导入到 Html 头文件中。 xiaomi.html头文件代码如下：


<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城 - 小米MIX 3、红米Note 7、小米8、小米电视官方网站</title>

<link rel="icon" href="images/favicon.ico"/>

<link rel="stylesheet" href="css/reset.css"/>

<link rel="stylesheet" href="css/xiaomiStyle.css"/>

<link rel="stylesheet" href="css/iconfont.css"/>
</head>
<body>

</body>
</html>

3）设计黑色导航栏

黑色导航栏主要是左右导航栏内容的制作。

● HTML 代码（xiaomi.html）


<div  class="black_nav">
<div  class="wrap">
<ul  class="left_ul">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">IoT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">金融</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">小爱开放平台</a><span>|</span></li>
<li><a href="#">政企服务</a><span>|</span></li>
<li><a href="#">资质证照</a><span>|</span></li>
<li><a href="#">协议规则</a><span>|</span></li>
<li><a href="#">下载app</a><span>|</span></li>
<li><a href="#">Select Region</a><span>|</span></li>
</ul>
<ul  class="right_ul">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<li  class="cart">
<a href="#"><i class="iconfont"></i>购物车
(0)</a>
<div  class="hidden_cart">购物车中还没有商品，赶紧选购吧！
</div>
</li>
</ul>
</div>
</div>

部分CSS代码（xiaomiStyle.css）

/*黑色导航条开始*/
.black_nav{
    width: 100%;
    height: 40px;
    line-height: 40px;/*行高等于高居中效果*/
    background-color: #333;/*背景颜色*/
    color: #424242;/*span继承父类颜色*/
}
.wrap{
    width: 1226px;
    margin: 0 auto;/*居中*/
}
.left_ul,.left_ul>li,.right_ul>li{
    float: left;/*导航条内容左浮动*/
}
.left_ul a,.right_ul a{/*字体样式*/
    color: #b0b0b0;
    font-size: 12px;
    margin: 0 5px;
}
.left_ul a:hover,.right_ul a:hover{/*伪类选择器*/
    color: #fff;/*鼠标经过字体颜色变为白色*/
}
.right_ul{/*导航条右部分整体右浮动*/
    float: right;
}
.cart i{
    margin-right: 5px;/*购物车字体图标和字体之间的缝隙*/
}
.cart{/*购物车设置*/
    width: 120px;
    height: 40px;
    background-color: #424242;
    position: relative;/*父元素相对定位*/
}
.cart:hover{/*鼠标经过购物车背景变为白色*/
    background-color: #fff;
}
.cart:hover a{/*鼠标经过购物车字体变为橘黄色*/
    color:orange;
}
.hidden_cart{/*购物车隐藏提示语设置*/
    width: 320px;
    height: 0;/*行高为0 意味影藏*/
    background-color: #fff;
    position: absolute;/*相对父元素绝对定位*/
    right: 0;
    top:40px;
    overflow: hidden;/*起始隐藏这块*/
    transition: all .5s;/*过渡*/
    z-index: 88;/*层叠数字越大越在上层显示 */
    /*line-height: 100px;*/
}
.cart:hover .hidden_cart{/*鼠标经过购物车提示语 */
    height: 100px;/*设置行高意味显示*/
    line-height: 100px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);/*盒子阴影*/
}
/*黑色导航条结束*/

小米白色导航栏

白色导航栏主要包括三个部分：Logo、产品内容导航和搜索框，如图6-6所示。这部分使用了很多CSS页面美化元素，定位、浮动、框和伪类选择器。

这部分知识点的应用比较全面，可以让大家对零散的知识点在实战中的应用有一个宏观的感受。

■图6-6 白色导航栏部分

● HTML部分代码


<div  class="white_nav">
<div  class="wrap">
<img src="images/logo-footer.png" alt=""  class="logo"/>
<ul  class="mi_nav">
<li>
<a href="#">小米手机</a>
<div class="mi_nav_hidden"></div>
</li>
<li><a href="#">红米</a><div 
class="mi_nav_hidden"></div></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">新品</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<li class="search">
<input type="text"/>

<button  class="iconfont"></button>
</li>
</ul>
</div>
</div>

● CSS部分代码

/*白色导航栏开始*/
.white_nav{/*整个白色导航条设置*/
    clear: both;/*清除之前的浮动*/
    width: 100%;
    height: 100px;
    line-height: 100px;/*居中效果*/
    position:relative;
}
.logo,.mi_nav{/*logo和导航左浮动*/
    float: left;
}
.mi_nav>li{/*导航内容左浮动*/
    float: left;
}
.logo{/*logo位置设置*/
    margin-top: 21.5px;/*距离上边盒子距离*/
    margin-right: 190px;/*距离右边盒子距离*/
}
.mi_nav>li>a{/*字体设置*/
    color: #757575;
    font-size: 16px;
    margin-right: 20px;
}
.mi_nav>li>a:hover{/*鼠标经过字体颜色变化*/
    color: #ff6700;
}
.mi_nav{/*内容导航条宽度*/
    width: 980px;
}
.mi_nav>.search{/*搜索框居右*/
    float: right;
}
.search>input{/*文本框设置*/
    width: 243px;
    height: 48px;
    border: 1px solid #e0e0e0;
    float: left;
    border-right: none;/*右边框去掉*/
    outline: none;
    transition: all .3s;
}
.search{
    margin-top: 25px;
}
.search>button{
    width: 50px;
    height: 50px;
    border: 1px solid #e0e0e0;
    float: left;
    background-color: #fff;
    font-weight: bold;
    outline: none;/*去掉线条*/
    font-size: 20px;
    transition: all .3s;/*过渡*/
}
.search>button:hover{/*鼠标经过字体图标变化效果*/
    background-color: #ff6700;
    color: #fff;
    border-color: #ff6700;
}
.search>input:focus,.search>input:focus+button{/*搜索框聚焦事件*/
    border-color: #ff6700;
}
.mi_nav_hidden{
    width: 100%;
    height: 230px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 100px;
    display: none;/*隐藏*/
}
.mi_nav>li:hover>.mi_nav_hidden{
    display: block;/*鼠标经过显示*/
}
/*白色导航栏结束*/

精彩的评论

山

小米官网图片下载步骤及应用较为综合选择器

影响室内定位导航的三个最关键因素，你知道吗？

序言链接：零基础少儿编程入门教程链接

相关文章

相关文章