Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 日常学习 > 个人博客导航条制作

个人博客导航条制作

浏览: 作者:Datehoer 发布日期:2020-11-03 11:26:49 来源: 原创

演示站:单击
个人博客导航条基本效果如上面所示,这是一个非常简易的导航条,通过html+css结合做出来的,隐藏+调用即可。
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还是需要自己钻研外加通过百度进行查询,毕竟个人博客的导航条是在博客里非常重要的一个位置。


版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/rcxx/31.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!