您的位置:首页 > 其它

盒布局和界面设计

2016-02-09 11:19 190 查看
盒布局:

代码:

1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4     <meta charset="UTF-8">
5     <title>为元素添加内容</title>
6     <style type="text/css">
7         #nav {
8             margin: 20px auto;
9             width: 200px;
10             border: 1px solid #ff9900;
11             padding: 20px;
12             line-height: 22px;
13             font-size: 18px;
14         }
15         #nav a{
16             display: block;
17             font-size: 12px;
18             line-height: 22px;
19             color: #00f;
20         }
21         /*用[href$=xlsx]来确定为谁添加前缀或后缀 */
22         a[href$=xlsx]:before{
23             content: "网页";
24         }
25         a[href$=docx]:after{
26             content: "哈哈";
27         }
28         a[href$=vsdx]:after{
29             /*可将路径添加 */
30             content: attr(href);
31         }
32     </style>
33 </head>
34 <body>
35 <div id="nav">
36     <a href="文件/1.xlsx">资料</a>
37     <a href="文件/2.vsdx">元素</a>
38     <a href="文件/3.docx">界面</a>
39 </div>
40 </body>
41 </html>


添加内容

              
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: