JavaWeb基础知识：Html和Css实战WebView实现手机显示网页
Posted 万合天宜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb基础知识：Html和Css实战WebView实现手机显示网页相关的知识，希望对你有一定的参考价值。
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");
以上是关于JavaWeb基础知识：Html和Css实战WebView实现手机显示网页的主要内容，如果未能解决你的问题，请参考以下文章