Html、Css实战和WebView实现手机显示网页
1.html与css实战
1.1 程序猿小网页
先来看一下效果图
编程用图如下
-
实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#pic{
position: relative;
float: left;
}
#text{
width: 400;
height: 200;
position: relative;
float: left;
font-size: 25px;
font-family: "arial black";
margin-top: 70px;
}
</style>
</head>
<body>
<div id="pic">
<img src="img/程序猿.png" width="600" height="600"/>
</div>
<div id="text">
<b>
<p>爱<font size="6">学习</font>，爱<font size="6" color="darkred">编程</font>，爱<font size="6">咖啡可乐</font></p>
<p> 爱<font size="6">挑战</font>，爱<font size="6">钻研</font>，爱<font size="6">打游戏</font> </p>
<p> 爱<font size="6">晚起</font>，也爱<font size="6" color="darkred">工作到深夜</font></p>
<p> 我<font size="6">擅长技术</font>，崇尚<font size="6">简单</font>和<font size="6">懒惰</font></p>
<p> 我<font size="6" color="darkred">神秘</font>而<font size="6" color="darkred">孤僻</font>，<font size="6">沉默</font>而<font size="6">爱憎分明</font></p>
<p><font size="5" color="darkred">DON'PANIC! </font> I'm a programer!</p>
</b>
</div>
</body>
</html>
1.2 人人网注册页面
先来看一下效果图
编程用图如下
-
实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<h3 align="center">免费开通人人网账号</h3>
<table align="center" cellpadding="6px" cellspacing="6px">
<tr>
<td>注册邮箱：</td>
<td><input type="email" name="emial"/>
</td>
</tr>
<tr>
<td></td>
<td>你还可以使用<a href="#">账号 </a>注册或者<a href="#">手机</a>注册
</td>
</tr>
<tr>
<td>创建密码：</td>
<td><input type="password" name="password"/>
</td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text" name="realname"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="wuman"/>女
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select name="year">
<option value="year_90">1990</option>
<option value="year_91">1991</option>
<option value="year_92">1992</option>
<option value="year_93">1993</option>
<option value="year_94">1994</option>
<option value="year_95">1995</option>
<option value="year_96">1996</option>
<option value="year_97">1997</option>
<option value="year_98">1998</option>
</select>
年
<select name="month">
<option value="month_1">1</option>
<option value="month_2">2</option>
<option value="month_3">3</option>
<option value="month_4">4</option>
<option value="month_5">5</option>
<option value="month_6">6</option>
<option value="month_7">7</option>
<option value="month_8">8</option>
<option value="month_9">9</option>
<option value="month_10">10</option>
<option value="month_11">11</option>
<option value="month_12">12</option>
</select>
月
<select name="day">
<option value="day_1">1</option>
<option value="day_2">2</option>
<option value="day_3">3</option>
<option value="day_4">4</option>
<option value="day_5">5</option>
<option value="day_6">6</option>
<option value="day_7">7</option>
<option value="day_8">8</option>
<option value="day_9">9</option>
<option value="day_10">10</option>
<option value="day_11">11</option>
<option value="day_12">12</option>
</select>
日
</td>
</tr>
<tr>
<td>我现在：</td>
<td>
<select name="dosometing">
<option value="school">在上学</option>
<option value="work">在工作</option>
<option value="qiu">在打球</option>
<option value="eat">在吃饭</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<img src="img/verycode.gif" />
<a href="#">看不清，换一张？</a>
</td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" name="verycode"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="img/btn_reg.gif" />
</td>
</tr>
</table>
</form>
</body>
</html>
1.3 7881主页
- 先来看一下效果图
-
实现代码如下
<head>
<meta charset="utf-8">
<title></title>
<style>
#top {
background-color: #E4F2FC;
}
a {
position: relative;
float: right;
margin-top: 15px;
margin-right: 15px;
}
#left {
width: 33.3%;
position: relative;
float: left;
}
#center {
width: 33.3%;
position: relative;
float: left;
}
#right {
width: 33.3%;
position: relative;
float: left;
}
#bottom {
width: 100%;
position: relative;
float: left;
}
</style>
</head>
<body style="margin: 0;">
<div id="top">
<img src="img/7881/logo.png" />
<a href="#">登录</a>
<a href="#">注册</a>
</div>
<div id="ad">
<img src="img/7881/s01.jpg" width="100%"/>
</div>
<div id="left">
<img src="img/7881/i01.png" width="100%" height="50%" />
<img src="img/7881/i02.png" width="100%" height="50%" />
</div>
<div id="center">
<img src="img/7881/i05.png" height="100%" width="100%" />
</div>
<div id="right">
<img src="img/7881/i03.png" width="100%" height="50%" />
<img src="img/7881/i04.png" width="100%" height="50%" />
</div>
<div id="bottom">
<p align="center">
<input type="type" />
<input type="button" value="搜索" />
<br>
(c) Copyright 2016 Pinger. All Rights Reserved.
</p>
</div>
</body>
2. WebView实现手机显示网页
- 效果图
- 目的：使用WebView控件在Android手机中显示7881网页
-
步骤：
- 先把做好的7881网页放入tomcat服务器,保证在浏览器中能访问到7881网页
- 建立Android Application工程，编辑布局文件，写一个WebView控件
- 在MainActivity中获取到布局文件中WebView的控件对象，然后使用loadUrl();方法，把浏览器中访问7881的地址作为参数进行访问，并且设置访问网络权限
- 运行android项目即可显示网页了
主要代码如下
-
activity_main.xml代码如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<WebView
android:id="@+id/wv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout> -
MainActivity.java代码如下
package com.itheima.exam;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv = (WebView)findViewById(R.id.wv);
wv.loadUrl("http://192.168.18.25:8080/7881.html");
}
}