`

用CSS样式制作按钮式超链接

阅读更多

a:link--用来定义未访问过的超链接样式

a:visited--用来定义访问过的超链接样式

a:active--用来定义活动的超级链接(即获得当前焦点的链接)

a:hover--用来定义有鼠标悬停的链接样式

<html>
	<head>
		<style type="text/css">
			a{
					font-family:Arial;
					font-size:21px;
					text-align:center;
					margin:3px;
			}
			a:link,a:visited{
					color:#002020;
					backgroud-color:blue;
					border-top:1px solid #EE00EE	/*边框阴影效果*/
					border-left:1px solid #EE00EE
					border-bottom:1px solid #720072
					border-right:1px solid #720072
					
			}
			a:hover{
					color:#930220;	                /*改变文字颜色*/
					padding:5px 8px 3px 12px;
					backgroud-color:green;		/*改变背景颜色*/
					border-top:1px solid #720072	
					border-left:1px solid #720072
					border-bottom:1px solid #EE00EE
					border-right:1px solid #EE00EE
			}
		  </style>
	</head>
  <body>
	<a href="#">Back to Home</a>
  </body>
</html>

 

分享到:
评论

相关推荐

    css 浮雕式超链接

    以下是一个简单的浮雕式超链接的CSS代码示例: ```css a { display: inline-block; /* 使链接可以设置宽高 */ padding: 5px 10px; /* 添加内边距以模拟立体感 */ border: 2px solid #333; /* 设置边框,增加立体...

    js 外观类似按钮的超链接

    1. **CSS样式调整**:使用CSS,我们可以改变超链接的默认样式,使其更接近按钮。例如,添加圆角、背景色、边框、内阴影等属性,如下所示: ```css .link-button { display: inline-block; padding: 0.5rem 1rem; ...

    HTML 按钮超链接

    HTML(HyperText Markup Language)是构建网页的基本...通过合理使用`&lt;button&gt;`、`&lt;a&gt;`以及相关的CSS样式,我们可以创建出美观且功能齐全的网页元素。对于初学者来说,掌握这些基础知识是迈向专业前端开发的第一步。

    实现超链接风格的按钮

    2. **CSS样式**: 使用CSS来改变按钮的外观,使其与超链接相似。这包括去除边框、背景色,以及调整字体样式。 ```css .link-button { background-color: transparent; border: none; color: inherit; cursor: ...

    网页超链接的制作.docx

    4. 交互式按钮链接:这涉及到HTML元素的结合,比如使用CSS美化按钮样式,同时设置按钮的链接属性。 5. 图片热区链接:对于包含多个链接区域的图片,可以通过定义热区(HTML的`&lt;map&gt;`和`&lt;area&gt;`标签)来创建链接。每...

    js超链接伸缩特效js超链接伸缩特效

    3. **CSS样式更改**:在事件触发时,JavaScript会修改超链接的CSS样式。这包括改变`width`(宽度)、`height`(高度)、`font-size`(字体大小)、`background-color`(背景色)等。可以使用`style`对象直接修改元素...

    背景自适应文字宽度的css按钮

    在网页设计中,创建美观且功能强大的交互元素是至关重要的,而按钮作为用户与网站进行交互的主要...通过正确使用`&lt;a&gt;`标签、CSS的背景属性以及布局样式,我们可以创建出既美观又实用的自适应按钮,提升网页的用户体验。

    网页设计-CSS.ppt

    按钮式超链接是指使用CSS将超链接设计成按钮样式,以提高用户体验。下面是一个简单的示例: 首先,我们需要建立一个基本的HTML结构: ```html &lt;a href="home.htm"&gt;Home &lt;a href="east.htm"&gt;East ...

    html css网页制作成品.zip

    CSS Grid是一种二维布局系统,适用于创建复杂的网页布局,而Flexbox则专为一维布局设计,如导航栏、按钮组等。 `项目说明.zip`可能包含了关于这个网页制作项目的详细文档,可能涵盖了设计思路、技术选型、实现细节...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》PPT.zip

    2. CSS样式设计:讲解CSS的选择器、属性和布局技巧。 3. JavaScript入门:解释变量、数据类型、控制流和DOM操作。 4. 交互式元素:如何使用JavaScript创建表单验证、按钮事件、弹出对话框等交互功能。 5. 实战项目:...

    Dreamweaver可视化编辑与应用CSS样式PPT学习教案.pptx

    - **案例背景**:利用CSS样式来做汽车用品主页的设计,重点在于页面布局与特效的制作。 - **实践步骤**: 1. 规划页面布局,确定主要区块的划分。 2. 使用`&lt;div&gt;`标签配合CSS样式实现布局。 3. 添加必要的交互...

    生日贺卡游戏,HTML,css制作,适合初学者学习使用

    在生日贺卡游戏中,CSS可能使用了这些选择器来设置按钮的颜色、大小、边框,或者改变文字的字体、颜色和对齐方式。同时,CSS还可以定义盒模型(包括内边距、边框和外边距)来调整元素的布局,以及使用背景图片、过渡...

    CSS美化网页PPT课件.pptx

    **制作CSS样式文件** - 可以从CSS模板创建新的样式文件。 - 编辑样式文件,定义所需的样式规则。 通过以上内容,我们可以了解到CSS是网页设计中不可或缺的一部分,它极大地提高了网页的可维护性和设计灵活性。通过...

    使用HTML和css来完成的个人网页.zip

    7. **图像和图标**:如next.png和find.png可能是页面上的操作按钮或导航图标,它们通过`&lt;img&gt;`标签引入,并可以使用CSS进行样式调整。 8. **字体打包**:"fonts"文件夹可能包含自定义字体文件,例如`.ttf`或`.otf`...

    HTML期末大作业html+css+div二十个页面以上

    5. 组合使用HTML、CSS和JavaScript:可能涉及到交互元素,如按钮点击事件、表单验证等,这需要JavaScript来实现动态效果。 6. 网页优化:包括减少HTTP请求、压缩资源、使用CDN、优化图片大小等,提高网页加载速度和...

    仿照百度搜索html,网页模板css样式

    【标题】"仿照百度搜索html,网页模板css样式"涉及的知识点主要集中在HTML和CSS这两门前端核心技术上。HTML(HyperText Markup Language)是用于创建网页的标准标记语言,而CSS(Cascading Style Sheets)则负责定义...

    网页制作_html_css_

    1. **选择器与声明**:CSS通过选择器定位HTML元素,然后用声明来指定样式,如`p {color: red;}`将所有段落字体颜色设为红色。 2. **盒模型**:理解CSS盒模型至关重要,它包括元素的内容、内边距、边框和外边距,影响...

    中文版Dreamweaver CS4网页制作实用教程》

    第6章 使用CSS样式美化 111 6.1 CSS样式的基础知识 111 6.1.1 CSS样式的概念 111 6.1.2 CSS样式的功能 112 6.1.3 CSS样式规则 112 6.2 使用CSS样式 113 6.2.1 认识【CSS样式】面板 114 6.2.2 新建CSS样式规则 115 ...

    CSS网站布局实录 (第二版)PDF版

    4.1 用CSS设计网站导航 4.1.1 横向导航 4.1.2 纵向导航 4.1.3 下拉及多级弹出式菜单 4.1.4 门户网站的导航设计(闪客帝国) 4.2 背景控制 4.2.1 背景颜色 4.2.2 背景图片 4.2.3 背景定位 4.2.4 背景滚动 4.2.5 背景...

    CSS3鼠标悬停图片显示购物车等图标按钮动画特效

    【CSS3鼠标悬停图片显示购物车等图标按钮动画特效】是现代网页设计中一种吸引用户注意力并增强交互体验的技术。这种特效主要依赖于CSS3的新特性,包括但不限于选择器、伪类、过渡(transition)、动画(animation)...

Global site tag (gtag.js) - Google Analytics