演示站:单击
个人博客导航条基本效果如上面所示,这是一个非常简易的导航条,通过html+css结合做出来的,隐藏+调用即可。

/* 删除浏览器的默认样式 */

{list-style:none;outline:none;}

/ 全局控制 /

body{font-family:"微软雅黑";text-align: center;}

a{

text-indent: 1em;

display:inline-block;

font-size:22px;

color:#5E2D00;

}

a:nth-child(1){text-indent:0;}/ 设置第一个链接的首行缩进为0 /

a:link,a:visited{text-decoration:none;}

a:hover{

text-decoration:underline;

color:#f03;

}

dl{display:none;}

dd{

line-height:38px;

font-size:22px;

font-family:"微软雅黑";

color:#333;

}

dd:before{content:url(images/11.png);}/ 添加小图片 /

dd:nth-child(odd){color:#BDA793;}

dd:nth-child(2) em{

color:#f03;

font-weight:bold;

font-style: normal;

}

dd:nth-child(3) em{

color:#5E2D00;

font-weight:bold;

font-style: normal;

}

:target{display:block;}/ 链接到的内容部分显示 */

html代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>网业设计软件列表</title>

<link rel="stylesheet" type="text/css" href="style04.css">

</head>

<body>

<h2>网页设计软件列表(点击查看)</h2>

<hr size="3" color="#5E2D00"  width="750px">

<nav>

<a href="#news1" class="one">Photoshop软件</a>

<a href="#news2" class="two">illustrator软件</a>

<a href="#news3" class="two">Dreamweaver软件</a>

<a href="#news4" class="two">Fireworks软件</a>

</nav>

<hr size="3" color="#5E2D00"  width="750px">

<dl id="news1">

<dt><img src="images/1.jpg"></dt>

<dd>Photoshop一款好到违反广告法的<em>超S级设计神器</em>!给画面来点动感吧。</dd>

<dd>Photoshop处理以<em>像素构成的图像</em>,可以有效地进行图片编辑调整工作。</dd>

<dd>Photoshop有很多功能,在图像、图形、文字、出版等各方面都有涉及。</dd>

<dd>在制作建筑效果图包括许三维场景时,常常需要在Photoshop进行调整。</dd>

</dl>

<dl id="news2">

<dt><img src="images/2.jpg"></dt>

<dd>Illustrator是一种应用于出版、多媒体和在线图像的<em>标准矢量插画</em>的软件。</dd>

<dd>Illustrator广泛应用于<em>印刷出版、海报书籍、</em>专业插画、多媒体图像处理。</dd>

<dd>Illustrator可以为线稿提供较高的精度和控制,简单到复杂项目都能生产。</dd>

<dd>跟据不完全统计全球大约有37%的界面设计师在使用Illustrator进行设计。</dd>

</dl>

<dl id="news3">

<dt><img src="images/3.jpg"></dt>

<dd>Dreamweaver是第一套针对<em>专业网页设计师</em>特别发展的网页开发工具。</dd>

<dd>利用它可以轻易地制作出<em>跨越平台和跨越浏览器</em>限制的充满动感的网页。</dd>

<dd>Dreamweaver自MX版本开始,使用了Opera的排版引擎作为网页预览。</dd>

<dd>Dreamweaver可以在AdobeCreativeSuite4的不同组件之间切换工作。</dd>

</dl>

<dl id="news4">

<dt><img src="images/4.jpg"></dt>

<dd>Fireworks是Adobe推出的一款<em>网页作图软件</em>,可以加速Web设计开发。</dd>

<dd>Fireworks是一款创建优化<em>Web图像</em>和快速构建网站与Web界面的工具。</dd>

<dd>Fireworks可以创建和编辑矢量图像与位图图像,并导入PS和AI文件中。</dd>

<dd>Fireworks采用与PS类似的层图层结构来管理原型,更易组织Web页面。</dd>

</dl>

</body>

</html>

其实html和css还是需要自己钻研外加通过百度进行查询,毕竟个人博客的导航条是在博客里非常重要的一个位置。

本文作者:博主:     文章标题:个人博客导航条制作
本文地址:https://zjzdmc.top/rcxx/31.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 20 日 10 : 52 AM
如果觉得我的文章对你有用,请随意赞赏