现在网上很多已经写好的名片, 但是感觉写的比较乱, 这边给一个好看的名片以及各种不同颜色的搭配, 并且兼容手机浏览器打开的名片.
自己也做了一些官网以及后台的界面, 但是并没有用到下面的代码, 我觉得挺时尚的, 就搞出来一个模型, 主要是用 position 来定位,
给一个白色的圆, 然后在用另一个圆放在上面, 当然要设置 z-index, 没什么难得, 自己想做一些项目, 要是有需要的, 可以来找我!
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 名片 </title>
- <style>
- .mod{
- position: absolute;
- width: 400px;
- height: 250px;
- left: 40%;
- top:20%;
- }
- .mod_tom{
- width: 400px;
- height: 150px;
- background: #A0A0A0;
- border-radius: 10px;
- border: 1px solid #A0A0A0;
- margin-top: 100px;
- z-index: 1;
- }
- .mod_banyuan{
- position: relative;
- left: 60px;
- bottom: 75px;
- width: 150px;
- height: 150px;
- border-radius: 0 0 75px 75px;
- background: white;
- z-index: 2;
- }
- .mod_url{
- position: absolute;
- left: 72px;
- bottom: 85px;
- width: 120px;
- height: 120px;
- border-radius: 65px 65px 65px 65px;
- /*background:#F7EED6 ;*/
- background: url(img/img.jpg);
- z-index: 3;
- border: 3px solid #A0A0A0;
- }
- .mod_span{
- position: relative;
- left: 10px;
- bottom: 70px;
- }
- .mod_span span{
- position: relative;
- margin: 0 0 0 10px;
- font-size: 16px;
- color: #333333;
- }
- </style>
- </head>
- <body>
- <div class="mod">
- <div class="mod_tom">
- <div class="mod_url">
- <!--<img src="img/img.jpg"/>-->
- </div>
- <div class="mod_banyuan">
- </div>
- <div class="mod_span">
- <span id="">
- 姓名:
- <span id="">
- 123
- </span>
- </span>
- <span id="">
- 性别:
- <span id="">
- 456
- </span>
- </span>
- <span id="">
- 电话:
- <span id="">
- 789
- </span>
- </span>
- <span id="">
- 邮编:
- <span id="">
- 000
- </span>
- </span>
- </div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/44487/26b437c790c458e04e14ab545949aa84.html