结合前两次课所学内容,完成一个简单的静态网页制作------微信主页。制作结果与微信主页的页面相同。如图:
下面将源码及css文件附上。需要文件的可以点击文章后面的链接下载文件。
一、源码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<link rel="stylesheet" type="text/css" href="weixin.css">
<title>微信,是一个生活方式</title>
</head>
<body>
<!-----------设置容器-------------->
<div class="container">
<!----头部----->
<div class="head">
<a href="#"><img class="logo"
src="./weixin/weixin_logo1a4999.png" alt="微信"></a>
<ul class="nav">
<li><a class="curr" href="#" ><span>首页</span></a></li>
<li><a href="#" ><span>下载</span></a></li>
<li><a href="#" ><span>帮助与反馈</span></a></li>
<li><a href="#" ><span>公众平台</span></a></li>
<li><a href="#" ><span>开放平台</span></a></li>
<li><a href="#"><span>微信网页版</span></a></li>
<li><a href="#"><span>表情</span></a></li>
</ul>
</div>
<!---正文------>
<div class="content">
<!---正文第一部分------>
<div class="intro">
<h1 style="font-size:26px;font-weight:normal;">
<span>微信,是一个生活方式</span></h1>
<p>超过三亿人使用的手机应用</p>
<p>支持发送语音短信、视频、图片和文字</p>
<p>可以群聊,仅耗少量流量,适合大部分智能手机</p>
<a href="#" class="btn_download left">免费下载<b></b></a>
<a class="left btn_download_fromphone" href="#"></a>
<div class="clr"></div> <!--取消浮动-->
<div style="line-height:1.5; margin-top:10px;">
<ul class="weixin_home_link">
<li><span class="dot"></span>
<a href="" >忘记了微信帐号或密码?</a></li>
<li><span class="dot"></span>
<a href="" >提示“在新设备登录,需要验证手机”?</a></li>
<li><span class="dot"></span>
<a href="" >自助解除登录或功能限制</a></li>
<li><span class="dot"></span>
<a href="" >冻结或解冻微信帐号</a></li>
</ul>
</div>
<div class="img_intro"> <!--浮动并设间距-->
<ul> <li>
<!--设置图片边框、图片大小。-->
<img src="weixin/spacer0ca6c3.gif" ></img>
<p><span>Mac版微信来了!<br/>
<span><a>了解更多</a></span></span>
</p>
</li></ul>
</div>
</div>
<!---正文第二部分------>
<ul class="func"> <!--设置背景图,设置行距-->
<li class="func_msg">
<a href="#"><b></b></a>
<h2>微信网页版</h2>
<p>扫一扫二维码</p>
<p>就能在浏览器上使用微信</p>
<p><a href="#">了解更多</a></p></li>
<li class="func_fast">
<a href="#"><b></b></a>
<h2>Mac版微信</h2>
<p>极致简洁,迅捷沟通</p>
<p><a href="#">了解更多</a></p></li>
<li class="func_share">
<a><b></b></a>
<h2>视频聊天</h2>
<p>打开微信,找到好友</p>
<p>然后面对面的聊聊吧</p></li>
</ul>
<div class="update_diary">
<h2>最新消息</h2>
<ul>
<li><span class="right">03-25</span> <!--向右浮动-->
<a href="#">微信表情平台投稿页面上线</a>
<span style="color:red;font-size:11px;">(New)</span></li>
<li><span class="right">03-24</span>
<a href="#">Android 5.2.1正式版发布</a>
<span style="color:red;font-size:11px;">(New)</span></li>
<li><span class="right">03-21</span>
<a href="#">iPhone 5.2.1正式版发布</a>
<span style="color:red;font-size:11px;">(New)</span></li>
<li><span class="right">02-26</span>
<a href="#">Mac 1.0正式版发布</a></li>
<li><span class="right">01-23</span>
<a href="#">BlackBerry10 3.0正式版发布</a></li>
<li><span class="right">01-23</span>
<a href="#">BlackBerry 3.5 正式版发布</a></li>
<li><span class="right">01-22</span>
<a href="#">WindowsPhone8 5.1正式版发布</a></li>
</ul>
<div style="margin:10px 0 5px;"><a href="#">查看更多</a></div>
<div class="feed_maillist" style="margin-right:15px;">
<span class="ico_contactus"></span> <!--显示微信图标-->
<div class="contactus"><a href="#">联系我们</a></div>
</div>
<div class="clr"></div> <!--取消浮动-->
</div>
<!---正文第三部分------>
<div class="footer" style="padding:10px 0;">
<div style="float:left;text-align:left;">
<a href="#">关于腾讯</a>
<span class="graytext"> | </span>
<a href="#">服务条款</a>
<span class="graytext"> | </span>
<a href="#">客服中心</a>
<p>? 1998 - 2014 Tencent Inc. All Rights Reserved</p></div>
<div style="float:right;">
<a href="#">简体中文</a> |
<a href="#">繁体中文</a> |
<a href="#">English</a></div>
<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>
二、css文件:
/*------------------------默认设置-------------------------------*/
/*设置背景图片、默认字体*/
body, h1, h2, h3, ul, li {padding:0; margin:0;}
body {font-size: 14px;font-family: "Lucida Grande", "Lucida Sans Unicode",
Helvetica, Arial, Verdana, sans-serif;
background: url(weixin/weixin_bg0ec594.jpg) repeat-x;}
ul, li {list-style:none;margin: 0;}
p { margin:0.33em 0;}
h2 {font-size:14px; font-weight:bold;}
img {border:0;}
a {text-decoration: none;color: #609700;
cursor: pointer;outline: none;}
a:hover {text-decoration:underline; color:#333; }
.clr {clear:both; height:1px; overflow:hidden;}
.left{float:left;}
.right{float:right;}
/*设置容器居中及宽度等*/
.container {width: 968px;margin: 0 auto;padding: 0 10px;text-align: left;}
/*-------------------头部设置--------------------------------*/
/*设置头部背景图片及高度*/
.head {height:75px;margin-top:0px;
background: #333 url(weixin/weixin_bg_top0ec594.jpg) repeat-x;}
/*微信图片向左浮动*/
.logo {float: left;margin-top: 9px;}
/*列表向右浮动*/
.nav {float: right;padding-top: 21px;}
/*列表选项向左浮动*/
.nav li {float: left;}
/*列表内链接的设置*/
.nav a {display: inline-block;padding-left: 16px;margin: 0 2px;
line-height: 33px;color: #FFFFFF;text-decoration: none;}
/*列表选项内字体设置*/
.nav a span {display: inline-block;display: block\9;
padding-right: 16px;cursor: pointer;}
/*设置选项内容加粗*/
.nav a.curr, .nav a:active {font-weight: bold;text-decoration: none;
background: url(../images/weixin/weixin_icon0ec594.png) no-repeat scroll 0 -192px;}
/*获得选项边框,以下四项顺序不能变*/
.nav a.curr,
.nav a:hover {*margin:0 1px 0 2px; font-weight:lighter; text-decoration:none;
background:url(weixin/weixin_icon0ec594.png) no-repeat scroll 0 -144px;color:#FFFFFF;}
.nav a.curr span,
.nav a:hover span {
background: url(weixin/weixin_icon0ec594.png) no-repeat scroll right -144px;
color: #FFFFFF;}
/*----------------------正文第一部分-----------------------------------*/
/*设置正文相对位置*/
.content {position:relative;}
/*字体设置*/
.intro {
height: 424px;background: #e0dee1 url(weixin/weixin_bg0ec594.jpg) repeat-x 0 -75px;
font-family: "微软雅黑","黑体", "Lucida Grande", "Lucida Sans Unicode", Helvetica,
Arial, Verdana, sans-serif;margin-bottom: 44px;}
/*内边距设置*/
.intro h1 {padding: 45px 0 3px;}
/*字体设置*/
.intro p {font-size: 16px;color: #979797;}
/*设置字体边框及位置*/
a.btn_download {display:block; width:224px; height:64px; margin-top:15px;
background:#348903;position:relative;color:#fff;font-size:16px;font-weight:bold;
text-align:center;line-height:64px;}
/*设置背景图*/
a.btn_download b{display:block; position:absolute;float:left;top:0;left:0;
width:224px; height:64px; background:url(weixin/bt_i_down171a1e.png) no-repeat -1px 0px;
position:absolute;}
/*获焦点时变换背景图*/
a.btn_download:hover b{background-position:-1px -64px;}
/*设置二维码扫描图*/
a.btn_download_fromphone{background:url(weixin/bt_i_down171a1e.png) no-repeat -616px -4px;
width: 42px;height: 44px;margin-top: 25px;margin-left: 19px;}
/*二维码获焦点时变换背景图*/
a.btn_download_fromphone:hover{background-position: -616px -56px;}
/*设置列表元素的行距*/
.weixin_home_link li {line-height: 1.8;color: #999;margin-right: 30px;}
/*设置列表前端的点*/
.weixin_home_link .dot {float: left;display: block;margin: 10px 11px 0px 0px;
height: 6px;width: 6px;border-radius: 5px;background-color: #999;}
/*拉近点与元素的距离*/
.weixin_home_link li a {margin-left: -7px;}
/*设置图片大小及位置*/
.img_intro {position: absolute;top: 25px;right:70px;width: 490px;
line-height: 18px;background: #dddddd;}
.img_intro ul{background:none repeat scroll 0 0 #DDDDDD;}
.img_intro img{width:490px;height:280px;
background:url(weixin/mac_wechat1c7cb2.png) no-repeat 0 0;}
/*设置字体*/
.img_intro p {text-align: center;font-size: 14px;color: #1b1b1b;line-height: 20px;}
/*-----------------正文第二部分--------------------------*/
/*左边部分*/
.func {line-height:1.5em;}
/*设置列表元素宽度及浮动*/
.func li {float: left;width: 216px;}
/*设置链接内边距*/
.func a {display: block;margin-top: 3px;cursor: pointer;}
/*将链接图片设置为背景*/
.func a b {display: block;width: 200px;height: 114px;
background: url(weixin/weixin_func1c00a1.png) no-repeat;}
/*设置链接背景图*/
.func .func_fast a b {background-position: -217px 0;}
/*设置链接背景图*/
.func .func_share a b {background-position: -436px 0;}
/*设置内边距*/
.func h2 {padding-top: 6px;}
/*设置颜色*/
.func p {color: #999;}
/*右边部分*/
/*设置左边距*/
.update_diary {margin-left: 650px;}
/*设置内边距*/
.update_diary ul {padding-left: 12px;}
/*设置元素属性*/
.update_diary li {list-style: disc outside;line-height: 1.8;color: #999;
margin: 5px 0;}
/*获焦点时改变颜色*/
a:hover {text-decoration: underline;color: #333;}
/*设置微信图片*/
.ico_contactus {display: block;width: 32px;height: 32px;float: left;
position: relative;top: 14px;left: 0;
background: url(weixin/weixin_icon0ec594.png) no-repeat scroll 0 -240px;}
/*设置文字边距*/
.contactus {padding: 20px 0 0 40px;}
/*设置文字颜色等*/
.feed_maillist a {font-weight: bold;text-decoration: none;color: #000;}
/*-----------------正文第三部分--------------------------*/
/*取消浮动,设置边距等*/
.footer {clear: both;padding: 23px 0 4px;margin-top: 22px;font-size: 12px;
border-top: 1px solid #d4dadf;text-align: center;color: #D8D8D8;}
/*设置边距*/
.footer a {margin: 0 4px;}
/*设置字体颜色*/
.footer a:link, .footer a:visited {color: #888;text-decoration: none;}
/*获焦点时加下划线*/
.footer a:hover {color: #888;text-decoration: underline;}
/*设置字体颜色等*/
.footer p {color: #888888;font-size: 11px;margin: 5px 0;}
/*设置颜色*/
.graytext {color: #999;}
该网页相对简单,源码文件链接为: 点击打开链接