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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
