Welcome, Old Sport!

制作简单的联系页面(Contact Page)

by ilikecss ON 2012/08/14 6388

制作简单的联系页面(Contact Page)今天闲着蛋疼,一直想做个Contact Page把站点完善,然后就着手制作我的地图,首选当然是谷歌地图了,当然国外也有不少收费的地图制作在线工具。联系页面(Contact Page)不需要太复杂,复杂了别人也不会详细看,把重要的联络信息交代清楚就OK了,附加一张谷歌地图,从事设计的朋友可以画蛇添足一下。不嫌弃的朋友可以在最后下载试用,把自己制作的地图替换就可以了。

Step1. 创建地图

打开谷歌,然后选择地图,把自己的地址输入进去就会自动生成地图,然后调整好适当的大小,Print Screen截屏。打开Photoshop软件,新建一个屏幕尺寸的文件然后Ctrl+V粘帖刚才的截屏。把地图多余的部分去除,到此就算完成了。

Step2. 创建HTML

<div class="demo">
    <div class="say_hello">
        <h1>Say Hello</h1>
        <p><a href="mailto:airoschou@sunflowamedia.com" class="arrow">airoschou@sunflowamedia.com</a></p>
        <p>No.7, ShangNan Road<br>Pudong District, Shanghai, China<br>Telephone  8621 13818541904</p>
        <p><a href="http://weibo.com/sunflowamedia" class="arrow">Sina Microblog</a></p>
        <p><a class="arrow" href="http://ditu.google.cn/maps?saddr=%E6%9C%AA%E7%9F%A5%E9%81%93%E8%B7%AF&hl=zh-CN&ie=UTF8&sll=31.167857,121.497653&sspn=0.007482,0.009645&geocode=FTCd2wEdvt49Bw&brcurrent=3,0x35b27a4f25879eb1:0xbd6cd4370b6f9c12,0,0x35ad8c73cd3952c7:0xbb190e9364c4e592%3B5,0,0&mra=mr&t=m&z=17">Google Map</a></p>
    </div>
</div>

Step3. 创建CSS

/* Demo */
.demo { width:780px; 
		height:600px; 
		position: relative; 
		background:url(../img/map-access.jpg) no-repeat;
}
.say_hello { 
		background: #FFFFFF;
		position: absolute;
		width: 230px;
		top: 20px;
		left:0;
		z-index: 100;
		padding: 0 10px 10px 10px;
}
.say_hello h2 {
		width: 200px;
		font-size: 40px;
		border-bottom: 5px solid #000;
}
.say_hello p { margin-top: 10px;}
.arrow {
    background: url("../img/contact-arrow.png") no-repeat 10px center white;
    display: block;
    height: 35px;
    line-height: 35px;
    margin-left: -44px;
    padding-left: 44px;
}
10条评论
  1. 蜗牛前来支持啦~~~~~~~~~~

  2. #2

    啄木游弋说道:

    这个联系我的页面有点洋气了,至少我目前是不需要滴。

  3. #3

    Q_Queenie说道:

    :cool: :cool:
    真的很实用~~
    谢谢博主的分享
    支持

  4. #4

    Q_Queenie说道:

    对position的属性不太了解~~

  5. #5

    Michael Kors说道:

    很实用

  6. #6

    Michael Kors说道:

    很实用,
    我正想做一个联系业面,从google 就找到来这里了




TOP