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

最新推荐文章于 2024-05-26 11:22:14 发布

初写程序的小白

最新推荐文章于 2024-05-26 11:22:14 发布

阅读量1.5k

点赞数

分类专栏： web web大作业文章标签： css css3 html5

本文链接：https://blog.csdn.net/weixin_46004539/article/details/106911769

版权

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

摘要由CSDN通过智能技术生成

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

<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>
                        <

最低0.47元/天解锁文章

初写程序的小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端设计与开发大作业(二）----酒店预约界面

这是主体部分，写的比较简单<body> <div id="top"> <div id="logo"> <img src="image1/logo.png" alt="logo" width="100px"> </div> <div id="land"> <table> <tr&g.
复制链接

扫一扫