网页制作导航条字体（html导航条怎么制作）
本文目录一览：
网页导航上一般都是什么字体,多少号?
一般网页中正常用字体为“宋体”，12px(像素)的大小。
在网页制作中。网页的字体大小是有一定的规格的，由于windows系统中默认的宋体字是一种像素字体，最合适的大小是12px或9pt，再大可以使用14px或者16px，如果再大，那在显示器上就会出现严重的影响视觉的锯齿。
宋体字是源于宋代的，但是宋体字在明代确立，所以至今在日本，宋体字仍被称作“明朝体”。
宋体字是印刷行业应用得最为广泛的一种字体，根据字的外形的不同，又分为书宋和报宋。宋体是起源于宋代雕版印刷时通行的一种印刷字体。宋体字的字形方正，笔画横平竖直，横细竖粗，棱角分明，结构严谨，整齐均匀，有极强的笔画规律性，从而使人在阅读时有一种舒适醒目的感觉。在现代印刷中主要用于书刊或报纸的正文部分。
淘宝店铺导航条字体怎么设置(css)? 注意 是字体 不是颜色
查看店铺，右击，查看源代码，在里面找到你要改字体的标签，可以使用ctrl+f，找到后，根据class名，更改样式即可，font-family：‘宋体’。
font-family、微软雅黑，宋体，seri、解释下：这个设置的意思是，优先微软雅黑，如果没有微软雅黑就用宋体，两个都没有就用serif类字体。
导航栏CSS样式制作流程：
1、导航栏CSS样式设置，预览:导航样式是选择设置后，预览区会自动发生变化，涉及到“经过"的效果，是指鼠标放到该元素上产生的效果，需要把鼠标放设置的元素上查看设置效果。
2、颜色、点击颜色选择器，在颜色选择界面，选择你喜欢的颜色，或者设置指定的颜色(在#位置，填写颜色编号，可以指定需要的颜色。
这个需要自己提前使用PS或者其他取色软件获得需要的颜色编号)。选择了马赛克，意思是不设置，没有任何颜色。
3、图片、部分设置框里，是设置图片。首先，进入淘宝店铺图片空间，上传准备好的背景素材图片，上传完成后，复制图片地址，在图片设置框里粘贴(一定是淘宝图片空间的图片，否则不能在淘宝店铺安装导航CSS代码)。
注意，部分样式设置里，一个位置有颜色设置，同样有图片设置，任取一种必须设置一种。
4、字体、字体大小、字体名称、字体样式，根据提供的选项进行选择即可。
如何设置div+css 导航条字体
先码好导航栏所需要的基本的HTML代码
这个就不必多说具体的代码如下：
html
head
title横向导航栏/title
style
!----
/style
/head
body
div class="63d1-bd41-fcfd-9f6a nav"
ul
lia href="#"首页/a/li
lia href="#"导航1/a/li
lia href="#"导航2/a/li
lia href="#"导航3/a/li
lia href="#"导航4/a/li
lia href="#"导航5/a/li
lia href="#"导航6/a/li
/ul
/div
/body
/html
测试结果应为下图（1）
下面我们通过CSS 来改变他的样式。
首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！
现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。
方法是在style/style之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。
style
!--
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
}
--
/style
测试结果如图2
接下来我们让他居中。我们在样式中加入以下代码。
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/
}
测试结果应为图3。
因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。
.nav ul li{
float:left;/*让li元素左浮动*/
}
我们看到测试结果如图4。
边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。
接下来，我们通过给元素a添加样式，让他更美观。加入以下代码。
.nav ul li a{
width:80px;/*设置元素宽为80px*/
height:28px;/*设置高度为28px*/
line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:5px 10px;
font-size:12px;/*用12号字*/
display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none; /*去掉下划线*/
}
效果如图5
我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。
.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
测试结果如图6
最后稍微整理一下代码
.nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
.nav ul li{
float:left;
}
.nav ul li a{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px 10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
看看效果，成功没？
思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。
网页上的导航条，一般用什么字体显示好看些
宋体 黑体，现在的微软雅黑也不错啊。 CSS 样式： font-family: "微软雅黑"; 字体名称 font-size: 13px; 字体大小 color: #000000; 字体颜色！
