1、2（HTML与CSS）.2.2 通用的导航栏实现

仿写了一个网页，效果如图：

原网站网址：https://www.quotery.com/

这里说一下导航栏，导航栏的特点有：

1. 导航栏带一个底边。整个导航栏占页面会变，当窗口被缩小时，纵向长会减小，但会有一个最小值（这个也没实现）。

2. 五个链接加左边一个图片链接均匀分布，当窗口被缩小时，它们也是均匀的。缩小到一定程度时，导航栏的样式会变（这个还没实现）。

3. 五个文字链接（其实是四个，最右边的那个是菜单），当鼠标移动到文字所在的隐形框中的时候，文字会变成橙色。

4. 当鼠标移入或移出第一个图片链接时，该图片会有旋转动画。

下面依次说一下实现的要点：

1. 设置一下导航栏的样式（.head）的背景为透明，高度我是设成固定值100，宽度占100%，在这之前要讲html的宽度设成100%，而且Body的margin为0px,否则两边会有空隙。然后设置下边缘线的宽（可以是thin/middle等也可以是1px等）、颜色、样式等。在这里，导航栏中没有设置任何与其中子物体布局相关的东西。

2. 然后在.head下设置链接（a）的样式，重设链接文字的样式。

将float设置成left（据说最好少用float，不然不安全，界面可能会乱，但是如果不这么设的话，文字就会挤在一起），设置宽度为窗口的16.6%。

css中有直接让文字水平居中的，但是没有直接设置垂直居中的，为了让文字在导航栏中居中，所以将高度与行高设置成与导航栏一样高（只有当文字只有一行时，这样设置有效）。

新建一个.imgbox，设置图片外框，float、宽高图片居中（虽然设置对象是图片，但却是用text-align）。

在.imgbox下设置图片的缩放，以及为了让图片垂直居中，设置距离上方的padding，因为图片不能像文字那样设置行高。

（在写这个图片布局时，尝试了很多方法，最直接的想法是在.head下写.imgbox，但是这样不知道为什么imgbox就会占一整行，还有一个直接的想法是不写imgbox，而是直接设置img的样式，令其居中显示，但是图片的大小却一直是拉伸填充，不能同时设置所占位置大小与图片大小，这不是我想要的效果）

3. 这个比较容易实现，在a:hover中可以直接重写你想要的鼠标覆盖时的效果。

4. 这个和上面的很想，但是要在:hover中写动画。css已经能够支持一些简单的旋转动画了：transform: rotatey(360deg);在hover中设置了动画，还要在对象中设置所用时间，这里的对象其实是图片所在的框：transition: all 0.5s;

总的导航栏代码为：

CSS部分：

/*导航栏*/
.head {
	background-color: rgba(255,255,255,0);
	border-bottom-width:thin;
	border-bottom-color: rgba(255,255,255,0.2);
	border-style:solid;
	height: 100px;
	width: 100%;
}
.imgbox {
	float: left;
	width: 16.6%;
	height: 100px;
	text-align: center;
	transition: all 0.5s;
}
.imgbox img {
	transform:scale(0.65,0.65);
	padding-top: 30px;
}
.imgbox:hover {
	transform: rotatey(360deg);
}

.head a {
	font-size: 17px;
	letter-spacing:1.5px;
	color: rgba(255,255,255,1);
	text-decoration: none;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	width: 16.6%;
	margin-top: 0px;
	line-height: 100px;
	height: 100px;
	text-align: center;
}
.head a:hover {
	color:rgba(252,129,75,1);
}

HTML部分：

<div class="head">
  <div class="imgbox"> 
    <img src="icons8_Q_52px_1.png"></img>
  </div>
  <a href="#">Authors</a> 
  <a href="#">Collections</a> 
  <a href="#">Quotes</a> 
  <a href="#">Topics</a> 
  <a href="#">...</a> 
</div>

完整的项目已上传：https://download.****.net/download/michaelia_hu/11107451

1、2（HTML与CSS）.2.2 通用的导航栏实现

相关推荐