Lesson_for_java_day03---微信主页面的制作

最新推荐文章于 2017-12-12 08:35:03 发布
最新推荐文章于 2017-12-12 08:35:03 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： lessonForJava 文章标签： html 网页制作 静态网页 练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013233075/article/details/23120795
版权

      结合前两次课所学内容，完成一个简单的静态网页制作------微信主页。制作结果与微信主页的页面相同。如图：



下面将源码及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;}

该网页相对简单，源码文件链接为： 点击打开链接

记得要幸福56
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 实战之模拟微信首页界面 (java实现)
程序猿追的博客
04-04 1万+
Android 实战之模拟微信首页界面 (java实现)
lesson_1--点了一个小灯_lesson_1--点了一个小灯_
10-02
用51单片机点亮小灯，左移右移，将整个系统连接好固定在相同的测试环境下，通过键盘输入控制液晶显示各个界面。经整体测试系统基本稳定，能够达到基本要求。
Java微信开发-微信java开发接入平台实例
花2不谢
12-08 9255
微信上接入平台的demo是PHP的，没得java的，所以我自己做接入的时候遇到了一点小问题。用java做带薪开发，首先就要先通过微信的接入配置，大概原理就是微信往服务器发送一些数据，然后在服务器端做一些数据的处理，再返回数据就行了。 微信官方的名称是： 验证服务器地址的有效性 下面是微信官方的文档： 开发者提交信息后，微信服务器将发送GET请求到填写的服务器地址URL上，GET
[微信开发] 微信网页授权Java实现
weixin_33929309的博客
05-20 331
功能：主要用于在用户通过手机端微信访问第三方H5页面时获取用户的身份信息（openId,昵称,头像,所在地等。。）可用来实现微信登录、微信账号绑定、用户身份鉴权等功能。 开发前的准备： 1、需要有一个公众号，拿到AppID和AppSecret； 2、进入公众号开发者中心页配置授权回调域名。具体位置：接口权限-网页服务-网页账号-网页授权获取用户基本信息-修改 注...
主页的制作
PUBG_DAZHENTAN的博客
12-12 306
昨天我们学习的一些新的标签，我们学习了div标签，这个标签可以包含其他标签，这个标签相当于一个盒子可以用来承装其他元素。 我们还学习了一些其他的属性，比如浮动float，属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能
ziyu_lesson_auto:基于java的简单的教师-课程智能排课系统
05-14
ziyu_lesson_autoziyu_lesson_auto 是基于开源项目Wetech-Admin[] 的基础上修改而成， 项目是基于 Spring Boot 2.0 + Mybatis 的轻量级后台管理系统，适用于中小型项目的管理后台以及小学，初中和高中课程智能排课...
Servlet1-5lesson-demo.rar_One Lesson
09-14
Java servlet one to fifth lesson examples
Java_Essential_lesson_12.rar_The Lesson
09-22
The Java盲 2 platform provides internationalization features that let you separate culturally dependent data from the application (internationalization) and adapt it to as many cultures as needed ...
VB-net-New.rar_The Lesson
09-24
VB.net document. the lesson with the exercise for beginner of the learner vb.net
java聊天室源代码(练习项目)
热门推荐
u013233075的专栏
05-13 3万+
一、服务端： 二、客户端：
Java中实现滚动条自动滚动到TextArea的末尾(小知识点)
u013233075的专栏
05-13 9214
在设置TextArea滚动条时，
Lesson_for_java_day11--课堂练习
u013233075的专栏
04-17 2349
练习一： 练习二：
Lesson_for_java_day15--java小练习：贪吃蛇游戏(在控制台上操作)
u013233075的专栏
04-24 1677
目的：编写yig
Lesson_for_java_day25--java中GUI实例(键盘鼠标事件、菜单栏、自定义弹窗、调用弹窗)
u013233075的专栏
05-13 1639
一、键盘鼠标事件：
Lesson_for_java_day21--java的多线程练习(ATM存取款机、多窗口卖票系统、5人赛跑)
u013233075的专栏
05-04 1415
一、ATM存取款机： 二、多窗口卖票系统：
Lesson_for_java_day06--练习--if语句、for循环、运算表达式、自增运算等
u013233075的专栏
04-10 1290
练习题：
Lesson_for_java_day05--java的三目运算符、if语句、switch语句、while循环、for循环
u013233075的专栏
04-09 1167
/* --------------三目运算符、if语句、switch语句、while循环、for循环-------------------------------- 三目运算符： 语法格式：boolean类型表达式 ? 表达式1 : 表达式2; 三目运算符的利弊： 利：简化了if else语句，提高可读性和编程效率。 弊：因为是一个运算符，所以运算完必须返回一个结果，而if else语
Lesson_for_java_day20--java的多线程——生产者消费者模式(优化网上生产馒头的案例)
u013233075的专栏
05-03 1157
一、生产者消费者模式：
可以这样创建么，KEY `idx_lesson_id` (`lesson_id`,`section_id`) USING BTREE
最新发布
05-27
CREATE INDEX idx_lesson_id ON table_name (lesson_id, section_id) USING BTREE; ``` 这个语句创建了一个名为 `idx_lesson_id` 的索引，它包含了 `lesson_id` 和 `section_id` 两个列。`USING BTREE` 表示这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值