web前端设计与开发大作业(二）----酒店预约界面

最新推荐文章于 2023-12-28 10:52:40 发布

原创

最新推荐文章于 2023-12-28 10:52:40 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5

本文主要介绍了使用HTML5和CSS3完成一个酒店预约界面的前端设计与开发，重点在于CSS样式的应用。

这是主体部分，写的比较简单

<body>
    <div id="top">
        <div id="logo">
            <img src="image1/logo.png" alt="logo" width="100px">
        </div>
        <div id="land">
            <table>
                <tr>
                    <td>
                        <a href="登陆.html">登录</a>
                    </td>
                    <td>&nbsp;</td>
                    <td>
                        <a href="注册.html">注册</a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="nav">
            <div id="navCenter">
                <ul>
                    <li>
                        <a href="bigHousework2.html">酒店预订</a>
                    </li>
                    <li> <a href="#">酒店团购</a> </li>
                    <li><a href="#">酒店环境</a> </li>
                    <li><a href="#">我的订单</a> </li>
                    <li>
                        <a href="bigHousework.html">返回首页</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="container">
        <div id="main">
            <div id="Introduce">
                <p>住宿环境</p>
                <p2>安徽省黄山市</p2>
            </div>
            <div id="image">
                <a href="image1/room1.jpg">
                    <img src="image1/room1.jpg" alt="酒店图片" width="780px">
                </a>
            </div>
            <div id="imageRight">
                <a href="image1/room1.jpg">
                    <img src="image1/room1.jpg" alt="酒店实图" width="200px">
                </a>
                <a href="image1/room2.jpg">
                    <img src="image1/room2.jpg" alt="酒店实图" width="200px">
                </a>
                <a href="image1/room3.jpg">
                    <img src="image1/room3.jpg" alt="酒店实图" width="200px">
                </a>
                <a href="image1/room5.jpg">
                    <img src="image1/room5.jpg" alt="酒店实图" width="200px">
                </a>
            </div>
            <div id="intrruction">
                <div id="intrructionLeft">
                    <table>
                        <tr>
                            <td>
                                <img src="image1/house.png" width="30px">
                            </td>
                            <td>
                                <p class="head">整套出租</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>房屋面积：</p>
                            </td>
                            <td>
                                <p>30平方米</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>房屋类型：</p>
                            </td>
                            <td>
                                <p>1室0厅0厨1阳台</p>
                            </td>
                        </tr>
                    </table>
                    <br>
                </div>
                <div id="intrructionLeft">
                    <table>
                        <tr>
                            <td>
                                <img src="image1/people.png" width="30px">
                            </td>
                            <td>
                                <p class="head">宜住2人</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>房客独享整套房屋</p>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <p>大小适中</p>
                            </td>
                        </tr>
                    </table>
                    <br>
                </div>
                <div id="intrructionLeft">
                    <table>
                        <tr>
                            <td>
                                <img src="image1/bed.png" width="30px">
                            </td>
                            <td>
                                <p class="head">共2张</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>类型：</p>
                            </td>
                            <td>
                                <p>单人床x张</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>规格：</p>
                            </td>
                            <td>
                                <p>1.2mx2m</p>
                            </td>
                        </tr>
                    </table>
                    <br>
                </div>