网页开发项目首页_1

本文章是记录官网的开发过程

网页开发页面为：

首页：显示公司产品介绍信息
产品中心：显示产品的具体信息
关于我们：显示公司的发展历程，资质荣誉，公司简介，团建等。
联系我们：地理位置、联系信息、地图等。
招纳贤士（待定）：展示招聘信息
行业资讯（待定）：关于本行业的资讯新闻

这个是首页的框架

菜单导航栏
产品信息x5
声明版权

首先先把菜单栏写出来。

菜单栏中的内容为：首页、产品中心、关于我们、联系我们

我需要弄一个横向的标题栏，点击时链接到别的页面。

菜单导航nav

<body>
	<div class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">产品中心</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</div>
</body>

效果：

网页开发项目首页_1

接下来要让它前面的点去到，我们需要用到 list-style:none;

css代码：

.nav{
	    width: 100%;
		background-color: aquamarine;
		height: 100px;
	}
 li{
		list-style: none;/*将默认的列表符号去掉*/
	}

效果：

这里我给了div一个背景颜色

可以看到前面的点没有了，但是左边和上面有间隙，我们按F12查看。

可以见到右边橙色的狂，显示user agent stylesheet，这是浏览器默认给我们加上去的。

网页开发项目首页_1

于是我们需要把他们归为0

*{
   margin: 0;
}

效果：

网页开发项目首页_1 左边还有段空白，我们在样式上加上padding:0就好了

然后继续我们的横向排列，我们将它设置为左浮动：float:left

然后我们可以看到，字都连在一起了

网页开发项目首页_1

然后要介绍一个神奇的元素！！

display:flex
justify-content:space-between

这两个搭配使用，可以让子元素与子元素间的间距相同。效果可以理解为：一个最左，一个最右，剩下的居中显示，如图！

网页开发项目首页_1

网页开发项目首页_1 无论怎么拉伸，都是最左最右居中显示！！！

但是这样有点别扭，这是用了一个大的div包裹小菜单div

代码：

<div class="header">
		<div class="nav">
			<ul class="nav-ul">
				<li><a href="#">首页</a></li>
				<li><a href="#">产品中心</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>
		</div>

*{
	margin: 0;
	padding: 0;
}
.header{
	width: 100%;
	height: 50px;
	position: fixed;/*标题栏固定在顶部*/
}
.nav{
	width: 80%;
	background-color: aquamarine;
	height: 30px;
	margin: 0 auto;/*div居中显示*/
}
.nav-ul{
	display: flex;
	justify-content: space-between;
}
li{
	list-style: none;/*将默认的列表符号去掉*/
	float: left;/*给列表添加一个左浮动，使菜单横向排列*/
}

网页开发项目首页_1

这样就比较像我们的菜单导航了

然后看看有什么不好看的地方

1.文字没有上下居中

2.文字颜色不美观

3.文字的下划线

1.文字的居中显示我们可以用：

水平居中：text-align:center

垂直居中：line-height:**px; 这里为li的高度

在这里我的nav高度是30，所以我设置为30px就行了。如图

网页开发项目首页_1 这个背景颜色就不要了。。。

2.超链接的颜色和下划线

a{
	text-decoration: none;/*去掉下划线*/
	color: brown;
}

网页开发项目首页_1

其实这样就已经实现菜单功能了。然后我们再加一些效果好了

当鼠标移上去后的效果

网页开发项目首页_1

其实就是在元素后面加个伪元素:hover

a:hover{
	background-color: darkgray;
}

接下来就是本官网要搞的东西了emmmmm。

效果如下

网页开发项目首页_1

html：

		<div class="header">
			<div class="nav">				
				<ul class="nav-ul">
					<li><img src="img/logo.png"></li>
					<li><a href="#"  class="active">首页</a></li>
					<li><a href="#">产品中心</a></li>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
		</div>

css：

*{
	margin: 0;
	padding: 0;
}
body{
	background: url(../img/bgimg.jpg) no-repeat;
	background-size: 100%;
}
.header{
	width: 100%;
	height: 120px;
	position: fixed;/*标题栏固定在顶部*/
	display: flex;/*弹性盒模型,让子元素div横向排列*/
}
.nav{
	width: 50%;
	margin: 0 auto;/*div居中显示*/
}
.nav-ul{
	display: flex;
	justify-content: space-between;
}
.nav-ul li{
	list-style: none;/*将默认的列表符号去掉*/
	float: left;/*给列表添加一个左浮动，使菜单横向排列*/
	line-height:120px;
	font-size: 18px;
}
.nav-ul li img{
	position: absolute;
	top: 22%;
	left: 15%;
}
.nav-ul li a{
	text-decoration: none;/*去掉下划线*/
	color: #FFF;
}
.nav-ul li a:hover{
	color: #FF7F00;
	transition: 0.2s;
}
.nav-ul .active{
	color: #FF7F00;
}

网页开发项目首页_1

相关推荐