本文章是记录官网的开发过程
网页开发页面为:
- 首页:显示公司产品介绍信息
- 产品中心:显示产品的具体信息
- 关于我们:显示公司的发展历程,资质荣誉,公司简介,团建等。
- 联系我们:地理位置、联系信息、地图等。
- 招纳贤士(待定):展示招聘信息
- 行业资讯(待定):关于本行业的资讯新闻
这个是首页的框架
- 菜单导航栏
- 产品信息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>
效果:
接下来要让它前面的点去到,我们需要用到 list-style:none;
css代码:
.nav{
width: 100%;
background-color: aquamarine;
height: 100px;
}
li{
list-style: none;/*将默认的列表符号去掉*/
}
效果:
这里我给了div一个背景颜色
可以看到前面的点没有了,但是左边和上面有间隙,我们按F12查看。
可以见到右边橙色的狂,显示user agent stylesheet,这是浏览器默认给我们加上去的。
于是我们需要把他们归为0
*{
margin: 0;
}
效果:
左边还有段空白,我们在样式上加上padding:0就好了
然后继续我们的横向排列,我们将它设置为左浮动:float:left
然后我们可以看到,字都连在一起了
然后要介绍一个神奇的元素!!
- display:flex
- justify-content:space-between
这两个搭配使用,可以让子元素与子元素间的间距相同。效果可以理解为:一个最左,一个最右,剩下的居中显示,如图!
无论怎么拉伸,都是最左最右居中显示!!!
但是这样有点别扭,这是用了一个大的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.文字没有上下居中
2.文字颜色不美观
3.文字的下划线
1.文字的居中显示我们可以用:
水平居中:text-align:center
垂直居中:line-height:**px; 这里为li的高度
在这里我的nav高度是30,所以我设置为30px就行了。如图
这个背景颜色就不要了。。。
2.超链接的颜色和下划线
a{
text-decoration: none;/*去掉下划线*/
color: brown;
}
其实这样就已经实现菜单功能了。然后我们再加一些效果好了
当鼠标移上去后的效果
其实就是在元素后面加个伪元素:hover
a:hover{
background-color: darkgray;
}
接下来就是本官网要搞的东西了emmmmm。
效果如下
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;
}