前端学习第十四天

最新推荐文章于 2024-07-22 15:19:55 发布

Supdna

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量69

点赞数

文章标签：前端学习 css html css3

本文链接：https://blog.csdn.net/qq_41550419/article/details/130164893

版权

完成新的页面

style

*{margin: 0;padding: 0;font-family: 微软雅黑;}
.fl{float: left;}
.fr{float: right;}
.clear{clear: both;}
body{background-color: #f3f3f3;}
.w1200{width: 1200px;margin: auto;}
/* 头部 */
.head{font-size: 18px;color: #3c3d46;}
li{list-style: none;}
.nav li{float: left;width: 80px;height: 72px;line-height: 72px;margin-right: 24px;text-align: center;}
.nav{margin-left: 159px;}
.logo{margin-top: 7px;}
.logo img{vertical-align: middle;}
.head .act{background-color: #5096ff;color: #fff !important;}
.login{line-height: 72px;}
.head .line{margin: 0 10px;}
/* 头部灰线 */
.head_line{background-color: #666666;overflow: hidden;}
.icon{margin-top: 18px;margin-bottom: 18px;}
.icon .ic{width: 102px;height: 22px;border-right: #fff 2px solid;text-align: center;}
.icon .le{border-left: #fff 2px solid;}
/* banner */
.banner_bg{height: 350px;background: url(img/banner_bg.jpg);margin-top: 67px;}
.ticket{width: 270px;height: 80px;background-color: #5696ff;margin-top: 233px;}
.banner p{color: #fff;}
.ticket .name{font-size: 45px;line-height: 80px;margin-left: 20px;letter-spacing: 7px;}
.ticket .english{font-size: 17px;margin-top: 20px;margin-right: 19px;letter-spacing: 3px;}
.banner_bg .info{width: 200px;text-align: center;}
.banner_bg .info .name{font-size: 34px;line-height: 34px;letter-spacing: 7px;margin-top: 27px;}
.banner_bg .info .english{font-size: 13px;line-height: 13px;letter-spacing: 3px;margin-top: 10px;}
.banner_bg .info .bar{margin-top: 29px;margin-bottom: 0;} 
.banner_bg .info .start{width: 140px;height: 30px;background-color: #fff;border-radius: 4px;color: #3c3d46;margin: auto;margin-top: 53px;line-height: 30px;}
.start .guangzhou{color: #333333;font-size: 14px;}
.start .go{color: #333333;font-size: 12px;}
.ticket_search{width: 200px;margin: auto;position: relative;margin-top: 10px;}
.ticket_search input{width: 140px;height: 30px;border: none;border-radius: 4px;background-color: #fff;}
.ticket_search .block{width: 30px;height: 30px;background-color: #5696ff;border-top-right-radius: 4px;border-bottom-right-radius: 4px;position: absolute;right: 30px;top: 0px;}
.ticket_search img{height: 16px;margin-top: 7px;}
/* 内容 */
.content{margin-top: 60px;}
.main_list{width: 860px;}
.main_list .info{width: 510px;}
.main_list .p1{font-size: 14px;line-height: 14px;color: #5696ff;text-decoration:underline}
.main_list .p2{margin-top: 12px;font-size: 22px;color: #333333;}
.main_list .p3{margin-top: 16px;font-size: 16px;line-height: 16px;color: #666666;}
.main_list .price{color: #eb4c4d;margin-top: 9px;}
.main_list .p4{font-size: 36px;line-height: 36px;margin-top: 14px;}
.main_list .p5{font-size: 18px;line-height: 18px;margin-top: 32px;}
.main_list .book{width: 140px;font-size: 22px;line-height: 50px;border: #5696ff 1px solid;color: #5696ff;text-align: center;}
.main_list .line{width: 804px;height: 1px;background-color: #e9e9e9;margin-top: 50px;margin-bottom: 50px;}
.main_list .page{width: 860px;padding-top: 30px;}
.main_list .button{width: 198px;height: 59px;border: #e9e9e9 1px solid; text-align: center;font-size: 18px;line-height: 59px;color: #333333;}
.main_list .number li{float: left;width: 50px;font-size: 19px;line-height: 61px;text-align: center;}
.main_list .number .act{color: #5696ff !important;}
/* 热卖 */
.hot_title{width: 279px;height: 48px;border: #5696ff 1px solid;text-align: center;color: #282828;font-size: 16px;line-height: 48px;}
.hot_list{padding-top: 33px;}
.hot_list .info{width: 171px;}
.hot_list .p1{font-size: 13px;color: #333333;}
.hot_list .p2{font-size: 14px;color: #eb4c4d;margin-top: 17px;}
.hot_list .line{width: 279px;height: 1px;background-color: #e3e3e3;margin-top: 17px;margin-bottom: 18px;}
/* 底部 */
.footer{height: 130px;background-color: #5096ff;margin-top: 65px;overflow: hidden;}
.footer .info{width: 659px;color: #fafafc;font-size: 16px;line-height: 24px;margin: auto;margin-top: 41px;}

body

<body>
    <div class="wrap">
        <!-- 头部导航 -->
        <div class="head w1200">
            <div class="logo fl">
                <img src="img/logo.png">
                <img src="img/logo_name.png">
            </div>
            <ul class="nav fl">
                <li>首页</li>
                <li>地区</li>
                <li class="act">特惠</li>
                <li>资讯</li>
                <li>游记</li>
                <div class="clear"></div>
            </ul>
            <div class="login fr">
                <span>登录</span>
                <span class="line">|</span>
                <span>注册</span>
            </div>
            <div class="clear"></div>
        </div>
        <!-- 头部灰线 -->
        <div class="head_line">
            <div class="icon w1200">
                <div class="ic fl le">
                    <img class="search_icon" src="img/search_icon.png">
                </div>
                <div class="ic fr">
                    <img class="personal_icon" src="img/personal.png">
                </div>
                <div class="ic fr">
                    <img class="comment_icon" src="img/comment.png">
                </div>
                <div class="ic fr le">
                    <img class="history_icon" src="img/history_icon.png">
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!-- banner -->
        <div class="banner">
            <div class="banner_bg w1200">
                <div class="ticket fl">
                    <p class="name fl">特惠票</p>
                    <p class="english fr">
                        TICKET<br>
                        DEALS
                    </p>
                    <div class="clear"></div>
                </div>
                <div class="info fr">
                    <p class="name">特惠票</p>
                    <p class="english">TICKET DEALS</p>
                    <div class="bar">
                        <img src="img/bar.png">
                        <img src="img/bar.png">
                    </div>
                    <div class="start">
                        <span class="guangzhou">广州</span>
                        <span class="go">出发</span>
                    </div>
                    <img src="img/go_arrow.png" style="margin-top: 15px;">
                    <div class="ticket_search">
                        <input placeholder="&nbsp; 请输入目的地！"style="letter-spacing: 1px;">
                        <div class="block"><img src="img/search_icon.png"></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content w1200">
            <div class="main_list fl">
                <div class="list1">
                    <img src="img/main_list_pic1.png" class="fl">
                    <div class="info fr">
                        <p class="p1">已售150</p>
                        <p class="p2">【泼水节预售】广州直飞泰国曼谷+芭提雅+沙美岛6天5晚跟团游（全程无自费+全程5星酒店+沙美岛出海+国际人妖秀+送意外险）</p>
                        <p class="p3">班期：清明五一03/30-06/30</p>
                        <div class="price">
                            <span class="p4 fl">¥2099</span>
                            <span class="p5 fl">起</span>
                            <div class="book fr">立即预定</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="line"></div>
                <div class="list2">
                    <img src="img/main_list_pic2.png" class="fl">
                    <div class="info fr">
                        <p class="p1">已售108</p>
                        <p class="p2">广州直飞普吉岛6天4/5天4晚晚精致游（无自费+指定4晚网评国际五星酒店+赠送流量卡+大堡礁浮潜+蓝钻珊瑚岛+泰式风情人妖秀）</p>
                        <p class="p3">班期：清明五一03/21-06/28</p>
                        <div class="price">
                            <span class="p4 fl">¥2899</span>
                            <span class="p5 fl">起</span>
                            <div class="book fr">立即预定</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="line"></div>
                <div class="list3">
                    <img src="img/main_list_pic3.png" class="fl">
                    <div class="info fr">
                        <p class="p1">已售150</p>
                        <p class="p2">【全景游】广州直飞土耳其12天（女神节赠送玫瑰水+五星酒店·泡温泉+番红花城特色民居+双海寻梦爱琴海+外星美景卡帕多奇亚）</p>
                        <p class="p3">班期：清明五一03/30-05/30</p>
                        <div class="price">
                            <span class="p4 fl">¥5999</span>
                            <span class="p5 fl">起</span>
                            <div class="book fr">立即预定</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="line"></div>
                <div class="list4">
                    <img src="img/main_list_pic4.png" class="fl">
                    <div class="info fr">
                        <p class="p1">已售89</p>
                        <p class="p2">【樱花预售】广州直飞大阪+东京+京都+名古屋+富士山6天5晚品质游（拒签全退+河口湖樱花祭+升级1晚温泉酒店+日式酒店料理+浴衣体验）</p>
                        <p class="p3">班期：清明五一04/03-05/31</p>
                        <div class="price">
                            <span class="p4 fl">¥4280</span>
                            <span class="p5 fl">起</span>
                            <div class="book fr">立即预定</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="line"></div>
                <div class="list5">
                    <img src="img/main_list_pic5.png" class="fl">
                    <div class="info fr">
                        <p class="p1">已售77</p>
                        <p class="p2">广州直飞越柬6天5晚游/柬埔寨一地5天4晚经典文化美食之旅（大小吴哥窟+高棉的微笑+金边皇宫+巴肯山日落+赠送柬埔寨特色纪念品）</p>
                        <p class="p3">班期：清明五一暑假04/03-07/28</p>
                        <div class="price">
                            <span class="p4 fl">¥3888</span>
                            <span class="p5 fl">起</span>
                            <div class="book fr">立即预定</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="line"></div>
                <div class="list6">
                    <img src="img/main_list_pic6.png" class="fl">
                    <div class="info fr">
                        <p class="p1">已售205</p>
                        <p class="p2">【一价全含】广州飞哈尔滨+亚布力+雪乡+民俗村6/7天5晚跟团游（百人销量+全程不带钱包+0购物0自费+天天特色餐+4星5星住宿）</p>
                        <p class="p3">班期：03/22-03/31</p>
                        <div class="price">
                            <span class="p4 fl">¥3980</span>
                            <span class="p5 fl">起</span>
                            <div class="book fr">立即预定</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="line"></div>
                <div class="page">
                    <div class="button fl"> < 上一页 </div>
                    <ul class="number fl">
                        <li>1</li>
                        <li class="act">2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>...</li>
                        <li>30</li>
                        <div class="clear"></div>
                    </ul>
                    <div class="button fr">下一页 ></div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="hot_sale fr">
                <div class="hot_title">本周热卖</div>
                <div class="hot_list">
                    <div class="list1">
                        <img src="img/hot_list1.jpg" class="fl">
                        <div class="info fr">
                            <p class="p1">上海直飞普吉岛5-6天自由行（3套航班任意选择+可选...</p>
                            <p class="p2">¥1899起</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="line"></div>
                    <div class="list1">
                        <img src="img/hot_list2.jpg" class="fl">
                        <div class="info fr">
                            <p class="p1">上海直飞香港3-4天自由行（地铁商圈附近酒店+航班...</p>
                            <p class="p2">¥1220起</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="line"></div>
                    <div class="list1">
                        <img src="img/hot_list3.jpg" class="fl">
                        <div class="info fr">
                            <p class="p1">上海直飞甲米6-7天自由行（预售至5月+可选带无边泳...</p>
                            <p class="p2">¥1999起</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="line"></div>
                    <div class="list1">
                        <img src="img/hot_list4.jpg" class="fl">
                        <div class="info fr">
                            <p class="p1">上海直飞清迈5-6天自由行（泼水节预售+古城/宁曼路...</p>
                            <p class="p2">¥1899起</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="line"></div>
                    <div class="list1">
                        <img src="img/hot_list5.jpg" class="fl">
                        <div class="info fr">
                            <p class="p1">全国往返苏梅岛5-7天自由行（Code海景无边泳池+无...</p>
                            <p class="p2">¥3299起</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="line"></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <div class="info">
                © 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证123456号营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456
            </div>
        </div>
    </div>
</body>