데스크홈 로딩 중입니다.
CSS Code
01 | /* UI Object */ |
02 | /* Common */ |
03 | body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0} |
04 | body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px} |
05 | img,fieldset{border:0} |
06 | ul,ol{list-style:none} |
07 | em,address{font-style:normal} |
08 | a{text-decoration:none} |
09 | a:hover,a:active,a:focus{text-decoration:underline} |
10 |
11 | .ld_line{position:absolute;top:0;left:0;z-index:1000;height:40px} |
12 | .ld_line:after{display:block;clear:both;content:''} |
13 | .ld_line .lft,.ld_line .rgt{float:left;width:11px;height:40px;font-size:0;line-height:0} |
14 | .ld_line .lft{background:url(http://static.naver.com/desk/ld1_lft.png) no-repeat 00;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.naver.com/desk/ld1_lft.png',sizingMethod='crop')} |
15 | .ld_line .rgt{background:url(http://static.naver.com/desk/ld1_rgt.png) no-repeat 00;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.naver.com/desk/ld1_rgt.png',sizingMethod='crop')} |
16 | .ld_line .cont{float:left;height:26px;padding:14px 7px 0 0;background:url(http://static.naver.com/desk/ld1_cen.png) repeat-x 00;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.naver.com/desk/ld1_cen.png',sizingMethod='scale');color:#fff} |
17 | .ld_line .cont img{margin:-3px 9px 0 0;vertical-align:top} |
18 | /* //UI Object */ |
HTML Code
1 | <!-- UI Object --> |
2 | <div class="ld_line"> |
3 | <div class="lft"></div> |
4 | <div class="cont"><img src="https://i-blog.csdnimg.cn/blog_migrate/cb55dc884e0976c241f1aa5d8d6532b0.gif" width="17" height="17" alt=""><strong>데스크홈</strong> 로딩 중입니다.</div> |
5 | <div class="rgt"></div> |
6 | </div> |
7 | <!-- //UI Object --> |
本文介绍了一种用于DeskHome加载过程中的样式设置方法及其实现细节,包括CSS样式重置、图片背景加载等,通过具体的HTML和CSS代码示例展示了如何创建统一且简洁的页面风格。
1万+

被折叠的 条评论
为什么被折叠?



