CSS阶段案例 制作网页设计软件列表

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS阶段案例 制作网页设计软件列表

就是简单的制作一个导航,巩固一下自己的知识点。网页分为三个部分,标题、导航栏以及内容介绍。标题用h2定义,导航使用nav元素,内部嵌套a标签,定义列dl定义内容不封,为导航和内容间设置锚点链接,为了设置某些特殊显示的文本可以通过嵌套em标签来定义。

定义导航栏中a标签的样式,包括访问前和访问后。定义内容介绍部分,内容部分显示状态设为隐藏,并同意设置内容部分的文字样式,文字前的小图标通过伪元素选择器定义。为了突出内容部分的文字效果,通过结构化伪类选择器搭配em标签进行定义。

target选择器将连接到的内容设置为显示,实现导航中某一款软件时,显示该软件相应的内容介绍信息。效果图如下:

CSS阶段案例 制作网页设计软件列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>网页设计软件列表</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<h3>网页设计软件列表</h3>
<hr size="3" color="#5E2D00"width=" 1000px">
<nav>
    <a href="#new1" class="one">Photoshop软件</a>
    <a href="#new2" class="two">Illustrator软件</a>
    <a href="#new3" class="three">Dreamweaver软件</a>
    <a href="#new4" class="four">Firework软件</a>
</nav>
<hr size="3" color="#5E2D00"width=" 1000px">
<dl id="new1">
    <dt><img  class="img-thumbnail" src="1.jpg" alt="CSS阶段案例 制作网页设计软件列表"  title="CSS阶段案例 制作网页设计软件列表"/></dt>
    <dd>Photoshop一款好到违反广告法的<em>超级设计神器</em>!给画面来点动感吧。</dd>
    <dd>Photoshop处理以<em>像素构成的图像</em>,可以有效地进行图片编辑调整工作。</dd>
    <dd>Photoshop有很多功能,在图像、图形、文字、出版等各方面都有涉及。</dd>
    <dd>在制作建筑效果图包括三维场景时,常常需要在Photoshop中进行调整。</dd>
</dl>
<dl id="new2">
    <dt><img  class="img-thumbnail" src="1.jpg" alt="CSS阶段案例 制作网页设计软件列表"  title="CSS阶段案例 制作网页设计软件列表"/></dt>
    <dd>Illustrator是一种应用于出版、多媒体和在线图像的<em>标准矢量插图</em>的软件。</dd>
    <dd>Illustrator广泛应用于<em>印刷出版、海报书籍、</em>专业插图、多媒体图像处理。</dd>
    <dd>根据不完全统计,全球大约有37%的界面设计师在使用Illustrator进行设计。</dd>
</dl>
<dl id="new3">
   <dt><img  class="img-thumbnail" src="1.jpg" alt="CSS阶段案例 制作网页设计软件列表"  title="CSS阶段案例 制作网页设计软件列表"/></dt>
    <dd>Dreamweaver是第一套针对<em>专业网页设计师</em>特别发展的网页开发工具。</dd>
    <dd>利用它可以轻易的制作出<em>跨平台和跨浏览器</em>限制的动感网页。</dd>
    <dd>Dreamweaver自MX版本开始,使用了Opera的排版引擎作为网页预览。</dd>
    <dd>Dreamweaver可以在AdobeCreativeSuite的不同组件之间切换工作</dd>
</dl>
<dl id="new4">
   <dt><img  class="img-thumbnail" src="1.jpg" alt="CSS阶段案例 制作网页设计软件列表"  title="CSS阶段案例 制作网页设计软件列表"/></dt>
    <dd>Fireworks时Adobe推出的一款<em>网页作图软件</em>,可加速Web的设计开发。</dd>
    <dd>Fireworks是一款创建优化<em>Web图像</em>和快速构建网站与Web界面的工具。</dd>
    <dd>Firework可以创建和编辑矢量图像与位图图像,并导入PS和AI文件中。</dd>
    <dd>Firework采用与PS类似的底层图层结构来管理原型,更易组织Web页面。</dd>
</dl>
</body>
</html>
@charset "utf-8"
/*CSS Document*/
	*{margin: 0;padding: 0;list-style: none;outline: none;}
	body{font-family: "微软雅黑";text-align: center;}
	a{text-indent: 1em;display: inline-block;font-size: 30px;color: #5E2D00;}
	a:link,a:visited{text-decoration: none;}
	a:hover{text-decoration: underline;color: #F03;}
	dl{display: none;}
	dd{
		line-height: 38px;
		font-size: 30px;
		font-family: "微软雅黑";
		color: #333;
	}
	dd:before{content: url();} /*添加小图片*/
	dd:nth-child(){color:#BDA793;}
	dd:nth-child(2) em{
		color: #f03;
		font-weight: bold;
		font-style: oblique;
	}
	dd:nth-child(3) em{
		color: #5E2D00;
		font-weight: bold;
		font-style: unset;
	}
	:target{display: block;}  /*链接到的内容部分显示*/

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS阶段案例 制作网页设计软件列表》 发布于2020-04-27

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

9 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册