当前位置: 首页 > >

写页面几个常见版心构思

发布时间:

导航栏版块

企业站导航栏样式:
上网看到的第二排的导航栏就是
发现大部分导航栏无外乎包括有logo、介绍栏、搜索框、登录信息等等
下面我就写一款简单,先了解下这部分在页面中如何书写代码 (注意仅是简单展示方法,暂时不作其他交互效果,以便初学者参考,大佬可忽略。。。)


简单实现原理:这里我用的是 ul>li>a 的方式(有更好的话可以交流,也更方便学*)


    用无序列表ul写外围结构给ul嵌套li和a样式给li添加浮动给li添加大小调整文本大小

html结构





css样式


/* nav */
#nav{
height:58px;
background:#303030;
}
.nav-con{
height:58px;
/*
给ul添加padding-left 把li往右挤27px
padding-left:27px;
width:975px;
*/
}
.nav-con li{
/* 1:让所有的导航项横向排列 */
float:left;
/* 2: 给导航项目添加宽高 */
width:119px;
height:58px;
/* 3: 添加边框 */
border-right:1px solid #4a4a4a;
/* 4: 调整文本样式 */
text-align:center;
line-height:58px;
font-size:12px;
}
.nav-con li a{
/* 如果自身有默认样式的时候,必须调整自身的样式 */
color:#fff;
display: block;
}
.nav-con .margin_left{
margin-left:27px;
}
/* 给最后一个去掉边框 */
.nav-con .border_none{
border:none;
}

效果图如下:


注意:后面需要所有的样式都给a写,li只需要加浮动





.nav{
width:650px;
height:81px;
}
.nav li{
float:left;
}
.nav li a{
display:block;
height:81px;
padding:0 30px;
font-size:14px;
color:#646464;
line-height:81px;
}


补充导航栏样式1:



友情链接: