前端学习案例分享

案例展示图：

第一部分：

 第二部分：

 第三部分：

 详细介绍如下：

1、首先建立基本框架及文件如下图：包括index.css、index.html以及图片文件images。

 2、index.css部分的代码展示：

*{
    padding: 0;
    margin: 0;
    /* 内减模式 */
    box-sizing: border-box;
}
li{
    list-style: none;
    /* 小li的圆点删去 */
}
a{
    text-decoration: none;
    /* 超链接的下划线删去 */
}
.clearfix::before,.clearfix::after{
    content: "";
    display: table;
    /* 表格块样式 */
}
.clearfix::after{
    clear: both;
    /* 清除浮动 */
}
/* 以上是固定样式 */

body{
    background-color: #f3f5f7;
}
/* 版心 */
.wrapper{
    width: 1200px;
    margin: 0 auto;
}

/* 头部 */
.header {
    position: fixed;
    /* 固定定位 */
    z-index: 999;
    /* 其值越大，其显示顺序越靠前 ，默认值是0
    必须配合定位才生效*/
    height: 52px;
    /* background-color: pink; */
    /* margin-top: 30px;
    margin-bottom: 30px; */
    /* margin: 30px auto; */
    border: 1px solid orange;
/* 简写 */
margin-left:80px;
margin-top: 5px;
background-color: #fff;
}

h1{
float: left;
}
.nav{
    float: left;
    margin-left: 40px;
    height: 52px;
    position: relative;
    /* background-color:greenyellow; */
   
}
.nav li{
    float: left;
    margin-right: 26px;
   
}
.nav li a{
    display: block;
    height: 52px;
    line-height: 52px;
    /* border-bottom: 1px solid orange ; */
    font-size: 18px;
    color: black;
}
.nav li a:hover{
    color:  orange;
}
.nav  ul .code{
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translate(0%);
    display: none;
    /* 隐藏二维码 */
}
/* 鼠标悬停显示二维码 */
.nav li a:hover img{
    display: block;
    /* 显示二维码的块元素 */
}
/* 搜索 */
.search{
    width: 412px;
    float: left;
    height: 40px;
    margin-left: 59px;
    margin-top: 6px;
    border: 1px solid orange;
}
.search input{
    width: 360px;
    /* 换行的原因，尺寸相加要为410 */
    height: 38px;
    border: 0;
    padding-left: 6px;
    float: left;
}
.search input::placeholder{
    font-size: 14px;
    color: #bfbfbf;
}
.search button{
    width: 50px;
    height: 38px;
    float: left;
    background-color: orange;
    border: 0;
}
.user{
    float: right;
    margin-right:35px;
    height: 38px;
    margin-top: 7px; ;
    line-height: 38px;
}
.user img{
    vertical-align: middle;
    /* 调节图片垂直对齐方式，middle居中 */
}
/* 空行 */
.konghang{
    height: 100px;
    /* background-color: pink; */
}
/* 轮播图 */
.banner{
  
height: 420px;
background-color: orange;
}

.banner .wrapper{
    height: 420px;
    background-image: url(../images/1\ \(11\).jpeg);
background-size: 100% 100%;
}
.banner .left{
width: 190px;
height: 420px;
padding: 0 20px;
float: left;
background-color: rgba(0, 0, 0, 0.3);
/* 半透明 */
line-height: 44px;
/* 能继承子集 */
}
.banner .right{
width: 228px;
height: 300px;
background-color: #fff;
float: right;
margin-top: 40px;
}
.banner .left span{
   float: right;
}
.banner .left a{
    font-size: 14px;
    color: #fff;
}
.banner .left a:hover{
    color: orange;
}

.banner .right h2{
height: 48px;
background-color: orange;
line-height: 48px;
text-align: center;
font-size: 18px;
color: #fff;
}
.banner .right .content{
    padding: 0 18px;
}
.banner .right .content dl{
padding-top: 15px;
color: #4e4e4e;
font-size: 16px;
border-bottom: 1px solid #bfbfbf;
}
.banner .right .content dd{
font-size: 14px;
color: #4e4e4e;

}
.banner .right .more{
    display: block;
    /* 改为块级元素，后面的才能生效 */
width: 200px;
height: 41px;
color:orange;
font-size: 16px;
margin:4px auto;
/* div：上下4px，左右居中 */
text-align: center;
/* 内容居中 */
font-weight: 700;
/* 字体加粗 */
line-height: 41px;
/* 文字水平居中 */
border:1px solid orange ;
}
.goods{
    margin-top: 8px;
    height: 60px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #fff;
    box-shadow: 0px 2px 3px 0px 
    rgba(118, 118,118, 0.2);
    /* 阴影效果 */
    line-height: 60px;
}
.goods h2{
    float: left;
    font-size: 16px;
    color: orange;
    font-weight: 400;
}
.goods ul{
     float: left;
     padding-left: 30px;
}
.goods ul li{
    float: left;
    /* li标签的字同一行 */

}
.goods li a{
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
/* 字与字之间的距离，左右时30px */
    font-size: 16px;
    color: #050505;
}
.goods .xingqu{
    float: right;
}
.goods .xingqu{
    color: orange;
}
/* 精品推荐茶 */
.box{
    margin-top: 35px;
}
.box .title{
    height: 40px;
    /* background-color: pink; */
   
}
.box .title h2{
    float: left;
    font-weight: 400;
    font-size: 20px;
    color: #494949;
}
.box .title a{
    float:right;
    padding-right: 30px;
    font-size: 12px;
    color: #a5a5a5;
}
.box .content li{
    margin-bottom: 15px;
    float: left;
    /* 默认在下边的li浮动到左边排列 */
    margin-right: 15px;
    /* 小li与小li之间的间距 */
    width: 228px;
    height: 270px;
    background-color:#fff;
    text-align: center;
    padding-top: 10px;
    transition: all 1s;
    /* 鼠标悬停时间1秒钟 */

}
.box .content li:hover{
    height: 260px;
    background-color: rgba(239, 185, 57, 0.3);
}
/* 小li里边的多个盒子的设置 */
.box .content li:nth-child(5n){
    margin-right: 0;
    /* 以5为倍数的盒子右边距设为0 */
}
.box .content li h3{
    padding: 20px;
    font-size: 14px;
    color: #050505;
}
.box .content li p{
    padding: 0 20px;
    font-size: 12px;
    color: #494949;
}
.box .content li span {
    color: orange;
}
.footer{
    padding-top: 30px;
    margin-top: 40px;
    height: 417px;
    background-color: #fff;
}
.footer .left{
    float: left;
}
.footer .left p{
    margin: 20px 0 10px ;
    font-size: 17px;
    color: #666;
    text-indent: 2em;
}
.footer .right{
    float: right;
}
.footer .left a{
    display: inline-block;
    width: 128px;
    height: 36px;
    border: 1px solid orange;
    text-align: center;
    line-height: 36px;
    color: orange;
}
.footer .right dl{
    float: left;
    margin-left: 129px;
}
.box .content li{
    position: relative;
}
.box .content li .hot{
    position: absolute;
    right: -4px;
    top: 4px;

}

3、index.html部分的代码展示：

<!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/index.css">
</head>
<body>
    <!-- 从外到内，从左到右，浮动，盒子，文字 -->
<!-- 负责头部样式 -->
    <div class="header wrapper">
<h1>
    <a href="#"><img src="./images/logo.png" alt=""></a>
</h1>

<!-- 导航 -->
<div class="nav">
   <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">课程</a></li>
    <li><a href="#">故事</a></li>
    <li><a href="#">扫码登录
        <img src="./images/code.png" alt="" class="code"></a></li>
<!-- 二维码图片 -->
   </ul>
</div>
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="输入关键字">
<button>搜索</button>
</div>
<!-- 用户 -->
<div class="user">
    <img src="./images/user.png" alt="">
<span>张小欢</span>
</div>

</div>
<!-- 空行 -->
<div class="konghang"></div>
<!-- 轮播图 -->
<div class="banner">
<div class="wrapper">
<div class="left">
    <ul>
        <li><a href="#">前端开发<span>></span></a></li>
        <li><a href="#">后端开发<span>></span></a></li>
        <li><a href="#">移动开发<span>></span></a></li>
        <li><a href="#">人工智能<span>></span></a></li>
        <li><a href="#">云计算<span>></span></a></li>
        <li><a href="#">大数据<span>></span></a></li>
        <li><a href="#">运维&测试<span>></span></a></li>
        <li><a href="#">ui设计<span>></span></a></li>
        <li><a href="#">产品<span>></span></a></li>
    </ul>
</div>
<div class="right">
<h2>我的茶馆</h2>
<div class="content">
    <dl>
        <dt>茶馆品类</dt>
        <dd>茉莉花茶</dd>
    </dl>
    <dl>
        <dt>茶馆品类</dt>
        <dd>茉莉花茶</dd>
    </dl>
    <dl>
        <dt>茶馆品类</dt>
        <dd>茉莉花茶</dd>
    </dl>
</div>
<a href="#" class="more">全部茶类</a>
</div>
</div>
</div>
<!-- 精品推荐 -->
<div class="goods wrapper">
    <h2>精品推荐</h2>
    <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>
    </ul>
    <a href="#" class="xingqu">修改兴趣</a>
</div>

<!-- 精品推荐茶 -->
<div class="box wrapper">
<div class="title">
<h2>精品推荐</h2>
<a href="#">查看全部</a>
</div>

<div class="content clearfix">
    <!-- 若没有加clearfix，则下面的footer盒子会左浮动
    因此要清除浮动，在content后加clearfix -->
<ul>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
    <!-- 定位hot图 -->
    <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>
    <li><a href="#">
        <img src="./images/精品推荐02.png" alt="">
    <h3>清香纯正，淡雅润喉</h3>
    <p><span>精细加工</span>.110人已购</p>
     <!-- 定位hot图 -->
     <img src="./images/hot.png" alt="" class="hot">
    </a></li>

</ul>
</div>
</div>
<!-- 版权,注意清除浮动的影响，撑不开父级的高度，托镖 -->
<div class="footer">
<div class="wrapper">
    <div class="left">
        <img src="./images/logo.png" alt="">
    <p>茶到有沙发教科书的设计费骄傲花费时间<br>
        肯定会安居客发挥空间的话费卡时间发货</p>
        <a href="#" class="" id="">下载APP </a>
    </div>
    <div class="right">
        <dl>
            <dt>合作伙伴</dt>
            <dd><a href="" class="">合作机构</a></dd>
            <dd><a href="" class="">合作导师</a></dd>
        </dl>
        <dl>
            <dt>合作伙伴</dt>
            <dd><a href="" class="">合作机构</a></dd>
            <dd><a href="" class="">合作导师</a></dd>
        </dl>
        <dl>
            <dt>合作伙伴</dt>
            <dd><a href="" class="">合作机构</a></dd>
            <dd><a href="" class="">合作导师</a></dd>
        </dl>
    </div>
</div>
</div>
</body>
</html>