JavaWeb基础知识：Html和Css实战WebView实现手机显示网页

Html、Css实战和WebView实现手机显示网页

1.html与css实战

1.1 程序猿小网页

• 先来看一下效果图
  

• 编程用图如下
  

• 实现代码如下

  
  
  
      
          
          
  
          
  
      
  
      
  
          
  
              
          
  
          
  
              
                  
  爱学习，爱编程，爱咖啡可乐
                  
          爱挑战，爱钻研，爱打游戏   
                  
              爱晚起，也爱工作到深夜
                  
            我擅长技术，崇尚简单和懒惰
                  
          我神秘而孤僻，沉默而爱憎分明
                  
  DON'PANIC!   I'm a programer!
              
  
          
      
  
  
  

1.2 人人网注册页面

• 先来看一下效果图
  

• 编程用图如下

• 实现代码如下

  
  
      
          
          
      
      
          
  
              
  免费开通人人网账号
              
  
                  
  
                      
  注册邮箱：
                      
  
                      
                  
  
                  
  
                      
  
                      
  你还可以使用账号 注册或者手机注册
                      
                  
  
                  
  
                      
  创建密码：
                      
  
                      
                  
  
                  
  
                      
  真实姓名：
                      
  
                      
                  
  
                  
  
                      
  性别：
                      
  
                          男
                          女
                      
                  
  
                  
  
                      
  生日：
                      
  
                          
                              1990
                              1991
                              1992
                              1993
                              1994
                              1995
                              1996
                              1997
                              1998
                          
                          年
  
                          
                              1
                              2
                              3
                              4
                              5
                              6
                              7
                              8
                              9
                              10
                              11
                              12
                          
                          月
  
                          
                              1
                              2
                              3
                              4
                              5
                              6
                              7
                              8
                              9
                              10
                              11
                              12
                          
                          日
  
                      
                  
  
                  
  
                      
  我现在：
                      
  
                          
                              在上学
                              在工作
                              在打球
                              在吃饭
                          
                      
                  
  
                  
  
                      
  
  
                      
                      
  
                          
                            
                          看不清，换一张？
                      
                  
                  
  
                      
  验证码：
                      
  
                  
                  
  
                      
  
                      
  
                          
                      
                  
              
  
          
  
      
  
  

1.3 7881主页

• 先来看一下效果图

• 实现代码如下

  
  

  
      
      
  
      
  
  
  
  
      
  
          
          登录
          注册
      
  
      
  
          
      
  
      
  
          
          
      
  
      
  
          
      
  
      
  
          
          
  
      
  
      
  
          
  
              
               
              
  
              (c) Copyright 2016 Pinger. All Rights Reserved.
          
      
  
  

2. WebView实现手机显示网页

• 效果图

• 目的：使用WebView控件在Android手机中显示7881网页

• 步骤：

  • 先把做好的7881网页放入tomcat服务器,保证在浏览器中能访问到7881网页
  • 建立Android Application工程，编辑布局文件，写一个WebView控件
  • 在MainActivity中获取到布局文件中WebView的控件对象，然后使用loadUrl();方法，把浏览器中访问7881的地址作为参数进行访问，并且设置访问网络权限
  • 运行android项目即可显示网页了

• 主要代码如下

• activity_main.xml代码如下

• 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");
      }  
  }