小白十分钟-推荐导航栏

Dear 丶 2021-09-15 13:18 239阅读 0赞

![70][]

大腿绕道，给小白学习用，上代码

<div class="list">
    		<div class="infor">
    			<ul class="left">
    				<li><a href="">限时特价</a></li>
    				<li><a href="">热门推荐</a></li>
    			</ul>
    			<ul class="right">
    				<li><a href="" class="selected">推荐</a></li>
    				<li><a href="">折扣</a></li>
    				<li><a href="">价格</a></li>
    			</ul>
    		</div>
    	</div>

css样式

* {
    		padding: 0;
    		margin: 0;
    	}
    	a {
    		text-decoration: none;
    	}
    	.list {
    		width: 910px;
    		float: left;
    		margin-left: 10px;
    		margin-top: 10px;
    	}
    	.infor {
    		height: 45px;
    		line-height: 45px;
    		background-color: #eee;
    	}
    	.left {
    		display: inline-block;
    		float: left;
    	}
    	.left li {
    		display: inline-block;
    		width: 150px;
    		height: 43px;
    		line-height: 43px;
    		text-align: center;
    	}
    	.left li:first-child,.left li:hover {
    		background-color: #fff;
    		border-top: 2px solid #458b00;
    		position: relative;
    		left: 1px;
    	}
    	.left a {
    		color: #666;
    	}
    	.right {
    		display: inline-block;
    		padding: 0 20px 0 0;
    		float: right;
    	}
    	.right li {
    		display: inline-block;
    		width: 60px;
    		height: 45px;
    		line-height: 45px;
    		text-align: center;
    	}
    	.right li a {
    		padding: 3px 8px;
    		color: #666;
    	}
    	.right li a.selected,.right li a:hover {
    		background-color: #458b00;
    		color: #fff;
    	}

妥了，十分钟搞定，下班咯

[70]: /images/20210813/4b61f246cf094ec4a32617ea85e3ca8e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序底部导航栏

*“花树得晴红欲染，远山过雨青如滴”** 序最近自己在研究微信小程序，几乎每个程序都会有导航栏，或在顶部，或在底部。于是我简单做了一个导航栏在底部的程序。 ...

秒速五厘米/ 2024年04月17日 05:31/ 0 赞/ 108 阅读

相关 css导航栏_使用CSS的导航栏

css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing

系统管理员/ 2023年03月05日 10:59/ 0 赞/ 32 阅读

相关微信小程序导航栏操作

navigationBarBackgroundColor 导航栏背景颜色，如”\000000” navigationBarTextStyle 导航栏标题颜色，仅支持 blac

淡淡的烟草味﹌/ 2023年01月10日 05:29/ 0 赞/ 238 阅读

相关十四、自定义联系人导航（上）---字母导航栏

联系人的界面需求是这样的：所有的联系人以首字母分组，右边是字母导航栏，滑动或者单击相应的字母，跳转到对应的分组。首先实现这个自定义字母导航栏。 public cl

超、凢脫俗/ 2022年09月25日 06:28/ 0 赞/ 164 阅读

相关导航栏

想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）： 1 下拉菜单栏： <!DOCTYPE html>

深藏阁楼爱情的钟/ 2022年05月25日 10:58/ 0 赞/ 405 阅读

相关小程序导航栏简单动画

<view class="navbar"> <view wx:for="{ {navbar}}" data-idx="{ {in

忘是亡心i/ 2022年05月08日 01:08/ 0 赞/ 265 阅读

相关小程序自定义底部导航栏

需要稳步到：[https://www.cnblogs.com/ljybill/p/9804147.html][https_www.cnblogs.com_ljybill_

╰半夏微凉°/ 2021年12月20日 19:51/ 0 赞/ 416 阅读

相关导航栏

今天做一个百度首页的导航栏 ![在这里插入图片描述][20190716200535505.png] <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2021年12月07日 11:55/ 0 赞/ 522 阅读

相关小程序自定义导航栏

![20190430101936723.png][] <view class='dia-non' style="{ {tabid=='0'?'displ

Myth丶恋晨/ 2021年09月19日 04:20/ 0 赞/ 549 阅读

相关小白十分钟-推荐导航栏

![70][] 大腿绕道，给小白学习用，上代码 <div class="list"> <div class="infor"> <ul cl

Dear 丶/ 2021年09月15日 13:18/ 0 赞/ 240 阅读