下图是效果图:
然后, 左右两边的圆角图片和背景图片如下
(因为截图工具的原因, 可能图片不是很清晰. 这个图片有4个部分, 分别是中间的背景图, 左右圆角以及栏目分隔白线)
思路:
利用inline-block元素的中间性(既有块级元素特点: 能够控制宽高,可以定位, 也有内联元素特点: 可以被父元素text-align等)
HTML代码:
<div class="m-nav">
<ul>
<li class="first"><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
</ul>
<span class="corner corner-l"></span><span class="corner corner-r"></span>
</div>
1, 首先定位一个总体高度, .m-nav, .m-nav li, .m-nav li a, .m-nav .corner 这几个元素是一样高的
2, 确定要使用图片的元素, .m-nav(中间背景图片), .m-nav .corner(左右圆角图), .m-nav li(栏目分割的白线图)
3, 将栏目中间化, inline-block控制(考虑兼容性)
4, 定位圆角
5, 控制文本
css 代码如下:
<style type="text/css">
.m-nav, .m-nav li, .m-nav li a, .m-nav .corner {
height:40px;line-height:40px;background: url(images/nav.png) no-repeat -9999px -9999px;
}
.m-nav {
background-position: 0 0;width:90%;
background-repeat: repeat-x;
text-align:center;
font-weight:bold;
margin:auto;
margin-top:45px;
position:relative;
font-size:;
color:#fff;
letter-spacing: -0.307em;
*letter-spacing: normal;
*word-spacing: -1px;
}
.m-nav li, .m-nav li a, .m-nav .corner {
display:inline-block;*display:inline;*zoom:;
}
.m-nav li {
background-position: 0 -150px;
}
.m-nav li.first{
background:none;
}
.m-nav .corner {
width:6px;
position: absolute;
top:;left:;
}
.m-nav .corner-l {
background-position: 0 -50px;
margin-left:-6px;
}
.m-nav .corner-r {
background-position: 0 -100px;
margin-left:100%;
}
.m-nav li a {
padding:0 20px;
font-size:14px;color:#fff;text-align:center;
letter-spacing: normal;
word-spacing:normal;
}
.m-nav li a:hover{
text-decoration: underline;
}
</style>
这里通过NEC学习CSS, 学习了文本控制和圆角背景导航(非浮动)的设计思路.
以上文章如有错误, 欢迎指正.
NEC学习 ---- 模块 -文本圆角背景导航的更多相关文章
-
NEC学习 ---- 模块 - 上图下文图文列表
上图下文图文列表的效果如下图: 可以看到三个红色框中的三中"上图下文的图文列表"; 这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍: NEC学习 ---- 模 ...
-
NEC学习 ---- 模块 - 左图右文图文列表
该模块效果图: 这个模块也是在开发中经常使用的一种: HTML代码: <div class="container"> <div class="m-lis ...
-
NEC学习 ---- 模块 -多行式面包屑导航
如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...
-
NEC学习 ---- 模块 - tab[含标题]
简要介绍, 默认居左, Tab不定宽, “标题”和“更多”可删, 扩展类可以*组合, 依赖于reset.css(之前的模块以及布局都依赖这个css) 那么这个效果是怎么实现的呢? CSS代码: . ...
-
NEC学习 ---- 模块 - 带点文字链接列表
带点文字链接列表, 实现的效果是, 调整字体大小, 点的位置不会跟着变动. HTML如下: <div class="container"> <div class= ...
-
NEC学习 ---- 模块 -水平文字链接列表
HTML代码: <div class="container"> <div class="m-list1"> <ul class=& ...
-
NEC学习 ---- 模块 -简易文字链接列表
为了方便查看, 在最外面设置了一个粉色框. html代码: <div class="container"> <ul class="m-list" ...
-
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
-
Windows phone 8 学习笔记(8) 定位地图导航
原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...
随机推荐
-
JS学习:第二周——NO.3盒子模型
1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 JS提供的属性和方法: clien ...
-
IE input file隐藏不能上传文件解决方法
当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案.罢了,为了和我一样笨的后来人. 问题: 上传文件时,用<input type="file" /> ...
-
在本地(Eclipse)运行第一个strom-starter例子
一.在Eclipse中建立storm项目: 具体步骤如下: 1.在Eclipse中新建java project项目并导入jar包: File-> New -> Java Project - ...
-
[vijos P1626] 爱在心中
做完Victoria的舞会3,挑了vijos里强连通分量里面难度值最低的题目,也就是这道.先把第一小问做了,纯Tarjan,只是我学的时候的标程是用邻接表的,这题数据小于是用了邻接矩阵,两者之间的切换 ...
-
poj 1011 Sticks (DFS+剪枝)
Sticks Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 127771 Accepted: 29926 Descrip ...
-
《深入了解mybatis原则》 MyBatis架构设计和案例研究
MyBatis这是现在很流行ORM框架,这是非常强大.事实上现却比較简单.优雅. 本文主要讲述MyBatis的架构设计思路,而且讨论MyBatis的几个核心部件.然后结合一个select查询实例.深入 ...
-
C# 遍历泛型集合
/// <summary> /// 遍历泛型 /// </summary> /// <typeparam name="T"></typep ...
-
《k8s-1.13版本源码分析》-测试环境搭建(k8s-1.13版本单节点环境搭建)
本文原始地址(gitbook格式):https://farmer-hutao.github.io/k8s-source-code-analysis/prepare/debug-environment. ...
-
Java集合框架详解(全)
一.Java集合框架概述 集合可以看作是一种容器,用来存储对象信息.所有集合类都位于java.util包下,但支持多线程的集合类位于java.util.concurrent包下. 数组与集合的区别如下 ...
-
<;编写有效用例>;读书笔记3
<编写有效用例>读书笔记3 第三部分主要内容是对忙于编写用例的人的提示第20章:对每个用例的提示1.每个用例都是一篇散文:这个提示提醒我们将注意力集中与文字而不是图画上,同时帮助了解将要遇 ...