Web Front-end
HTML Tutorial
Proficient in CSS DIV web page style and layout page and browser elements_html/css_WEB-ITnose
Proficient in CSS DIV web page style and layout page and browser elements_html/css_WEB-ITnose
In pages and browsers, in addition to text, pictures, tables, forms, etc., there are many various elements. In the last blog post, the editor briefly introduced the elements in CSS How to set up tables and forms. Today I will briefly introduce the rich hyperlink effects, mouse effects, and page scroll bars. First of all, let's look at a mind map:
Then, the editor will follow the footprint of the above thinking map, slowly explore, in the rich hyperlink special effects, let's introduce it first to introduce Dynamic hyperlink, let’s take a look at the code and running effect of the example:
Dynamic hyperlink
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>动态超链接</title><style><!--body{ background:url(bg9.gif); /* 页面背景图片 */ margin:0px; padding:0px; cursor:pointer;}.chara1{ font-size:12px; background-color:#90bcff; /* 导航条的背景颜色 */}.chara1 td{ text-align:center;}a:link{ /* 超链接正常状态下的样式 */ color:#005799; /* 深蓝 */ text-decoration:none; /* 无下划线 */}a:visited{ /* 访问过的超链接 */ color:#000000; /* 黑色 */ text-decoration:none; /* 无下划线 */}a:hover{ /* 鼠标经过时的超链接 */ color:#FFFF00; /* 黄色 */ text-decoration:underline; /* 下划线 */}--></style> </head><body><table align="center" cellpadding="1" cellspacing="0"> <tr><td><img src="banner3.jpg" border="0"></td></tr></table><table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"> <tr> <td><a href="#">首页</a></td> <td><a href="#">心情日记</a></td> <td><a href="#">Free</a></td> <td><a href="#">一起走到</a></td> <td><a href="#">从明天起</a></td> <td><a href="#">纸飞机</a></td> <td><a href="#">下一站</a></td> </tr></table></body></html></span></span>The running effect is as follows Show:
’ ’ ’ ’ ’ ’ ‐ to ’ ’ s ’ t ’ s ’ t to to A menu to achieve a very beautiful browsing effect. What we are worth talking about here is: a:link, a:visited, and a:hover to set the effect of dynamic hyperlinks respectively. Let's take a look at the button hyperlink next. Let's look at the example code and the running effect
Button hyperlink
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>按钮超链接</title><style><!--a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px;}a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #ecd8db; text-decoration: none; border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171;}a:hover{ /* 鼠标经过时的超链接 */ color:#821818; /* 改变文字颜色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ background-color:#e2c4c9; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE;}--></style> </head><body> <a href="#">首页</a> <a href="#">心情日记</a> <a href="#">学习心得</a> <a href="#">工作笔记</a> <a href="#">生活琐碎</a> <a href="#">其他</a></body></html></span>These hyperlinks have grown into buttons. When the mouse moves up, it changes separately, so how did he achieve it in CSS? Let's analyze the code. First, there is an a mark, which uniformly sets the entire button; a:link and a:visited use the same settings, and the border-top and border-left here use the same one. Color, border-bottom and border-right use the same color, which achieves a shadow effect; and these two colors are cleverly replaced in hover, giving people a feeling like a button, let's continue to look at Ambassador hyperlink, let's take a look at the example code and operating effect:
relief hyperlink
The operation effect is shown below:
<span style="font-size:18px;"><html><head><title>浮雕超链接</title><style><!--body{ padding:0px; margin:0px; background-color:#f5eee1;}table.banner{ background:url(banner1_bg.jpg) repeat-x; width:100%;}table.links{ background:url(button1_bg.jpg) repeat-x; font-size:12px; width:100%}a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button1.jpg) no-repeat; /* 超链接背景图片 */}a:link{color:#654300;}a:visited{color:#654300;}a:hover{ color:#FFFFFF; text-decoration:none; background:url(button2.jpg) no-repeat; /* 变换背景图片 */}--></style> </head><body><table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner1_left.jpg" border="0"></td></tr></table><table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首页导读</a><a href="#">在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a></td></tr></table></body></html></span>
CSS to control mouse arrow
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>鼠标变幻超链接</title><style><!--body{ padding:0px; margin:0px; background-color:#efe5e2;}table.banner{ background:url(banner2_bg.jpg) repeat-x; width:100%;}table.links{ background:url(button3_bg.jpg) repeat-x; font-size:12px; width:100%}a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button3.jpg) no-repeat; /* 超链接背景图片 */}a:link, a visited{color:#2d2d26;}a:hover{ color:#FFFFFF; text-decoration:none; background:url(button4.jpg) no-repeat; /* 变换背景图片 */}a.help:hover{ /* “帮助”按钮的样式 */ cursor:help; /* 变幻鼠标形状 */}--></style> </head><body><table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner2_left.jpg" border="0"></td></tr></table><table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr></table></body></html></span>🎜>
As shown in the running effect above, this scroll bar is no longer the default effect of IE, but a very gorgeous blue; we zoom out the page and see that the scroll bar on the right is also changing. It is very simple. The scrollbar has many attributes. You can try it yourself.
Message from the editor: The editor of this blog post mainly briefly introduces the relevant knowledge points about how to set up the page and browser in CSS. It is divided into three parts for detailed introduction, including hyperlink special effects, CSS control of mouse arrows, Page scroll bar, which introduces the special effects of hyperlinks in detail. Hyperlink special effects include dynamic hyperlinks, button hyperlinks and embossed hyperlinks. In dynamic hyperlinks, we first separate the banners on the page with a table tag. , and secondly, mark a table to form a horizontal menu to achieve a beautiful browsing effect. What we are worth talking about here is: a:link, a:visited, and a:hover respectively set the effect of dynamic hyperlinks; the button connection first has an a mark, which uniformly sets the entire button; a :link and a:visited use the same settings. The border-top and border-left here use the same color, and the border-bottom and border-right use the same color. This achieves a shadow effect. ; And in hover, these two colors are cleverly replaced, giving people a feeling like a button; finally, a table, a banner are connected in relief, and then countless a tags are arranged side by side, indicating hyperlinks. The key point is , set this horizontal table mark to a background image, and table.banner repeats a small image. The content of CSS is not difficult. The difficulty lies in whether you really do it yourself. Time, BS learning, unfinished To be continued...
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?
Mar 04, 2025 pm 12:32 PM
The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How to efficiently add stroke effects to PNG images on web pages?
Mar 04, 2025 pm 02:39 PM
This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
