标题+分割线设置 css+html


<html>
<head>
<meta charset="UTF-8">
<title >Css学习</title>
<!-- 此处的style.css已无作用-->
<link rel="stylesheet" href="style.css" />
<style>
*{
margin: 0;
padding: 0;
}
#menu{
min-width: 400px;
height:2rem;
background: yellow;
text-align: center;
line-height: 2rem;
font-size: 1rem;
}
#menu a{
padding: 1rem;
color: chartreuse;
text-decoration: none;
font-weight: bold;
/*以下为标签线属性设置*/
padding-right:5px;
padding-left:5px;
border-right:5px solid gray;
}
#menu a:hover{color: blue}
</style>
</head>
<body >
<div id="menu">
<a href="#">链接A</a>|<!--这根线注意!!,用标签处理器处理过-->
<a href="#">链接A</a>|
<a href="#">链接A</a>|
<a href="#">链接A</a>|
<a href="#">链接A</a>|

</div>

</body>
</html>



 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM