铁路12306首页项目

 这个首页花了三天时间完成，但是没有做完，HTML+CSS很重要，还是要好好掌握。

一、项目开始准备

*引入所需链接、内容

提示：火狐浏览器可以下载所需图片（Ctrl+i）

 <!-- 头部开始 -->

    <div class="til">

        <a href=""><img src="./images/logo@2x.png" alt="" width="200px" height="50px" class="til-img"></a>

        <div class="til_sh">

            <input type="text" placeholder="搜索车票、餐饮、常旅客、相关规定" class="til_sh_search">

            <!-- 引入字体图标步骤第三步 -->

            <a href="" class="ico"><i class="iconfont">&#xe637;</i></a>

            <div class="til_sh_list">

                <ul>

                    <li><a href="" class="col">爱心模式</a></li>

                    <li class="shuxian">|</li>

                    <li><a href="" class="col">English <span class="iconfont">&#xe6e6;</span></a></li>

                    <li class="shuxian">|</li>

                    <li><a href="" class="col">我的12306 <span class="iconfont">&#xe6e6;</span></a></li>

                    <li class="shuxian">|</li>

                    <li><a href="logo.html">登录</a></li>

                    <li><a href="">注册</a></li>

                </ul>

            </div>

        </div>

        <div class="nav-box">

            <ul>

                <li class="sta"><a href="" class="nav-hd">首页</a></li>

                <li><a href="" class="nav-hd">车票 <i class="iconfont">&#xeb8b;</i></a></li>

                <li><a href="" class="nav-hd">团购服务 <i class="iconfont">&#xeb8b;</i></a></li>

                <li><a href="" class="nav-hd">会员服务 <i class="iconfont">&#xeb8b;</i></a></li>

                <li><a href="" class="nav-hd">站车服务 <i class="iconfont">&#xeb8b;</i></a></li>

                <li><a href="" class="nav-hd">商旅服务 <i class="iconfont">&#xeb8b;</i></a></li>

                <li><a href="" class="nav-hd">出行指南 <i class="iconfont">&#xeb8b;</i></a></li>

                <li><a href="" class="nav-hd">信息查询 <i class="iconfont">&#xeb8b;</i></a></li>

            </ul>

        </div>

    </div>

    <!-- 头部结束 -->

    <!-- 轮播图开始 -->

    <div class="bd">

        <ul>

            <!--  轮播图制作第一步  -->

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </div>

    <!-- 轮播图结束 -->

    <!-- 服务开始 -->

    <div class="bd-service">

        <ul class="service-list">

            <li>

                <a href="">

                    <i></i>

                    <p>重点旅客预约</p>

                </a>

            </li>

            <li>

                <a href="">

                    <i></i>

                    <p>遗失物品查找</p>

                </a>

            </li>

            <li>

                <a href="">

                    <i></i>

                    <p>约车服务</p>

                </a>

            </li>

            <li>

                <a href="">

                    <i></i>

                    <p>便民托运</p>

                </a>

            </li>

            <li>

                <a href="">

                    <i></i>

                    <p>车站引导</p>

                </a>

            </li>

            <li>

                <a href="">

                    <i></i>

                    <p>站车风采</p>

                </a>

            </li>

            <li>

                <a href="">

                    <i></i>

                    <p>用户反馈</p>

                </a>

            </li>

        </ul>

    </div>

    <div>

        <ul class="service-box">

            <li><a href=""><img src="./images/abanner01.jpg" alt=""></a></li>

            <li><a href=""><img src="./images/abanner02.jpg" alt=""></a></li>

            <li><a href=""><img src="./images/abanner05.jpg" alt=""></a></li>

            <li><a href=""><img src="./images/abanner06.jpg" alt=""></a></li>

        </ul>

    </div>

    <!-- 服务结束 -->

    <!-- 铁路旅游开始 -->

    <div class="section">

        <div class="section-hd">

            <h3 class="section-tit col">

                铁路旅游

            </h3>

            <a href="" class="more-right">更多></a>

            <p></p>

        </div>

        <div class="travel-train">

            <ul class="travel-list">

                <li>

                    <a href="">

                        <img src="./images/243945e6-c45d-4870-9cf5-77e488068646_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游” 高品质旅游版专线列车</h3><br />

                            <i>¥</i>

                            <div class="travel-price">2560</div>

                        </div>

                    </a>

                </li>

                <li>

                    <a href="">

                        <img src="./images/fcd7173f-7651-46e7-a126-bdc199e1f6f7_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游” 陇上江南·行摄山>水陇南三</h3><br />

                            <i>¥</i>

                            <div class="travel-price">903</div>

                        </div>

                    </a>

                </li>

                <li>

                    <a href="">

                        <img src="./images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游”华夏寻根·人文始祖天水两日</h3>

                            <i>¥</i>

                            <div class="travel-price">456</div><br />

                        </div>

                    </a>

                </li>

                <li>

                    <a href="">

                        <img src="./images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游”精品旅游线路</h3><br />

                            <i>¥</i>

                            <div class="travel-price">5432</div>

                        </div>

                    </a>

                </li>

                <li>

                    <a href="">

                        <img src="./images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游”美丽甘南三日游</h3><br />

                            <i>¥</i>

                            <div class="travel-price">7256</div>

                        </div>

                    </a>

                </li>

                <li>

                    <a href="">

                        <img src="./images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游” 青海湖、茶卡2日>游</h3><br />

                            <i>¥</i>

                            <div class="travel-price">7264</div>

                        </div>

                    </a>

                </li>

                <li>

                    <a href="">

                        <img src="./images/c7c03732-3c86-4308-aea7-df747d4999e8_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游”嘉敦5日游</h3><br />

                            <i>¥</i>

                            <div class="travel-price">7684</div>

                        </div>

                    </a>

                </li>

                <li>

                    <a href="">

                        <img src="./images/d9ae79de-2f3f-4e9f-ad6e-bdc291dda92a_product_W572_H370.jpg" alt="">

                        <div class="travel-content">

                            <h3 class="travel-name">“环西部火车游” 敦煌一地三日游</h3><br />

                            <i>¥</i>

                            <div class="travel-price">2423</div>

                        </div>

                    </a>

                </li>

            </ul>

        </div>

    </div>

    <!-- 铁路旅游结束 -->

    <!-- 公告开始 -->

    <div class="news-bd">

        <div class="tab-hd">

            <ul class="list">

                <li class="list-one bg"><a href="" class="lis-on">最新发布</a></li>

                <li class="list-two"><a href="" class="lis-tw">常见问题</a></li>

                <li class="list-three"><a href="" class="lis-thr">信用信息</a></li>

            </ul>

        </div>

        <div class="tab-item" style="display:block;">

            <ul class="news-tit">

                <li>

                    <a href="">铁路旅客禁止、限制携带和托运物品目录</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">公告</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">公告</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">中国铁路上海局集团有限公司关于2022年8月22日-2022年8月</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">中国铁路上海局集团有限公司关于2022年8月22日-2022年8月</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">公 告</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">候补购票操作说明</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">关于调整互联网、电话订票起售时间的公告</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">中国铁路成都局集团有限公司关于2022年8月19日至31日加</a>

                    <span class="news-time">2022-06-17</span>

                </li>

                <li>

                    <a href="">中国铁路成都局集团有限公司关于2022年8月19日至31日加</a>

                    <span class="news-time">2022-06-17</span>

                </li>

            </ul>

            <div class="news-more">

                <a href="">更多></a>

            </div>

        </div>

    </div>

    <!-- 公告结束 -->

    <!-- 底部部分开始 -->

    <div class="footer">

        <div class="footer-con">

            <div class="foot-links">

                <h2 class="foot-con-tit">友情链接</h2>

                <ul class="foot-link-list">

                    <li><a href=""><img src="./images/link02.png" alt=""></a></li>

                    <li><a href=""><img src="./images/link03.png" alt=""></a></li>

                    <li><a href=""><img src="./images/link04.png" alt=""></a></li>

                    <li><a href=""><img src="./images/link05.png" alt=""></a></li>

                </ul>

            </div>

            <ul class="foot-code">

                <li style="width: 140px;">

                    <h2 class="foot-con-tit">中国铁路官方微信</h2>

                    <div class="code-pic">

                        <img src="./images/zgtlwx.png" alt="中国铁路官方微信">

                    </div>

                </li>

                <li style="width: 140px;">

                    <h2 class="foot-con-tit">中国铁路官方微博</h2>

                    <div class="code-pic">

                        <img src="./images/zgtlwb.png" alt="中国铁路官方微博">

                    </div>

                </li>

                <li style="width: 110px;">

                    <h2 class="foot-con-tit">12306公众号</h2>

                    <div class="code-pic">

                        <img src="./images/public.png" alt="12306公众号">

                    </div>

                </li>

                <li style="width: 110px;">

                    <h2 class="foot-con-tit">铁路12306</h2>

                    <div class="code-pic">

                        <img src="./images/download.png" alt="铁路12306">

                        <div class="code-tips">

                            官方APP下载，目前铁路未授权其他网站或APP开展类似服务内容，敬请广大用户注意。

                        </div>

                    </div>

                </li>

            </ul>

        </div>

        <div class="footer-txt" style="position: relative;">

            <p>

                <span class="mr">版权所有©2008-2022</span>

                <span class="mr">中国铁道科学研究院集团有限公司</span>

                <span> 技术支持：铁旅科技有限公司</span>

            </p>

            <p>

                <span class="mr">

                    <img src="./images/gongan.png" alt="">

                    <a href="">京公网安备 11010802038392号</a>

                </span>

                <span class="mr">|</span>

                <span class="mr">京ICP备05020493号-4</span>

                <span class="mr">|</span>

                <span>ICP证：京B2-20202537</span>

            </p>

            <div style="position: absolute; top:17px;left:50%;margin-left:350px;">

                <img src="./images/footer-slh.jpg" alt="适老化无障碍服务" style="display: block; width:130px;height:46px">

            </div>

        </div>

    </div>

    <!-- 底部部分结束 -->

    <!-- 返回顶部开始 -->

    <div class="gotop active">

        <a href="" class="js-gotop">

            <i class="icon ico-gotop iconfont">&#xe62e;</i>

        </a>

    </div>

    <!-- 返回顶部结束 -->

总结：定位运用得不是很流畅，动画部分需要加强，断断续续的学习不便于知识点连接，多练习项目，看知识点。