MUI-标题栏实现-样式复写效果

末蓝、 2023-09-29 09:48 17阅读 0赞

**界面展示：**  
![在这里插入图片描述][135d03a5a53a4d3598f186702646ff79.png]  
**代码：**  
第一步，引入相关样式：（注意：还需要引入对应的iconfont2.ttf）

第二步：body内输入图标代码

<header class="mui-bar mui-bar-nav top-bar">
    	
    	<div class="mui-input-row mui-search">
    		<input type="search" class="mui-input-speech mui-input-clear" placeholder="手机充值">
    	</div>
    	
    	<a href="#">
    		<span class="mui-icon icon iconfont icon-tianjia"></span>
    	</a>
    	
    	<a href="#">
    		<span class="mui-icon icon iconfont icon-pengyou"></span>
    	</a>
    </header>

第三步：编辑home.css样式，调整顶栏组件格式

/* 将hmoe.html在浏览器中运行,接着使用F12查看控制其样式的类,并在此进行修改 */
    /* 控制搜索框的宽度 */
    .mui-search{
        
    	width: 70%;
    	float: left;
    }
    /* 控制搜索框的上下位置 */
    .mui-bar input[type='search']{
        
    	margin:8px 0;
    }
    
    /* 控制搜索框内搜索图标的颜色和位置 */
    .mui-search .mui-placeholder .mui-icon{
        
    	color:white!important;
    	float:left;
    	margin:2px 0;
    }
    
    /* 控制搜索框内"手机充值"的样式 */
    .mui-search .mui-placeholder{
        
    	text-align:left;
    	color:white;
    	font-size:12px;
    	line-height: 44px;
    }
    
    /* 语音图标样式 */
    .mui-icon-speech{
        
    	font-size:20px!important;
    	line-height: 25px;
    	color:white!important;
    }
    
    /* 设置搜索框外的俩超链接图标样式 */
    .top-bar a{
        
    	width:35px!important;
    	height:50px!important;
    	float:right!important;
    	line-height: 50px;
    	margin-left:5px;
    }
    .top-bar a span{
        
    	display: block!important;
    	height: 50px!important;
    	color:white!important;
    	font-size:25px!important;
    }

第四步：阿里巴巴矢量图标的样式控制iconfont2.css

@font-face {
        
      font-family: "iconfont"; /* Project id  */
      src: url('../fonts/iconfont2.ttf?t=1649660095085') format('truetype');
    }
    .iconfont {
        
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* 添加 */
    .icon-tianjia:before {
        
      content: "\e622";
    }
    /* 朋友 */
    .icon-pengyou:before {
        
      content: "\e61a";
    }

**相关链接**  
1、[MUI的简介][MUI]  
2、[MUI的字体图标][MUI 1]  
3、[MUI的事件处理][MUI 2]  
4、[HbuilderX中新建MUI下的移动端App][HbuilderX_MUI_App]  
5、[H5+ Webview窗口对象][H5_ Webview]  
6、[MUI-底栏实现-页面切换][MUI-_-]  
7、[MUI-标题栏实现-样式复写效果][MUI-_- 1]  
8、[MUI-栅格系统-实现元素排版][MUI-_- 2]  
9、[MUI-列表实现][MUI-]  
10、[MUI-列表实现2][MUI-_2]  
11、[MUI-轮播插件实现-UI组件][MUI-_-UI]  
12、[MUI-弹出菜单][MUI- 1]  
13、[MUI-页面刷新][MUI- 2]  
14、[MUI-新建子页面][MUI- 3]  
15、[MUI-页面之间传值（打开新的子页面）][MUI- 4]  
16、[HTML5+规范API-拍照功能][HTML5_API-]  
17、[HTML5+规范API-系统相册获取功能][HTML5_API- 1]  
18、[HTML5+规范API-地理位置获取][HTML5_API- 2]  
19、[MUI-上拉刷新和下拉刷新][MUI- 5]  
20、[HTML5+规范API-扫码功能][HTML5_API- 3]  
21、[HTML5+规范API-系统通讯录获取功能][HTML5_API- 4]  
22、[Hbuilder无法完成应用程序云打包，一直报错需要打包校验][Hbuilder]  
23、[Hbuilder-应用程序打包][Hbuilder-]  
24、[移动APP开发的三种常见模式][APP]  
25、[IOS系统测试APP时发现input内无法选中并输入值][IOS_APP_input]  
26、[MUI-购物车][MUI- 6]

[135d03a5a53a4d3598f186702646ff79.png]: https://img-blog.csdnimg.cn/135d03a5a53a4d3598f186702646ff79.png
[MUI]: https://blog.csdn.net/blbyu/article/details/124073884
[MUI 1]: https://blog.csdn.net/blbyu/article/details/124073728
[MUI 2]: https://blog.csdn.net/blbyu/article/details/124073670
[HbuilderX_MUI_App]: https://blog.csdn.net/blbyu/article/details/124029950
[H5_ Webview]: https://blog.csdn.net/blbyu/article/details/124087264
[MUI-_-]: https://blog.csdn.net/blbyu/article/details/124089783
[MUI-_- 1]: https://blog.csdn.net/blbyu/article/details/124100509
[MUI-_- 2]: https://blog.csdn.net/blbyu/article/details/124104471
[MUI-]: https://blog.csdn.net/blbyu/article/details/124114095
[MUI-_2]: https://blog.csdn.net/blbyu/article/details/124122849
[MUI-_-UI]: https://blog.csdn.net/blbyu/article/details/124118088
[MUI- 1]: https://blog.csdn.net/blbyu/article/details/124292196
[MUI- 2]: https://blog.csdn.net/blbyu/article/details/124358512
[MUI- 3]: https://blog.csdn.net/blbyu/article/details/124358520
[MUI- 4]: https://blog.csdn.net/blbyu/article/details/124358762
[HTML5_API-]: https://blog.csdn.net/blbyu/article/details/124395810
[HTML5_API- 1]: https://blog.csdn.net/blbyu/article/details/124395849
[HTML5_API- 2]: https://blog.csdn.net/blbyu/article/details/124395903
[MUI- 5]: https://blog.csdn.net/blbyu/article/details/124395907
[HTML5_API- 3]: https://blog.csdn.net/blbyu/article/details/124395916
[HTML5_API- 4]: https://blog.csdn.net/blbyu/article/details/124398657
[Hbuilder]: https://blog.csdn.net/blbyu/article/details/124400424
[Hbuilder-]: https://blog.csdn.net/blbyu/article/details/124400990
[APP]: https://blog.csdn.net/blbyu/article/details/124074019
[IOS_APP_input]: https://blog.csdn.net/blbyu/article/details/124369536
[MUI- 6]: https://blog.csdn.net/blbyu/article/details/124417308