猿人部落 › 主页 › 资讯 › 查看内容

前端大作业（期末复习）

2019-7-26 18:08 发布者: 蚂蚁部落评论 0 查看 883

小练习 .shangmian{ width:100% ; height:20% ; background-size:cover ; ba

<html>
    <title>小练习title>
    <head>  
        <style>
.shangmian{
    width:100% ;
    height:20% ;
    background-size:cover ; 
    background-image:url(1.jpeg);
}
.title{
    font-size:50px ;    
    color:#AACECF;
}
.menu {
    align:center; 
    width:20%;
    height:70% ;
    background-color:#095B66;
}
.op{
    border:solid ;
    margin:10 ;
    background-color:#E6D70C ;
    width:200px ;
    height:30px ;
    font-color:#CD0CE6 ;
}
.int{
    position:absolute ;
    top:150px ;
    left:300px ;
    padding:10px ;
}

.in {
    margin:10 ;
}

.table {
    position:absolute ;
    top:200px ;
    left:300 ;
    border:1px ;
    margin:10 ;
}
#ta{
    margin:10px ;
    border-collapse:collapse ;
    width:1000px;
} 

#ta th,#ta td{
    border:solid 1px ;
    width:20% ;
    padding: 3px;
    text-align:center ;
}

.bu{
    margin:10 ;
}

        style>
    head>
    <body>
        <div class="shangmian" align="center">
            <p class="title"> 优乐影院管理体系p>
        div>
        <div class="menu" align=center>
             <button class="op">查询剧目信息button><p>
            <button class="op">查询用户信息button>p><p>
            <button class="op">查询演出筹划button>p><p>
            <button class="op">查询演出票button>p>
        div>
        <div class="int">
            <label>片名:label>
            <input type="text" class="in">input>
            <label>编号:label>
            <input type="text" class="in">input>
            <label>演出厅:label>
            <input type="text" class="in">input>
            <label>国家:label>
            <select name="select" class="in" value="软件1704">
                <option>USoption>
                <option>CNoption>
                <option>CN_HKoption>
                <option>UKoption>
                <option>JPoption>
            select>   
            <button>添加button> 
            <button>取消button>
        div>
        <div><hr color=black>div>
        <div class="table">
            <table  id="ta">
                <tr class="Tr">
                    <th>
                        片名
                    th>
                    <th>
                        编号
                    th>
                    <th>
                        演出厅
                    th> 
                    <th>
                        国家
                    th>
                    <td>使用td>
                tr>
                <tr>
                    <td>蜘蛛侠－好汉任务td>
                    <td>１td>
                    <td>0002td>
                    <td>UStd>
                    <td><button>删除button><button>修改button>td>
                tr>
                <tr>
                    <td>蜘蛛侠－好汉任务td>
                    <td>１td>
                    <td>0002td>
                    <td>UStd>
                    <td><button>删除button><button>修改button>td>
                tr>
                <tr>
                    <td>蜘蛛侠－好汉任务td>
                    <td>１td>
                    <td>0002td>
                    <td>UStd>
                    <td><button>删除button><button>修改button>td>
                tr>
                <tr>
                    <td>蜘蛛侠－好汉任务td>
                    <td>１td>
                    <td>0002td>
                    <td>UStd>
                    <td><button>删除button><button>修改button>td>
                tr>
                <tr>
                    <td>蜘蛛侠－好汉任务td>
                    <td>１td>
                    <td>0002td>
                    <td>UStd>
                    <td><button>删除button><button>修改button>td>
                tr>
                <tr>
                    <td>蜘蛛侠－好汉任务td>
                    <td>１td>
                    <td>0002td>
                    <td>UStd>
                    <td><button>删除button><button>修改button>td>
                tr>
                <tr>
                    <td>蜘蛛侠－好汉任务td>
                    <td>１td>
                    <td>0002td>
                    <td>UStd>
                    <td><button>删除button><button>修改button>td>
                tr>
            table>
            <p align=center><button>1button><button>2button><button>3button><button>4button><button>...button>p>
        div>
        <div align=center class="info"><p>接洽方式：88888888 QQ:99999999 姓名：CKp><div>
    body>
html>