CSS+HTML快速入门 链接样式&雪碧图（案例）

已于 2022-04-09 17:41:25 修改
阅读量664 收藏
点赞数 1
分类专栏： 综合提升 文章标签： html 前端
于 2022-04-09 17:35:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60786924/article/details/124064210
版权

目录

一、伪类的使用

        1.html部分：

二、横向主菜单

        1.images图片部分：

        2.css部分：

        3.html部分：

三、外部样式

        1.css部分：

        2.html部分：

四、制作顶部菜单（综合）

        1.images图片部分：

        2.css部分：

        3.html部分：

        实现效果图：

一、伪类的使用

        1.html部分：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>超链接伪类</title>
<style>
  .nav{width:100%;}
  .nav ul{list-style:none;}
  .nav li {
  	width:120px;	
	  float:left;
  	text-align:center;
  	font-weight:bold;
  	}
  .nav li a{padding:8px 15px;}
  .nav li a:link{ 	
  	color:#333;
  	font-size:13px;
  	}  
  .nav li a:hover{
  	color:#ff7300;
  	font-size:20px;
  	}
  .nav li a:active{
  	color:#333;
  	font-size:13px;
  	} 
  .nav li a:visited{
  	color:#333;
  	font-size:13px;
  	} 	
</style>
</head>
<body>
<div class="nav">
  <ul>
    <li><a href="#">家用电器</a></li>
    <li><a href="#">手机数码</a></li>
    <li><a href="#">日用百货</a></li>				
  </ul>
</div>	<!--nav	end-->		
</body>
</html>

二、横向主菜单

        1.images图片部分：

        2.css部分：

  body{
	  background:url(../images/h_bg.jpg) no-repeat 24px -88px;}
  .nav ul{list-style:none;}
  .nav li {
  	width:84px;
  	float:left;
  	text-align:center;
  	font-weight:bold;
	line-height:24px;
  	}
  .nav li a{padding:8px 10px;text-decoration:none;}
  .nav li a:link,.nav li a:active,.nav li a:visited{ 	
  	color:#333;
  	font-size:13px;
  	}
  .nav li a:hover{	
  	background:url(../images/nav_bg.png) no-repeat;
  	}

        3.html部分：


<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>商城主导航条</title>
 <link rel="stylesheet" type="text/css"	href="css/layout.css" />
</head>
<body>
<div class="nav">
  <ul>
    <li><a href="#">&nbsp;首&nbsp;&nbsp;&nbsp;页&nbsp;</a></li>
    <li><a href="#">家用电器</a></li>
    <li><a href="#">手机数码</a></li>
    <li><a href="#">日用百货</a></li>
    <li><a href="#">&nbsp;书&nbsp;&nbsp;&nbsp;籍&nbsp;</a></li>
    <li><a href="#">帮助中心</a></li>
    <li><a href="#">免费开店</a></li>
    <li><a href="#">全球咨询</a></li>
  </ul>
</div>
</body>
</html>

三、外部样式

        1.css部分：

  .nav{width:100%;}
  .nav ul{list-style:none;}
  .nav li {
  	width:84px;
  	float:left;
  	text-align:center;
  	font-weight:bold;
  	}
  .nav li a{padding:8px 10px;}
  .nav li a:link{ 	
  	color:#333;
  	font-size:13px;
  	}  
  .nav li a:active{ 	
  	color:#333;
  	font-size:13px;
  	} 
  .nav li a:visited{ 	
  	color:#333;
  	font-size:13px;
  	} 	
  .nav li a:hover{ 	
  	color:#ff7300;
  	font-size:13px;
  	}

        2.html部分：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>外部样式表文件</title>
 <link rel="stylesheet" href="css/layout.css" type="text/css"  />
</head>
<body>
<div class="nav">
  <ul>
    <li><a href="#">风格复用</a></li>
    <li><a href="#">结构不变</a></li>
    <li><a href="#">内容不同</a></li>				
  </ul>
</div>	<!--nav	end-->		
</body>
</html>

 当鼠标移入到内容部分，字体颜色变成红色，移除的时候，变回原来的样子。

四、制作顶部菜单（综合）

        1.images图片部分：

        2.css部分：

.top_menu{float:right;}
.top_menu ul{list-style:none;}
.top_menu li{float:left;}
.top_menu ul li a{font:12px/26px 宋体;}
.top_menu ul li a:link    {color:#333333;text-decoration: none;}   
.top_menu ul li a:visited {color:#333333;text-decoration: none;}   
.top_menu ul li a:active  {color:#333333;text-decoration: none;}   
.top_menu ul li a:hover   {color:#ff7300;} 	
  .pic1{width:28px;height:26px;background:url(../images/icon.gif) no-repeat;}
  .pic2{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -28px 0px;}
  .pic3{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -84px 0px;}
  .pic4{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -112px 0px;}	
  .text{padding:0px 5px;text-align:center;}
  .btn {padding:0px 5px;text-align:center;
  width:38px;height:26px;background:url(../images/icon.gif) no-repeat 0px -25px;}

        3.html部分：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>顶部菜单</title>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
</head>
<body>
<div class="top_menu">
  <ul>
    <li class="pic1"></li>
    <li class="text"><a href="#">购物车</a></li>
    <li class="pic2"></li>
    <li class="text"><a href="#">帮助中心</a></li>
    <li class="pic3"></li>
    <li class="text"><a href="#">加入收藏</a></li>		
    <li class="pic4"></li>
    <li class="text"><a href="#">设为首页</a></li>			
    <li class="btn"><a href="#">登录</a></li>
    <li class="btn"><a href="#">注册</a></li>																																
  </ul>
</div>
</body>
</html>

        实现效果图：

£轻描～淡写°
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS雪碧图
weixin_47782618的博客
04-16 2260
1. 定义 CSS sprite也叫做CSS 雪精灵，CSS 雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星小图都包含到一张大图中去。 2. 使用雪碧图的优点 ① 减少图片的字节。 ② 客户端每显示一张图片都会向服务器发送请求，所以图片越多，造成的延迟越大。使用雪碧图访问页面时，由从前的多次请求转换为一次请求，减少了网页的HTTP请求，从而大大提高了页面的性能。 ③ 减轻了对图片命名的困扰，提高了网页的制作效率。 3. 使用雪碧图的原理 ① 设置一个有宽高的容器（因为雪碧
html网站雪碧图素材,webpack雪碧图实现（webpack管理小图标素材）
weixin_42133861的博客
07-02 463
雪碧图也叫CSS精灵， 是一CSS图像合成技术，这里介绍webpack实现雪碧图这是我的文件目录：// 在上个实例项目上增加了icons文件夹；// dist/sprites/目录是后面执行webpack打包命令自动生成的，先不用管；1、安装webpack-spritesmith；npm install --save-dev webpack-spritesmith2、webpack.config....
CSS雪碧图的作用以及加载方式（代码示例）
最新发布
大剑师兰特的GIS世界
04-11 1869
CSS Sprites 是一种优化网页加载速度的技术，通过将多个小图标或背景图像合并到一张单独的大图中，然后通过CSS的`background-image`属性引用这张大图，并结合`background-position`属性来精准地定位显示其中每一个小图标的背景位置。
HTML-CSS（二十四）spirit雪碧图（CSS图精灵）
weixin_44730244的博客
04-26 331
特性：css雪碧也叫做css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到所有零星图片都包含在一张大图中去加载 好处：可以减少图片的质量、网页的图片加载速度快 ​ 减少图片的请求次数，加快网页的打开 这也是属于前端优化的一个方面，减少图片加载次数。现在很多大型网页都采用这种方式，能够一图多用，而且特别适用在背景图当中。下面这张图就是QQ飞车网页当中的雪碧图其中之一。可以看到，有许多小的图片组成，可能你会想，那么多个小图片组成一张图片的存储量，和几个小图加在一起存储量不是一样的吗？答案是不一定
使用ccs 制作雪碧图 简单 一看就懂
weixin_52915467的博客
12-12 750
我不喜欢胖子，但她胖就没事 今天我们来制作雪碧图（就是将很多小图标放在一张图片中） 一.利用雪碧图有很多优点 : 1.可以减小图片的总大小 2.一次请求，可减小建立键连接的消耗 在这里我们来做一个运动的小人 就是将小人的多个动作放在一张图片上，然后利用css动画效果让其运动起来，就能呈现出小人再跑的效果，即也是雪碧图。 1.html代码 <body><div class="box1"></div></body> 先创建一个容器，为了让效果更好，我们索性直
HTML+CSS+JavaScript编程入门指南
12-30
下载文件是HTML+CSS+JavaScript编程入门指南这本书的示例代码，全书分HTML，CSS与JavaScript三个部分，然后结合三个部分用项目说明应用方法。各部分的代码展示了三种语言的使用方法，可以搭配webstorp执行
HTML+CSS+JavaScript快速入门+实战演练
01-08
文章目录一篇快速入门HTML一篇快速入门CSS一篇快速入门JS演练前要明白的css盒子模型（在后面的例子中经常用到）实战演练—另类登录网页（1）实战演练—另类登录网页（2）实战演练—另类登录网页（3）实战演练—...
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
html+css快速入门教程.pdf
06-25
nodeing课堂的资料 html+css个人觉得还不错，总结了经典的知识，满满的干货
HTML+CSS+JS-入门基础ppt课件.ppt
11-19
HTML+CSS+JS入门基础知识点 HTML 是一种超文本标记语言，用于设计网页的主要语言。 HTML 文档的扩展名是 .html 或 .htm，使用记事本或可视化 HTML 编辑器可以编写 HTML 代码。 HTML 文档的结构主要包括和两个...
html伪类元素加图片,CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号...
weixin_35042833的博客
06-04 3362
before: 伪元素选择器用于在某个元素之前插入一些内容伪类选择器:before使用content属性插入字符、属性插入图片css3.p_before:before {content: 'H';color: #01B4EE;}.p_beforeImg {background: #eeeeee;width: 200px;height: 80px;border-radius: 6px;padding...
在html中雪碧图的坐标怎么看,css中雪碧图(sprite)的使用及制作方法
weixin_36436810的博客
06-09 588
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件：合成雪碧图后是这样拼在一起的一张图：2.雪碧图的使用首先确定要使用的图标的位置和大小(可以通过ps测量)，如下的雪碧图大小统一，排列规则它们的大小均为30px*30px，第一个图标位置为0 0，第二个的位置为30px 0，依次...样式...
CSS3动画——雪碧图的实现
Daisy花园
01-25 5344
前言作为一个前端的初学者，现在好像已经在nodejs上越跑越偏，之前一直崇拜的CSS3和HTML5动画，如今也好久没有管。因为之前学了好多知识点，但是没有系统的进行总结，就从这篇文章开始，对一些碎片的知识点做一些小小的总结吧，也算是一种回顾吧，这样自己也不会忘记。先说CSS3的动画CSS3关于动画的属性其实也不过就是这么几个，transform、transition、animation，这里简单的说
前端小白--工具篇（一）雪碧图CssSprite
AIGC大前端小王子
12-14 3985
本文主要介绍前端的工具CssSprite雪碧图。当图片数量较多，而且搭配合理的情况下，可以有效地提升网页速度；另外，借助 CSS sprite 的特性可以进行图片提前加载处理。 CssSprite雪碧图的优点 减少请求数 图片总 size减少 提前加载图片 CssSprite雪碧图的缺点 不建议大图片合并，建议类似图片合并 CssSprite雪碧图如何使用1.下载雪碧图生产工具CssSprite
Web基础——雪碧图
weixin_43311121的博客
01-30 480
雪碧图的制作与使用 1、雪碧图：多个图片集成在一个图片中的图 2、为何使用：可以减少网络请求的次数，加快运行的速度。 3、制作网站：CSS Sprites Generator 4、如何使用： 以下图为例： 示例代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti...
快速制作雪碧图
热门推荐
子非鱼
01-30 1万+
分享一个快速生成雪碧图并生成对应css代码的网站 https://www.toptal.com/developers/css/sprite-generator 左边上传图片，右边生成雪碧图，并且可以选择图片的排列形式。
createjs使用雪碧图代码
assassin66678的博客
12-24 277
//创建一个精灵图路径与每个图的位置var result={ "images":['img/img./png'], "frames":[ [0,0,100,100], [100,100,100,100], ], "animations":{ 'p1':[0], 'p2':[2], }} //生成sheetvar spriteSheet =...
Html+Css 链接状态变换的单图片实现（精通CSS高级WEB解决方案）读书笔记
迎难而上
02-15 1760
需求 链接, 在点击,悬浮,访问过后需要进行图片的变换。 常规做法; 利用伪类选择器，创建多个图片，在悬浮，点击的时候切换不同的图片 高级： 上面做法存在一定缺陷，换图的时候可能出现闪烁 下面讲解pixey 图片切换法 （将多种状态放在一张图片中, 进行切换的时候，选择不同的位置,需要计算好尺寸） 背景图如下   示例代码：
html+css+javascript编程入门指南pdf
10-20
CSS是一种用于设置网页样式的语言，通过使用不同的CSS属性和选择器，可以为网页元素提供不同的样式效果，包括颜色、字体、布局等。JavaScript是一种用于实现网页交互和动态效果的脚本语言，通过使用不同的JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值