静态HTML网页设计作品——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业

HTML5期末大作业

文章目录

  • HTML5期末大作业
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现

一、作品展示

静态HTML网页设计作品——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业_第1张图片
静态HTML网页设计作品——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业_第2张图片
静态HTML网页设计作品——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业_第3张图片
静态HTML网页设计作品——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业_第4张图片

二、文件目录

静态HTML网页设计作品——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业_第5张图片

三、代码实现


DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>熊二订票系统title>
<link rel="stylesheet" type="text/css" href="css/home.css" />
head>

<body>

   <div class="header">
   		<div class="inner">
   			<div class="logo">
   <a href="index.html" title="火车票"><img src="picture/logo.png" width="350" height="60"/>a>
   			div>
   			<div class="headlink">
   				<a href="login.html">登录a>
   				 | 
   				<a href="zhuce.html">注册a>
                 | 
			  <a href="login.html">▶注销a>
   				
   				
   			div>
   		div>
   div>

   
<div class="middle">
   <div class="cont">
   
       <div class="class">
         <ul>
           <h3 style="color:#FFF;">栏目分类h3>
           <a href="#" class="net"><li>申请订票li>a>
           <a href="#" class="_all2"><li>火车时刻表li>a>
           <a href="#" class="_all3"><li>我的火车票li>a>
           <a href="#" class="_all4"><li>修改密码li>a>
           <a href="#" class="_all5"><li>联系我们li>a>
         ul>
       div>
       
       
     <div class="class_a">
      
           <div class="all1">
             <h4 style="color:#fff">申请订票h4>
             <form runat="server" method="get" action="">
             <table width="800" height="300" style="margin:auto; margin-top:50px; border:1px solid #FFF;" border="1" cellpadding="0" cellspacing="0" >
  <tr>
    <td width="120">姓名:td>
    <td width="277.6"><input style="width:250px; background:none;" type="text" /><span>*span>td>
    <td width="120">身份证:td>
    <td width="277.6"><input style="width:250px; background:none;" type="text" /><span>*span>td>
  tr>
  <tr>
    <td width="120">联系电话:td>
     <td width="277.6"><input style="width:250px; background:none;" type="text" /><span>*span>td>
    <td width="120">备用电话:td>
    <td  width="277.6"><input style="width:250px; background:none;" type="text" />td>
  tr>
  <tr>
    <td width="120">车次:td>
    <td width="277.6"><select  style="width:250px; background:none; border:0; outline:none; color:#CCC">
      <option>C6402option>
      <option>G8708option>
        <option>G8715option>
       
    select><span>*span>td>
    <td width="120">起点站:td>
    <td><input style="width:250px; background:none;" type="text" /><span>*span>td>
  tr>
  <tr>
    <td width="120">终点站:td>
    <td><input style="width:250px; background:none;" type="text" /><span>*span>td>
    <td width="120">出发日期:td>
    <td><input  style="width:250px; background:none;" type="datetime-local" /><span>*span>td>
  tr>
  <tr>
    <td>备注:td>
    <td colspan="3">
    <textarea placeholder="有需要请详细填写!" style="; color:#FFF; outline:none;resize:none;width:670px; height:70px; border:0; background:none;"   name="" cols="0" rows="0">textarea>td>
    tr>
table>
<div class="tom" style="margin-top:20px;">
<input name="clear" style="width:80px; height:30px;" type="reset" value="清空" />

<input name="play" style="width:80px; height:30px; " type="submit" value="预定" />

div>
<span style="float:right;">注:标注*为必填项!span>
form>                     
   div>
   
  
           <div class="all2">
           <h4 style="color:#fff">火车时刻表h4>
        <iframe style="border:0; background:rgba(255,255,255,0.5);" scrolling="auto" src="http://www.chepiao100.com/application/views/statics/doc/demo/yupiao.php" width="1000" height="544">iframe>
           div>
    
     
           <div class="all3">
           <h4 style="color:#fff">我的火车票h4>
           
           div>
          
              
           <div class="all4" id="all4">
           <h4 style="color:#fff">修改密码h4>
           div>
           
             
              
           <div class="all5">
          <h4 style="color:#fff">  联系我们h4>
          
       
          div>
              
         div>
          
   div>
   div>
   
   
   
<div class="foot">
      
     <p>
     火车订票版权所有
     <br />
     重庆工程学院
     p>
    div>

body>
<script src="js/jquery.min.js">script>
<script src="js/home.js">script>

html>



你可能感兴趣的:(html网页设计作业,学生DW网页设计作业成品,HTML5期末大作业,css,html,前端,大作业,css3)