426day(cutterman切图插件，学堂在线header部分)

最新推荐文章于 2024-07-27 09:25:37 发布

原创最新推荐文章于 2024-07-27 09:25:37 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍CutterMan切图插件的使用方法，以及学堂在线网站header部分的设计与实现，包括logo、导航菜单、搜索框和个人中心等元素的布局与样式。

《2018年12月4日》【连续426天】

标题：cutterman切图插件，学堂在线header部分；

内容：

cutterman:
http://www.cutterman.cn/zh

下载安装：

选择图层导出即可：

；

<header>
		<!-- logo -->
		<div class="logo">
			<h1>
				<a href="#" title="学成在线教育平台">学成在线</a>
			</h1>
		</div>
		<!-- nav部分 -->
		<nav>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</nav>

		<!-- search -->
		<div class="search">
			<input type="search" name="" id="" placeholder="请输入关键字"> <button></button>
		</div>
		<!-- 个人中心 -->
		<div class="personal">
			<dl>
				<dt>个人中心</dt>
				<dd>
					<s>
						<img src="images/ld.png" height="16" width="14" alt="">
					</s>
					<span>
						<img src="images/pic.png" height="33" width="33" alt="">
						刘德华 andy
					</span>
				</dd>
			</dl>
		</div>
	</header>

header {
	width: 1300px;
	height: 100px;
	/* background-color: pink; */
	margin: 0 auto;
	padding-top: 30px;
}
.logo {
	width: 195px;
	height: 42px;
	/* background-color: purple; */
	float: left;
}
.logo a {
  display: block;
  width: 195px;
  height: 42px;
  background: url(../images/logo.png) no-repeat;
  text-indent: -990px;/*   隐藏链接里面的文字 */
  overflow: hidden;  /* 这句话加上想必也是极好的 */
}
nav {
	float: left;
	margin-left: 20px;
}
nav li {
	float: left;
	height: 40px;
	line-height: 40px;
	margin-left: 25px;
}
nav li a {
	display: block;
	height: 40px;
	font-size: 18px;
	padding: 0 10px;
}
nav li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	width: 410px;
	height: 40px;
	background-color: purple;
	float: left;
	margin-left: 160px;
}
.search input {
	width: 361px;
	height: 40px;
	border: 1px solid #00a4ff;
	outline: none;  /* 轮廓线 */
	padding-left: 10px;
	float: left;
}
.search button {
	width: 49px;
	height: 40px;
	border: 0;
	outline: none;
	float: left;
	background: url(../images/fa-search.png) no-repeat;
}
.personal {
	float: right;
	height: 40px;
	line-height: 40px;
}
.personal dt, .personal dd {
	float: left;
}
.personal s {
	position: relative;
	/* padding: 20px; */
	padding: 0 20px;
	text-decoration: none;
}
.personal s::before {
	content: "";
	display: block;  /* 因为伪元素默认的是行内元素 */
	width: 6px;
	height: 6px;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	right: 15px;
	top: 0;
}
.personal span img {
	border-radius: 50%;
	margin-right: 10px;
	transition: all 0.6s;
}
.personal span img:hover {
	transform: rotate(-360deg);
}