HTML练习p193

超越～and me

已于 2024-06-20 19:01:24 修改

阅读量185

点赞数 3

分类专栏： html基础文章标签： html 前端

于 2024-06-20 19:00:55 首次发布

本文链接：https://blog.csdn.net/2301_78986604/article/details/139838350

版权

html基础专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mega lycoris</title>
	<link rel="stylesheet" href="iconfont/iconfont.css">  <!-- link在head中 -->
	<style>
	*{margin: 0;padding: 0;}
     header
     {
     	height: 40px;
     	background-color: #eee;
     }
     nav
     {
     	width:1500px;margin:0 auto;
     }
     .lf{
     	float:left;
     /*	width:260px;*/
     }
     .rt{
     	float:right;
     	/*width: 1100px;*/
     }
     .rt li{
     	display:inline-block;
     }
     ul{
     	list-style:none;
     }
     a{
     	text-decoration: none;
     	line-height: 40px;
     }
     .common{
     	margin-right: 20px;
     }
     .common1{
     	margin-right: 0px;
     }
     /*div{
     	border:1px solid blue;
     }*/
     .more::after{
     	content:"";
     	display:block;
     	height:0px;width: 0;
     	border:5px solid transparent;
     	border-top-color:violet;
     	vertical-align:middle;
     	position:absolute;
     	top:18px;
     	right:2px;
     }
     .more{
     	padding-right:16px;
     	display:inline-block;
     	border:1px solid aqua;
     	position:relative;
     }
     .icon{
     	color:green;
     }
     .more:hover:after{
     	transform:rotate(180deg);
     	transform-origin:50% 25%;
     }
	</style>
</head>
<body>
	<header>
		<nav>
			<div class="lf"></div>
			<a href="#" class="common">welcome to tianmao</a>
			<a href="#" class="common">please register</a>
			<a href="#" class="common1">contact us</a>
			<div class="rt">
				<ul>
					<li><a href="#" class="more">my taobao</a></li>
					<li>
						<i class="iconfont icon-gouwuche"></i>
						<a href="#" class="common">the brand of my attention</a>
					</li>
					<li>
						<i class="iconfont icon-tejia"></i>
						<a href="#" class="common">your interest</a>
					</li>
					<li>
						<i class="iconfont icon-shouji"></i>
						<a href="#" class="more">favorite</a>
					</li>
					<li>
						<i class="icon iconfont icon-liebiao"></i>
						<a href="#" class="common">website</a>
					</li>
					<li>
						<i class="iconfont icon-xie"></i>
						<a href="#" class="common">enterprise</a>
					</li>
					<li>
						<i class="iconfont icon-woguanzhudepinpai1"></i>
						<a href="#" class="more">merchant support</a>
					</li>
				</ul>
			</div>
		</nav>
	</header>
</body>
</html>