023-Web前端-练习记录-8

最新推荐文章于 2023-07-15 22:43:40 发布

我的肚肚有点儿疼

最新推荐文章于 2023-07-15 22:43:40 发布

阅读量147

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Fenfen_vyron/article/details/106632484

版权

Web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

练习记录-8

#6.8还是6.9已经不重要了柑橘要猝死了

CSS实操的移动端下

代码块

主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1">
    <title>移动端</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="icon" href="images/title.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/CSS.css">
</head>
<body>
<!--导航条-->
<div class="nav">
    <div class="city">昆明<a href="city.html" class="iconfont">&#xe650;</a></div>
    <div class="title">点点点点点餐系列一</div>
    <div class="search"><a href="#" class="iconfont">&#xe62f;</a></div>

</div>
<!--导航条-->
<!--轮播图-->
<div class="carousel">
    <img src="images/banner1.png" alt="" id="imgBox">
    <div class="click">
        <ul id="click">
            <li onclick="change(0)"></li>
            <li onclick="change(1)"></li>
            <li onclick="change(2)"></li>
            <li onclick="change(3)"></li>
            <li onclick="change(4)"></li>
        </ul>
    </div>
</div>
<!--轮播图-->
<!--消息-->
<div class="message">
    <i class="iconfont">&#xe61f;</i>唯有品尝才能高速你一切。
</div>
<div class="order">
    <div>
        <img src="images/menu1.png" alt=""><br>立即订餐
    </div>
    <div>
        <img src="images/menu2.png" alt=""><br>叫外卖
    </div>
    <div>
        <img src="images/menu3.png" alt=""><br>餐厅定位
    </div>
    <div>
        <img src="images/menu4.png" alt=""><br>健康主持
    </div>
</div>
<!--消息-->
<!--推荐餐厅-->
<div class="tj-box">
    <h3>推荐餐厅</h3>
    <div class="sj">
        <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>  <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>  <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>  <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>  <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>  <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>  <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>  <div class="js">
            <img src="images/shangjia1.png" alt="">
            <div>
                <a href="#">商家标题1</a>
                <p>人均：¥20.00｜10人预定</p>
                <div class="star">
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </div>
            </div>
            <span>订</span>
        </div>
        <h4>难打扫了发财</h4>
    </div>
</div>
<!--推荐餐厅-->
<!--页脚开始-->
<div class="footer">
    <div>
        <i class="iconfont">&#xe600;</i><br>首页
    </div> <div>
        <i class="iconfont">&#xe600;</i><br>首页
    </div> <div>
        <i class="iconfont">&#xe600;</i><br>首页
    </div> <div>
        <i class="iconfont">&#xe600;</i><br>首页
    </div>
</div>
<!--页脚开始-->




<script src="js/index.js"></script>
</body>
</html>

CSS

body {
    background-image: url("../images/bg-img.png");
}

/*导航条*/
.nav {
    width: 100%;
    height: 50px;
    background-color: rgba(0, 127, 95, 1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    display: flex;
}
.city {
    width: 64px;
    height: 50px;
    color: #fff;
    background-color: rgba(255, 186, 69, 1);
    line-height: 50px;
}
.city a {
    color: #fff;
    font-size: 14px;
}
.search {
    width: 40px;
    height: 50px;
    line-height: 50px;
    float: right;
}
.search a {
    color: #fff;
    font-size: 20px;
}
.title {
    flex-grow: 1;
    line-height: 50px;
    font-size: 18px;
    color: #ffffff;
}
/*导航条*/
/*轮播图*/
.carousel {
    width: 100%; /*高度自动*/
    position: relative;
}
.carousel img {
    width: 100%;
}
.click {
    width: 100%;
    height: 5%;
    /*background-color: red;*/
    position: absolute;
    left: 0;
    bottom: 5%;
}
.click > ul {
    width: 60%;
    height: 100%;
    /*background-color: blue;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.click > ul > li {
    width: 18%;
    height: 100%;
    background-color: rgb(0, 127, 95);
}
/*轮播图*/
/*消息*/
.message {
    height: 30px;
    background-color: #eeeeee;
    line-height: 30px;
    margin-top: 5px;
    text-align: left;
    padding-left: 15px; /*用margin会导致背景木的了*/
}
.message i {
    color: #017e5c;
    font-size: 18px;
}
.order {
    display: flex;
}
.order > div {
    flex-grow: 1;
    padding: 10px 0;
    color: #a6a6a6;
}
.order > div:first-child {
    color: #017e5c;
}
.order img {
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
}
/*消息*/
/*推荐餐厅*/
.tj-box{
    margin-bottom: 75px;    /*留底 防止页脚挡字*/
}
.tj-box>h3{
    height: 25px;
    line-height: 25px;
    background-color: #eeeeee;
    font-weight: normal;
    text-align: left;
    padding-left: 15px;
}
.sj{
    background-color: #ffffff;
    margin: 15px;
}
.js{
    height: 80px;
    position: relative;
}
.js>img{
    width: 70px;
    float: left;
    margin: 5px 15px 5px 5px;
}
.js>div{
    float: left;
    text-align: left;
}
.js>div>a{
    margin: 5px 0;
    display: block;
    color: #333333;
    font-size: 16px;
}
.star{
    margin-top: 9px;
    color: #ff0000;
}
.star:last-child{
    color: #eeeeee;
}
.sj>h4{
    height: 30px;
    background-color: #eeeeee;
    line-height: 30px;
    text-align: left;
    clear: both;
    color: #a6a6a6;
    font-weight: normal;
    font-size: 16px;
}
.js>span{
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #017e5c;
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    right: 15px;
    top: 5px;
}
/*推荐餐厅*/
/*页脚*/
.footer{
    width: 100%;
    background-color: #eeeeee;
    display: flex;
    position: fixed;
    bottom: 0;
}
.footer>div{
    flex-grow: 1;
    color: #a6a6a6;
    font-size: 18px;
    padding: 5px 0;
}
.footer>div:first-child{
    background-color: #017e5c;
    color: #ffffff;
}
.footer i{
    font-size: 22px;
}
/*页脚*/

效果展示

晚晚晚晚晚晚晚晚晚安

我的肚肚有点儿疼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
023-Web前端-练习记录-8

练习记录-8#6.8还是6.9已经不重要了柑橘要猝死了CSS实操的移动端下代码块主页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1"> <title>移动端</title&g
复制链接

扫一扫