学习笔记 css垂直导航

忘是亡心i 2023-02-14 13:16 144阅读 0赞

[学习笔记 css垂直导航][css]

![20200603081704532.png][]

<!DOCTYPE html>
    <html>
    	<head>
    	  <style> 
    		ul {
    			margin: 0px;
    			padding: 0px;
    			list-style: none;
    			
    		}
    		li a{
    			display: block;
    			width: 200px;
    			height: 39px;
    			line-height: 39px;
    			text-decoration: none;
    			color: #000;
    			background: url(pixy-rollover.gif) no-repeat left bottom;
    			text-indent: 50px;
    		}
    		.first a {
    			height: 40px;
    			line-height: 40px;
    		}
    		a:hover {
    			color: #fff;
    			background-position: right bottom;
    		}
    
    	  </style>
    	</head>
    	<body>
    		<ul>
    			<li class="first"><a href="">111111111111</a></li>
    			<li><a href="">222222222222</a></li>
    			<li><a href="">333333333333</a></li>
    			<li><a href="">444444444444</a></li>
    			<li><a href="">555555555555</a></li>
    		</ul>
    	</body>
    </html>

[css]: https://blog.csdn.net/InJavaWeTrust/article/details/106516285
[20200603081704532.png]: https://img-blog.csdnimg.cn/20200603081704532.png

发表评论取消回复

表情：

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

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

相关阅读

相关学习笔记 css垂直导航

[学习笔记 css垂直导航][css] ![2020

忘是亡心i/ 2023年02月14日 13:16/ 0 赞/ 145 阅读

相关 CSS 学习笔记 - 水平垂直居中

<article> <section id="p1"> <div id="c1">c1</div> </section> <section id

旧城等待，/ 2022年12月10日 14:39/ 0 赞/ 86 阅读

相关 css 垂直居中

垂直居中 1. 行内元素，可以设置line-height 与父级 height 相等 2. 设置 margin/padding 居中 3. flex 居中设置 a

╰半橙微兮°/ 2022年11月27日 10:13/ 0 赞/ 206 阅读

相关【前端学习】CSS——div垂直水平居中

> Author：Vivi > Time：2021-06-04 采用四种方式实习div块级元素垂直水平居中： ①position定位（子绝父相） ②positio

r囧r小猫/ 2022年10月18日 00:58/ 0 赞/ 222 阅读

相关 h5+css 垂直导航菜单

垂直导航菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

矫情吗；*/ 2022年09月23日 03:39/ 0 赞/ 217 阅读

相关 CSS简约垂直导航工具条

[下载地址][Link 1]简约的垂直样式导航工具条样式，hover悬停黑色竖直的图标导航工具栏，悬停冒泡文字提示效果。可用于功能性网页工具栏ui布局特效。 ![163156

水深无声/ 2022年09月12日 04:41/ 0 赞/ 203 阅读

相关 css 垂直居中

1、利用display：table和display：table-cell；vertical-align: middle; <div style="width: 36p

素颜马尾好姑娘i/ 2022年03月16日 09:05/ 0 赞/ 345 阅读

相关 css 垂直居中

css 垂直居中只需要一行代码。 line-height: 50px; 其中的50根据父div的height 决定，例如父div高度为50px；则line-he

浅浅的花香味﹌/ 2021年09月27日 09:40/ 0 赞/ 426 阅读

相关 css导航栏垂直display：block 水平 display:inline

导航栏=链接列表作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使

亦凉/ 2021年09月15日 06:24/ 0 赞/ 356 阅读

相关 CSS垂直居中

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加

心已赠人/ 2021年09月10日 16:26/ 0 赞/ 475 阅读