The web page is designed based on HTML and CSS——"dessert website" material.

Language 2023-04-16 18:00:15 views: null

Hello, everyone, today I would like to share with you the overall idea and process of the web design of the "dessert website".

Table of contents

1. Realize the effect:

 2. Design idea:

1. Web page header design:

 2. Web page main design:

3. The design of the web page foot:

3. Code collection:

1. HTML code:

2. CSS code collection:

4. Material source code:

1. Realize the effect:

In this material webpage, the editor has appropriately added a secondary navigation bar and a product smoothing effect, and you can appropriately delete a certain part of the function according to your personal needs.

 

 

 2. Design idea:

The setting of this web page is roughly the same as the box model of "Love Home". You can also refer to the overall framework of "Love Home".

Then, the overall box model of the "dessert website" is as follows:

1. Web page header design:

        As for the header part, it can be seen from the effect diagram that it includes two parts: header_top and navigation bar (nav). In the small part of header_top, the editor divides it into two parts: logo and login.

        In the nav navigation bar, the editor also adds the effect of the secondary navigation bar, which can be retained and deleted according to personal circumstances.

 The HTML code part in the header:

 <!-- header盒子标签 -->
        <div class="header">
            <!-- header_top属性标签 -->
            <div class="header_top">
                <!-- logo属性标签 -->
                <div class="logo"><img src="images/logo.jpg" alt=""></div>
                <!-- login属性标签 -->
                <div class="login">
                    <a href="">登录</a> 
                    <span style="color: #ffa416;">|</span>
                    <a href="">注册</a>
                </div>
            </div>
            <!-- nav属性 -->
            <div class="nav">
                <ul>
                    <li class="item"><a href="">首页</a></li>
                    <li class="item"><a href="">公司简介</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">公司概况</a></li>
                            <li class="item_c"><a href="">公司发展</a></li>
                            <li class="item_c"><a href="">公司文化</a></li>
                            <li class="item_c"><a href="">公司产品</a></li>
                        </ul>
                    </li>
                    <li class="item"><a href="">美食甜点</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">中式甜点</a></li>
                            <li class="item_c"><a href="">西式甜点</a></li>
                            <li class="item_c"><a href="">日式甜点</a></li>
                            <li class="item_c"><a href="">港式甜点</a></li>
                        </ul>
                    </li>
                    <li class="item"><a href="">用户留言</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">我要订单</a></li>
                            <li class="item_c"><a href="">好评榜</a></li>
                            <li class="item_c"><a href="">提出建议</a></li>
                        </ul>
                    </li>
                    <li class="item"><a href="">联系我们</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">加入我们</a></li>
                            <li class="item_c"><a href="">甜品社区</a></li>
                            <li class="item_c"><a href="">公司名片</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

 The code part of the CSS in the header:

/* 网页header */
.header{
    height: 172px;
    background-color: aqua;
}
/* 设置头部导航栏上部的位置 */
.header_top{
    height: 100px;
    background-color: white;
}
/* 设置logo属性 */
.logo{
    width: 595px;
    height: 100px;
    /* background-color: red; */
    padding-left: 160px;
    float: left;
}
/* logo中图片的属性 */
.logo img{
    height: 100px;;
}
/* login的属性 */
.login{
    float: right;
    position: relative;
    /* background-color: orange; */
    width: 705px;
    height: 68px;
    font-size: 32px;
    padding-top: 32px;
    text-align: right;
    padding-right: 50px;
}
/* 超链接属性 */
a{
    text-decoration: none;
    color: #ffa416;
}
/* 导航栏nav属性值 */
.nav{
    height: 72px;
    background-color: #ff9c00;
}

/* li属性值 */
.item{
    padding-top:16px;
    text-align: center;
    width: 302px;
    font-size: 38px;
    height:56px ;
    float: left;
    list-style-type: none;
}
/* 在导航栏中a的属性值 */
.nav>ul>.item>a{
    color: brown;
}
/* 当鼠标悬浮在item标签时 */
.item:hover{
    background-color: #f8f5bc;  /*改变背景颜色*/
}

/* 当鼠标悬浮在item标签时,实现的效果 */
.nav>ul>.item:hover>a{
    color: #ff9c00;
    font-weight: bolder;
}
/* sub_nav的属性值 */
.nav ul .sub_nav{
    margin-top: 13px;
    background-color: #ff9c00;
    line-height: 55px;
    text-align: center;
    display:none;
    list-style-type: none;
    color: brown;
    border-radius: 0 0 55px 55px;
    overflow: hidden;
}
/* sub_nav中a的属性 */
.nav ul .sub_nav .item_c>a{
    color: brown;
}
/* 当鼠标悬浮在item_c */
.nav ul .sub_nav .item_c:hover{
    background-color: white;
}
/* 当鼠标悬浮在item_c 改变字体颜色*/
.nav ul .sub_nav .item_c:hover>a{
    text-decoration: underline;
    color: #ff9c00;
    font-weight: bold;
}
/* 当鼠标悬浮在item时,使item_c呈现 */
.item:hover .sub_nav{
    display: block;
}

The above is the code structure of the header in the webpage. The following editor will explain the main part of the main body of the webpage in detail.

 2. Web page main design:

         For the main part of the web page, according to the effect diagram, the editor is divided into three parts: main_top, content and main_bottom.

        The main_top part is mainly to realize the storage of photos, of course, you can also realize the effect of picture carousel in this part;

        The content part realizes the display of desserts such as donuts, tiramisu, cheesecake, etc., because the frames of each dessert are the same size, we only need to realize the effect of one frame, and then directly refer to the first template for the rest; In this part, in order to realize the static animation effect by moving the mouse up, based on css, only a box can be added outside the box, but this animation effect is more complicated to realize with css.

        The main_bottom part realizes the effect of the specific column of desserts. According to the observation of the effect diagram, each dessert information column is the same. We only need to design one information column effect, and the rest of the information columns can directly refer to the first template.

        Let's take a look at how the editor achieved it.

 The code part of the HTML in main:

        <!-- main盒子标签 -->
        <div class="main">
            <!-- main_top盒子标签:网页背景图片 -->
            <div class="main_top">
            </div>
            <!-- content盒子标签 -->
            <div class="content">
                <div class="donghua">
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list1.png" alt="" width="100px"></dt>
                            <dd>提拉米苏</dd>
                        </dl>
                    </div>
                    <!-- box2盒子 -->
                    <div class="box">
                        <dl>
                            <dt class="list2"><img src="images/list2.png" alt="" width="130px"></dt>
                            <dd>甜甜圈</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list3.png" alt="" width="110px"></dt>
                            <dd>芝士蛋糕</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list4.png" alt="" width="120px"/></dt>
                            <dd>马卡龙</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list5.png" alt="" width="100px"></dt>
                            <dd>西式甜点</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list1.png" alt="" width="110px"></dt>
                            <dd>提拉米苏</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt class="list2"><img src="images/list2.png" alt="" width="130px"></dt>
                            <dd>甜甜圈</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list3.png" alt="" width="110px"></dt>
                            <dd>芝士蛋糕</dd>
                        </dl>
                    </div>
                    <div class="scroll">
                        
                    </div>
                </div>
            </div>
            <!-- main_bottom盒子 -->
            <div class="main_bottom">
                <div class="content_bottom">
                    <!-- 里面的小盒子 -->
                    <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con1.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">爱的N次方</div>
                            <div class="category">马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con2.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">果肉果冻</div>
                            <div class="category">双色马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">25元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con3.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">芒果味</div>
                            <div class="category">布丁马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">35元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con4.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">果冻荔枝味</div>
                            <div class="category">多彩马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con5.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">果味巧克力</div>
                            <div class="category">西式甜点</div>
                            <div class="price">价格：<span style="color:#fd8187;">20元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con6.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">奶油水果</div>
                            <div class="category">提拉米苏</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con7.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">玫瑰花型</div>
                            <div class="category">布丁</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con8.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">燕麦奶油</div>
                            <div class="category">芝士蛋糕</div>
                            <div class="price">价格：<span style="color:#fd8187;">25元</span></div>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>

The code part of CSS in main:

/* 网页main */
.main{
    height: 1592px;
    background-color: red;
}

/* main_top属性值 */
.main_top{
    background-color: yellow;
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 392px;
    
}
/* content属性值 */
.content{
    width: 1510px;
    height: 300px;
    background-color: #e7bf80;
    overflow: hidden;     /*隐藏*/
    white-space: nowrap;    /*不换行*/
}
/* box盒子属性 */
.content .box{
    /* float: left; */
    display: inline-block;      /*盒子呈现行块元素展现——便于在一行展示*/
}
/* dl属性值 */
.content .box dl{
    margin:25px 20px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    float: left;
    overflow: hidden;
    background-color:white;

}
/* dt标签属性值 */
.content .box dl dt{
    margin: 50px 70px 30px;
    width: 100px;
    height: 100px;
}
/* list2的属性 */
.content .box dl .list2{
    margin-left:60px;
    margin-top: 70px;
    margin-bottom: 7px;
}
/* dd标签的属性 */
.content .box dl dd{
    font-size: 26px;
    text-align: center;
    color: #9c5132;
}
/* 当鼠标移动到box标签时,dl的属性值 */
.content .box>dl:hover{
    background-color: #ff9c00;
    cursor: pointer;
}
/* 平滑滚动效果 */
.content .donghua{
    animation-name:move;    /*@keyframes名字*/
    animation-duration: 12s;    /*动画持续时间*/
    animation-iteration-count: infinite;    /*动画循环次数*/
    animation-timing-function: linear;      /*动画循环速度：匀速*/
}
.donghua:hover {
    animation-play-state: paused;   /*动画循环状态*/
}
/* 平滑滚动效果 */
@keyframes move {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-900px);
    }
}
/* main_bottom盒子属性值 */
.main_bottom{
    width: 1510px;
    height: 900px;
    background: #f8f5bc;
    overflow: hidden;
}
/* .content_bottom盒子属性值 */
.main_bottom .content_bottom{
    /* background-color: #fff; */
    margin: 0 auto;
    width: 1510px;
    height: 850px;
    margin-top: 30px;
    overflow: hidden;
}
/* bottom_box属性值 */
.main_bottom .content_bottom .bottom_box{
    width: 300px;
    height: 350px;
    border: 2px solid #808080;
    background-color: #fff;
    float: left;
    padding-top: 30px;
    padding-left: 40px;
    margin-left: 30px;
    margin-top: 30px;
}
/* photo属性值 */
.photo{
    /* background-color: yellow; */
    width: 270px;
    height: 210px;
}
/* bottom_box属性值中info属性 */
.info{
    margin-top: 10px;
    /* background-color: #ff9c00; */
    width: 270px;
    font-family:"微软雅黑";
    font-size: 20px;
    height: 120px;
    color: #9c5132;
    font-weight: 500;
}
.tast,.category,.price{
    height: 40px;
    line-height: 40px;
}
.category{
    color: #fd8187;
}
/* 鼠标悬停在.bottom_box时的属性 */
.main_bottom .content_bottom .bottom_box:hover{
    background-color: #fff202c7;
    cursor: pointer;
}

3. The design of the web page foot:

In this section, the editor directly inserts the p tag. I won't introduce too much.

 Code part of HTML in foot:

        <!-- foot盒子标签 -->
        <div class="foot">
            <p>西式甜品网版权所有2020-2030京ICP备08001421号  京公网安备</p>
        </div>

 Code part of CSS in foot:

/* 网页foot */
.foot{
    height: 120px;
    background-color:aqua;
}
/* foot盒子属性 */
.foot{
    background-color: #f8f5bc;
    background-image:url(../images/footer.png);
}
.foot p{
    text-align: center;
    padding: 55px 200px 30px;
    font-size: 26px;
    color: white;
}

 The above is the design idea of ​​each part of the "dessert website". If there is anything you don't understand or don't understand, you can private message the editor. Below is a collection of codes for you.

3. Code collection:

1. HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甜品店</title>
    <link rel="stylesheet" href="css/comment.css">
    <link rel="stylesheet" href="css/tianpindian.css">
</head>
<body>
    <!-- 网页外部标签 -->
    <div id="wrap">
        <!-- header盒子标签 -->
        <div class="header">
            <!-- header_top属性标签 -->
            <div class="header_top">
                <!-- logo属性标签 -->
                <div class="logo"><img src="images/logo.jpg" alt=""></div>
                <!-- login属性标签 -->
                <div class="login">
                    <a href="">登录</a> 
                    <span style="color: #ffa416;">|</span>
                    <a href="">注册</a>
                </div>
            </div>
            <!-- nav属性 -->
            <div class="nav">
                <ul>
                    <li class="item"><a href="">首页</a></li>
                    <li class="item"><a href="">公司简介</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">公司概况</a></li>
                            <li class="item_c"><a href="">公司发展</a></li>
                            <li class="item_c"><a href="">公司文化</a></li>
                            <li class="item_c"><a href="">公司产品</a></li>
                        </ul>
                    </li>
                    <li class="item"><a href="">美食甜点</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">中式甜点</a></li>
                            <li class="item_c"><a href="">西式甜点</a></li>
                            <li class="item_c"><a href="">日式甜点</a></li>
                            <li class="item_c"><a href="">港式甜点</a></li>
                        </ul>
                    </li>
                    <li class="item"><a href="">用户留言</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">我要订单</a></li>
                            <li class="item_c"><a href="">好评榜</a></li>
                            <li class="item_c"><a href="">提出建议</a></li>
                        </ul>
                    </li>
                    <li class="item"><a href="">联系我们</a>
                        <ul class="sub_nav">
                            <li class="item_c"><a href="">加入我们</a></li>
                            <li class="item_c"><a href="">甜品社区</a></li>
                            <li class="item_c"><a href="">公司名片</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- main盒子标签 -->
        <div class="main">
            <!-- main_top盒子标签:网页背景图片 -->
            <div class="main_top">
            </div>
            <!-- content盒子标签 -->
            <div class="content">
                <div class="donghua">
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list1.png" alt="" width="100px"></dt>
                            <dd>提拉米苏</dd>
                        </dl>
                    </div>
                    <!-- box2盒子 -->
                    <div class="box">
                        <dl>
                            <dt class="list2"><img src="images/list2.png" alt="" width="130px"></dt>
                            <dd>甜甜圈</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list3.png" alt="" width="110px"></dt>
                            <dd>芝士蛋糕</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list4.png" alt="" width="120px"/></dt>
                            <dd>马卡龙</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list5.png" alt="" width="100px"></dt>
                            <dd>西式甜点</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list1.png" alt="" width="110px"></dt>
                            <dd>提拉米苏</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt class="list2"><img src="images/list2.png" alt="" width="130px"></dt>
                            <dd>甜甜圈</dd>
                        </dl>
                    </div>
                    <!-- box盒子 -->
                    <div class="box">
                        <dl>
                            <dt><img src="images/list3.png" alt="" width="110px"></dt>
                            <dd>芝士蛋糕</dd>
                        </dl>
                    </div>
                    <div class="scroll">
                        
                    </div>
                </div>
            </div>
            <!-- main_bottom盒子 -->
            <div class="main_bottom">
                <div class="content_bottom">
                    <!-- 里面的小盒子 -->
                    <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con1.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">爱的N次方</div>
                            <div class="category">马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con2.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">果肉果冻</div>
                            <div class="category">双色马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">25元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con3.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">芒果味</div>
                            <div class="category">布丁马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">35元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con4.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">果冻荔枝味</div>
                            <div class="category">多彩马卡龙</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con5.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">果味巧克力</div>
                            <div class="category">西式甜点</div>
                            <div class="price">价格：<span style="color:#fd8187;">20元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con6.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">奶油水果</div>
                            <div class="category">提拉米苏</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con7.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">玫瑰花型</div>
                            <div class="category">布丁</div>
                            <div class="price">价格：<span style="color:#fd8187;">30元</span></div>
                        </div>
                    </div>
                     <!-- 里面的小盒子 -->
                     <div class="bottom_box">
                        <div class="photo">
                            <img src="images/con8.jpg" alt="">
                        </div>
                        <div class="info">
                            <div class="tast">燕麦奶油</div>
                            <div class="category">芝士蛋糕</div>
                            <div class="price">价格：<span style="color:#fd8187;">25元</span></div>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
        <!-- foot盒子标签 -->
        <div class="foot">
            <p>西式甜品网版权所有2020-2030京ICP备08001421号  京公网安备</p>
        </div>
    </div>
</body>
</html>

2. CSS code collection:

*{
    margin: 0;
    padding: 0;
}

/* 网页wrap属性 */
#wrap{
    width: 1510px;
    height: 1884px;
    background-color: pink;
    margin: 0 auto;
    font-size: 16px;
    font-family: "楷体";

}
/* 网页header */
.header{
    height: 172px;
    background-color: aqua;
}
/* 网页main */
.main{
    height: 1592px;
    background-color: red;
}
/* 网页foot */
.foot{
    height: 120px;
    background-color:aqua;
}
/* 设置头部导航栏上部的位置 */
.header_top{
    height: 100px;
    background-color: white;
}
/* 设置logo属性 */
.logo{
    width: 595px;
    height: 100px;
    /* background-color: red; */
    padding-left: 160px;
    float: left;
}
/* logo中图片的属性 */
.logo img{
    height: 100px;;
}
/* login的属性 */
.login{
    float: right;
    position: relative;
    /* background-color: orange; */
    width: 705px;
    height: 68px;
    font-size: 32px;
    padding-top: 32px;
    text-align: right;
    padding-right: 50px;
}
/* 超链接属性 */
a{
    text-decoration: none;
    color: #ffa416;
}
/* 导航栏nav属性值 */
.nav{
    height: 72px;
    background-color: #ff9c00;
}

/* li属性值 */
.item{
    padding-top:16px;
    text-align: center;
    width: 302px;
    font-size: 38px;
    height:56px ;
    float: left;
    list-style-type: none;
}
/* 在导航栏中a的属性值 */
.nav>ul>.item>a{
    color: brown;
}
/* 当鼠标悬浮在item标签时 */
.item:hover{
    background-color: #f8f5bc;  /*改变背景颜色*/
}

/* 当鼠标悬浮在item标签时,实现的效果 */
.nav>ul>.item:hover>a{
    color: #ff9c00;
    font-weight: bolder;
}
/* sub_nav的属性值 */
.nav ul .sub_nav{
    margin-top: 13px;
    background-color: #ff9c00;
    line-height: 55px;
    text-align: center;
    display:none;
    list-style-type: none;
    color: brown;
    border-radius: 0 0 55px 55px;
    overflow: hidden;
}
/* sub_nav中a的属性 */
.nav ul .sub_nav .item_c>a{
    color: brown;
}
/* 当鼠标悬浮在item_c */
.nav ul .sub_nav .item_c:hover{
    background-color: white;
}
/* 当鼠标悬浮在item_c 改变字体颜色*/
.nav ul .sub_nav .item_c:hover>a{
    text-decoration: underline;
    color: #ff9c00;
    font-weight: bold;
}
/* 当鼠标悬浮在item时,使item_c呈现 */
.item:hover .sub_nav{
    display: block;
}

/* main_top属性值 */
.main_top{
    background-color: yellow;
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 392px;
    
}
/* content属性值 */
.content{
    width: 1510px;
    height: 300px;
    background-color: #e7bf80;
    overflow: hidden;     /*隐藏*/
    white-space: nowrap;    /*不换行*/
}
/* box盒子属性 */
.content .box{
    /* float: left; */
    display: inline-block;      /*盒子呈现行块元素展现——便于在一行展示*/
}
/* dl属性值 */
.content .box dl{
    margin:25px 20px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    float: left;
    overflow: hidden;
    background-color:white;

}
/* dt标签属性值 */
.content .box dl dt{
    margin: 50px 70px 30px;
    width: 100px;
    height: 100px;
}
/* list2的属性 */
.content .box dl .list2{
    margin-left:60px;
    margin-top: 70px;
    margin-bottom: 7px;
}
/* dd标签的属性 */
.content .box dl dd{
    font-size: 26px;
    text-align: center;
    color: #9c5132;
}
/* 当鼠标移动到box标签时,dl的属性值 */
.content .box>dl:hover{
    background-color: #ff9c00;
    cursor: pointer;
}
/* 平滑滚动效果 */
.content .donghua{
    animation-name:move;    /*@keyframes名字*/
    animation-duration: 12s;    /*动画持续时间*/
    animation-iteration-count: infinite;    /*动画循环次数*/
    animation-timing-function: linear;      /*动画循环速度：匀速*/
}
.donghua:hover {
    animation-play-state: paused;   /*动画循环状态*/
}
/* 平滑滚动效果 */
@keyframes move {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-900px);
    }
}
/* main_bottom盒子属性值 */
.main_bottom{
    width: 1510px;
    height: 900px;
    background: #f8f5bc;
    overflow: hidden;
}
/* .content_bottom盒子属性值 */
.main_bottom .content_bottom{
    /* background-color: #fff; */
    margin: 0 auto;
    width: 1510px;
    height: 850px;
    margin-top: 30px;
    overflow: hidden;
}
/* bottom_box属性值 */
.main_bottom .content_bottom .bottom_box{
    width: 300px;
    height: 350px;
    border: 2px solid #808080;
    background-color: #fff;
    float: left;
    padding-top: 30px;
    padding-left: 40px;
    margin-left: 30px;
    margin-top: 30px;
}
/* photo属性值 */
.photo{
    /* background-color: yellow; */
    width: 270px;
    height: 210px;
}
/* bottom_box属性值中info属性 */
.info{
    margin-top: 10px;
    /* background-color: #ff9c00; */
    width: 270px;
    font-family:"微软雅黑";
    font-size: 20px;
    height: 120px;
    color: #9c5132;
    font-weight: 500;
}
.tast,.category,.price{
    height: 40px;
    line-height: 40px;
}
.category{
    color: #fd8187;
}
/* 鼠标悬停在.bottom_box时的属性 */
.main_bottom .content_bottom .bottom_box:hover{
    background-color: #fff202c7;
    cursor: pointer;
}
/* foot盒子属性 */
.foot{
    background-color: #f8f5bc;
    background-image:url(../images/footer.png);
}
.foot p{
    text-align: center;
    padding: 55px 200px 30px;
    font-size: 26px;
    color: white;
}

The above is all the codes of the "Dessert Website". The editor will put the pictures, source code and other materials in the website below:

4. Material source code:

Alibaba Cloud Disk: Made by Dessert Network https://www.aliyundrive.com/s/G8zto9K2SHu Extraction code: 6bs7.

The above is the summary and ideas of the editor on the "dessert website" material this time, I hope it will be helpful to you. If there is something you don't understand, you can leave a message to the editor below. If there are deficiencies and mistakes, please point them out, thank you.

It is not easy for the editor to sort out. If it is helpful to you, then give the editor a like. Your like is the greatest support and affirmation for the editor.

Guess you like

Origin blog.csdn.net/m0_56069849/article/details/127101751
Recommended
Ranking
ElasticSearch-- data modeling best practices
Permission Maintenance - Shadow User Backdoor
Refactor the code using MVP mode
Quantitative investment-fundamental model-PVC multi-factor model
Spark Big Data Processing Lecture Notes 3.2 Mastering RDD Operators
Blazor page components (2)
Erlernen von Kenntnissen zur Android-Entwicklung – Kodierung, Verschlüsselung, Hash, Serialisierung und Zeichensätze
About Qi high in JAVA study notes SORM summary detailed personal explanation
Will you calculate the accuracy of the rope displacement sensor in the measurement?
OPENJTAG debugging learning (3): debugging using the gdb command line
Daily
More
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)

Code World

© 2018 codetd.com