標籤：
Day02 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>先來看一下
編程用圖如下
實現代碼如下
<!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>實現代碼如下
<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>步驟：
主要代碼如下
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"); } }Android之Web篇：Day02Html和Css實戰WebView實現手機顯示網頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
