Home > Article > Web Front-end > 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
- WBOYOriginal
- 2016-06-24 11:51:061158browse
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> The relief button seems to be a paper surface. When the mouse is placed, her change is more gorgeous than the buttons just now. Simple, a table, a banner, and then countless a tags side by side, representing hyperlinks. The important thing is that the horizontal table tag is set as a background image, and table.banner transforms a small image into a background image. repeat. Let’s take a look at CSS to control mouse arrows and our example code and running effect:
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> When we point the mouse to help, a small question mark will appear in the upper right corner of the mouse. We set a class class to help this button. There is a lot of value, not only help. Friends can try it yourself. Finally, let’s look at the example code and operating effect of a page scroll bar: 🎜>
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...