前端实战_手撕HTML、CSS

其他 2021-11-17 15:33:39 阅读次数: 0

前端实战

在学完HTML与CSS之后，用两天时间完成了爱宠网的制作
在这里插入图片描述
把整个网页切成上述八个 div 盒子，然后再依次完成每个 div 盒子的内容

一、顶部导航

在这里插入图片描述

html

<div class="top-nav">
  <div class="top-nav-con">
    <div class="top-nav-l fl">您好，欢迎来到爱宠网</div>
    <div class="top-nav-r fr">
      <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>
</div>

css

ul，li {
    
    
  list-style: none;
}
a {
    
    
  text-decoration: none;
  color: #000;
}
.fl {
    
    
  float: left;
}
.fr {
    
    
  float: right;
}

/*顶部导航开始*/
.top-nav {
    
    
  height: 26px;
  background: #f7f7f7;
  border-bottom: 1px solid #d8d8d8;
}
.top-nav-con {
    
    
  width: 970px;
  margin: 0 auto;
  height: 26px;
}
.top-nav-r ul li {
    
    
  float: left;
  height: 26px;
  line-height: 26px;
}
.top-nav-l {
    
    
  height: 26px;
  line-height: 26px;
}

.top-nav-r ul li a {
    
    
  display: inline-block;
  height: 26px;
  background: url('images/sj.png') no-repeat right;
  padding: 0 10px;
}

二、logo部分、搜索

在这里插入图片描述

html

<div class="logo size">
    <img src="./images/案例logo.png" alt="">
    <div class="search fr">
        <input type="text" placeholder="请输入关键字">
        <input type="button" class="fr">

    </div>
</div>

css

 .logo img{
    
    
      width: 200px;
      height: 84px;
  }
  .fr{
    
    
      float: right;
  }
  .search{
    
    
      width: 519px;
      height: 30px;
      border: 1px solid #c9c9c9;
      background: #f9f9f9;
      margin-top: 28px;
      padding: 5px 5px 5px 4px;
  }
  .search input[type='button'] {
    
    
      width: 99px;
      height: 30px;
      background: url(images/serch.png);
      vertical-align: middle;
  }
  .search input[type="text"]{
    
    
      width: 80%;
      height: 80%;
  }

三、主导航部分部分

在这里插入图片描述

html

<div class="nav size">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">狗狗</a></li>
        <li><a href="#">狗粮</a></li>
        <li><a href="#">售后</a></li>
    </ul>
</div>

css

.nav{
    
    
       width: 970px;
       height: 25px;
       border-bottom: 2px solid #0266a3;
   }
   .nav ul li a{
    
    
       display: inline-block;
       height: 25px;
       line-height: 25px;
       color: #0266a3;
       padding: 0 15px;
   }
   .nav ul li a:hover{
    
    
       background: #0266a3;
       color: #f9f9f9;
   }

四、宠物市场部分

在这里插入图片描述

html

<div class="mar size">
    <div class="mar-l">
        <div class="mar-title">宠物市场</div>
        <div class="mar-list">
            <ul>
                <li class="icon1"><a href="">宠物狗</a></li>
                <li class="icon1"><a href="">宠物猫</a></li>
                <li class="icon1"><a href="">宠物鼠</a></li>
                <li class="icon1"><a href="">宠物兔</a></li>
                <li class="icon1"><a href="">宠物猪</a></li>
                <li class="icon1"><a href="">宠物饲料</a></li>
            </ul>
        </div>
    </div>
    <div class="mar-r"><img src="./images/700.png" style="width: 770px;height: 210px ;"></div>
</div>

css

.mar{
    
    
    margin-top: 10px;
    height: 210px;
    font: 12px simsun;
}
.mar-l{
    
    
    float: left;
    width: 200px;
    height: 210px;
    background-color: #ebf0f6;
}
.mar-r{
    
    
    float: left;
}
.icon1{
    
    
    background: url("./images/icon_1.png") no-repeat 9px;
    margin: 0 30px;

}
.mar-title{
    
    
    background-color: #0266a3;
    color: #f9f9f9;
    text-align: center;
    height: 28px;
    line-height: 28px;
}
.mar-list{
    
    
    margin-top: 5px;
}
.mar-list li{
    
    
    float: none;
    height: 28px;
    line-height: 28px;
    text-align: center;
}
.icon1 a{
    
    
    display: inline-block;

}
.icon1 a:hover{
    
    
    font-size: 16px;
}

五、狗狗种类

在这里插入图片描述

html

<div class="bud">狗粮种类</div>

css

.bud{
    
    
      border-top: #c3d7e4 solid 2px;
      width: 948px;
      height: 34px;
      margin: 14px auto 11px;
      background-color:#ecf1f7 ;
      font-size: 14px;
      font-weight: 700;
      line-height: 34px;
      padding-left: 22px;
  }

六、狗狗种类列表

在这里插入图片描述

html

<div class="pro">
    <div class="pro-l">
        <div class="p1">
            <div class="pl"></div>
            <div class="pr"></div>
        </div>
        <div class="p2"></div>
        <div class="p1">
            <div class="pl"></div>
            <div class="pr"></div>
        </div>
    </div>
    <div class="pro-r">
        <div class="pro-rtitle">狗狗咨询</div>

        <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>
            <li><a href="#">怎么样训练家养牧羊犬 </a></li>
            <li><a href="#">怎么样训练家养牧羊犬 </a></li>
        </ul>

        </div>
    </div>

css

.pro{
    
    
       display: flex;
       justify-content: space-between;
       width: 970px;
       height: 344px;
       margin: 0 auto;
   }
   .pro-l{
    
    
       width: 727px;
       height: 344px;
       border: 1px solid #d8d8d8;
   }
   .pro-r{
    
    
       width: 228px;
       height: 344px;
       border: 1px solid #d8d8d8;
       font-size: 17px;
   }
   .pro-rtitle{
    
    
       height: 28px;
       line-height: 28px;
       padding-left: 15px;
       background: #fbfbfb;
       border-bottom: 1px solid #e0e6f0;
   }
   .pro-r ul li{
    
    
       padding-left: 25px;
       height: 24px;
       background: url("./images/li_bg.png") no-repeat 10px 6px;
       margin-top: 12px;
   }


   p {
    
    
       display: block;
       margin-block-start: 1em;
       margin-block-end: 1em;
       margin-inline-start: 0px;
       margin-inline-end: 0px;
   }        .Foodlr1{
    
    
       width: 25%;
       height: 100%;
       text-align: center;
       float: left;
       margin-top: 3px;

   }

七、狗粮种类

在这里插入图片描述
同五

八、狗粮种类列表

在这里插入图片描述

html

<div class="dogFood">
    <div class="Foodl">
        <div class="Foodll"><a href="#">查看更多>></a></div>
        <div class="Foodlr">
            <div class="Foodlr1">
            <img src="./images/狗粮.png" alt="">
            <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
            <p class="et2">适合年龄1个月-3个月的幼犬</p>
            <p class="et3">市场价：
            <del>$59</del></p>
            <p class="et1">直销价：
            <span>$39</span></p>
            </div>
            <div class="Foodlr1">
                <img src="./images/狗粮.png" alt="">
                <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
                <p class="et2">适合年龄1个月-3个月的幼犬</p>
                <p class="et3">市场价：
                    <del>$59</del></p>
                <p class="et1">直销价：
                    <span>$39</span></p>
            </div>
            <div class="Foodlr1">
                <img src="./images/狗粮.png" alt="">
                <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
                <p class="et2">适合年龄1个月-3个月的幼犬</p>
                <p class="et3">市场价：
                    <del>$59</del></p>
                <p class="et1">直销价：
                    <span>$39</span></p>
            </div>
            <div class="Foodlr1">
                <img src="./images/狗粮.png" alt="">
                <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
                <p class="et2">适合年龄1个月-3个月的幼犬</p>
                <p class="et3">市场价：
                    <del>$59</del></p>
                <p class="et1">直销价：
                    <span>$39</span></p>
            </div>
        </div>
    </div>
    <div class="Foodr">
        <img src="./images/右边狗图片.png" alt="">
    </div>
</div>

css

.dogFood{
    
    
   display: flex;
   justify-content: space-between;
   width: 970px;
   height: 344px;
   margin: 0 auto;

}
.Foodlr{
    
    
   width: 727px;
   height: 320px;
   border: 1px solid #d8d8d8;
   border-top:2px solid #00b0e7 ;
   font: 12px simsun;
   color: #000;
}
.Foodll{
    
    
   width: 720px;
   text-align: right;
   height: 23px;
   line-height: 23px;
   margin-left: auto;
}
.Foodll a{
    
    

   font-size: 14px;
   color: #00b0e7;
   font-weight: 700;
}
p {
    
    
   display: block;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
}
.Foodlr1{
    
    
   width: 25%;
   height: 100%;
   text-align: center;
   float: left;
   margin-top: 3px;

}

.et2,
.et3{
    
    
   color: #999999;
}
span,del{
    
    
   color: #990000;
}
.Foodr{
    
    
   margin-top: 10px;
   margin-right: 12px;
}

.p1{
    
    
   width: 100%;
   height: 50%;
   /*border: solid 1px cornflowerblue;*/
   display: flex;
   justify-content: space-between;
}
.p2{
    
    
   border-top: 1px solid black;
   margin: 0 5px;
}
.pl,
.pr{
    
    
   width: 318px;
   height: 142px;
   border: solid 1px red;
   margin: 15px 10px;
   /*padding: 2px 0 2px 2px;*/

}

九、foot部分

在这里插入图片描述

html

<div class="copyright">
    <p>本案例只供大家参考学习使用</p><br>
<p>
    Copyright @1999-2021 博客在线教育 | 晋ICP备99019762号
</p>
</div>

css

.copyright p{
    
    
    margin: 0 auto;
    text-align: center;
    font: 12px simsun;
}

总的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <style>
        *{
      
      
            padding: 0;
            margin: 0;
        }
        li{
      
      
            float: left;
            list-style: none;
            font: 12px simsum;
            display: list-item;
            text-align: -webkit-match-parent;
        }

        a{
      
      
            text-decoration: none;
            color: #000;
        }

        .top-nav{
      
      
            height: 26px;
            background: #f7f7f7;
            border-bottom: 1px solid #d8d8d8;
        }
        .top-nav-con{
      
      
            width: 970px;
            margin: 0 auto;
            /*height: 26px;*/
            font: 12px simsun;
        }
        .top-nav-r ul li{
      
      
            float: left;

            height: 26px;
            line-height: 26px;

        }
        .top-nav-l{
      
      
            height: 26px;
            line-height: 26px;
            float: left;
        }
        .top-nav-r ul li a{
      
      
            display: inline-block;
            height: 26px;
            background: url("images/sj.png") no-repeat right;
            padding: 0 10px;
        }
        /*.top-nav-l fl{*/
        /*    float: left;*/
        /*}*/
        .top-nav-r {
      
      
            float: right;
        }
        .size{
      
      
            width: 970px;
            margin: 0 auto;
        /* height: 26px;*/
            }
        .logo img{
      
      
            width: 200px;
            height: 84px;
        }
        .fr{
      
      
            float: right;
        }
        .search{
      
      
            width: 519px;
            height: 30px;
            border: 1px solid #c9c9c9;
            background: #f9f9f9;
            margin-top: 28px;
            padding: 5px 5px 5px 4px;
        }
        .search input[type='button'] {
      
      
            width: 99px;
            height: 30px;
            background: url(images/serch.png);
            vertical-align: middle;
        }
        .search input[type="text"]{
      
      
            width: 80%;
            height: 80%;
        }
        .nav{
      
      
            width: 970px;
            height: 25px;
            border-bottom: 2px solid #0266a3;
        }
        .nav ul li a{
      
      
            display: inline-block;
            height: 25px;
            line-height: 25px;
            color: #0266a3;
            padding: 0 15px;
        }
        .nav ul li a:hover{
      
      
            background: #0266a3;
            color: #f9f9f9;
        }
        .mar{
      
      
            margin-top: 10px;
            height: 210px;
            font: 12px simsun;
        }
        .mar-l{
      
      
            float: left;
            width: 200px;
            height: 210px;
            background-color: #ebf0f6;
        }
        .mar-r{
      
      
            float: left;
        }
        .icon1{
      
      
            background: url("./images/icon_1.png") no-repeat 9px;
            margin: 0 30px;

        }
        .mar-title{
      
      
            background-color: #0266a3;
            color: #f9f9f9;
            text-align: center;
            height: 28px;
            line-height: 28px;
        }
        .mar-list{
      
      
            margin-top: 5px;
        }
        .mar-list li{
      
      
            float: none;
            height: 28px;
            line-height: 28px;
            text-align: center;
        }
        .icon1 a{
      
      
            display: inline-block;

        }
        .icon1 a:hover{
      
      
            font-size: 16px;
        }


        .bud{
      
      
            border-top: #c3d7e4 solid 2px;
            width: 948px;
            height: 34px;
            margin: 14px auto 11px;
            background-color:#ecf1f7 ;
            font-size: 14px;
            font-weight: 700;
            line-height: 34px;
            padding-left: 22px;
        }
        .pro{
      
      
            display: flex;
            justify-content: space-between;
            width: 970px;
            height: 344px;
            margin: 0 auto;
        }
        .pro-l{
      
      
            width: 727px;
            height: 344px;
            border: 1px solid #d8d8d8;
        }
        .pro-r{
      
      
            width: 228px;
            height: 344px;
            border: 1px solid #d8d8d8;
            font-size: 17px;
        }
        .pro-rtitle{
      
      
            height: 28px;
            line-height: 28px;
            padding-left: 15px;
            background: #fbfbfb;
            border-bottom: 1px solid #e0e6f0;
        }
        .pro-r ul li{
      
      
            padding-left: 25px;
            height: 24px;
            background: url("./images/li_bg.png") no-repeat 10px 6px;
            margin-top: 12px;
        }
        .dogFood{
      
      
            display: flex;
            justify-content: space-between;
            width: 970px;
            height: 344px;
            margin: 0 auto;

        }
        .Foodlr{
      
      
            width: 727px;
            height: 320px;
            border: 1px solid #d8d8d8;
            border-top:2px solid #00b0e7 ;
            font: 12px simsun;
            color: #000;
        }
        .Foodll{
      
      
            width: 720px;
            text-align: right;
            height: 23px;
            line-height: 23px;
            margin-left: auto;
        }
        .Foodll a{
      
      

            font-size: 14px;
            color: #00b0e7;
            font-weight: 700;
        }
        p {
      
      
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .Foodlr1{
      
      
            width: 25%;
            height: 100%;
            text-align: center;
            float: left;
            margin-top: 3px;

        }

        .et2,
        .et3{
      
      
            color: #999999;
        }
        span,del{
      
      
            color: #990000;
        }
        .Foodr{
      
      
            margin-top: 10px;
            margin-right: 12px;
        }
        .copyright p{
      
      
            margin: 0 auto;
            text-align: center;
            font: 12px simsun;
        }




        .p1{
      
      
            width: 100%;
            height: 50%;
            /*border: solid 1px cornflowerblue;*/
            display: flex;
            justify-content: space-between;
        }
        .p2{
      
      
            border-top: 1px solid black;
            margin: 0 5px;
        }
        .pl,
        .pr{
      
      
            width: 318px;
            height: 142px;
            border: solid 1px red;
            margin: 15px 10px;
            /*padding: 2px 0 2px 2px;*/

        }

</style>
</head>
<!--我们可以把整个网页切成上述八个 div 盒子，然后再依次完成每个 div 盒子的内容-->
<body>
<!--顶部导航-->
<div class="top-nav">
    <div class="top-nav-con">
        <div class="top-nav-l">您好，欢迎来到爱宠网</div>
        <div class="top-nav-r">
            <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>
</div>
<!--logo部分-->
<div class="logo size">
    <img src="./images/案例logo.png" alt="">
    <div class="search fr">
        <input type="text" placeholder="请输入关键字">
        <input type="button" class="fr">

    </div>
</div>
<!--主导航部分-->
<div class="nav size">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">狗狗</a></li>
        <li><a href="#">狗粮</a></li>
        <li><a href="#">售后</a></li>
    </ul>
</div>
<!--宠物市场部分-->
<div class="mar size">
    <div class="mar-l">
        <div class="mar-title">宠物市场</div>
        <div class="mar-list">
            <ul>
                <li class="icon1"><a href="">宠物狗</a></li>
                <li class="icon1"><a href="">宠物猫</a></li>
                <li class="icon1"><a href="">宠物鼠</a></li>
                <li class="icon1"><a href="">宠物兔</a></li>
                <li class="icon1"><a href="">宠物猪</a></li>
                <li class="icon1"><a href="">宠物饲料</a></li>
            </ul>
        </div>
    </div>
    <div class="mar-r"><img src="./images/700.png" style="width: 770px;height: 210px ;"></div>
</div>
<!--狗狗种类-->
<div class="bud">狗狗种类</div>
<!--狗狗种类列表-->
<div class="pro">
    <div class="pro-l">
        <div class="p1">
            <div class="pl"></div>
            <div class="pr"></div>
        </div>
        <div class="p2"></div>
        <div class="p1">
            <div class="pl"></div>
            <div class="pr"></div>
        </div>
    </div>
    <div class="pro-r">
        <div class="pro-rtitle">狗狗咨询</div>

        <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>
            <li><a href="#">怎么样训练家养牧羊犬 </a></li>
            <li><a href="#">怎么样训练家养牧羊犬 </a></li>
        </ul>

        </div>
    </div>
</div>
<!--狗粮种类-->
<div class="bud">狗粮种类</div>
<!--狗粮种类列表-->
<div class="dogFood">
    <div class="Foodl">
        <div class="Foodll"><a href="#">查看更多>></a></div>
        <div class="Foodlr">
            <div class="Foodlr1">
            <img src="./images/狗粮.png" alt="">
            <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
            <p class="et2">适合年龄1个月-3个月的幼犬</p>
            <p class="et3">市场价：
            <del>$59</del></p>
            <p class="et1">直销价：
            <span>$39</span></p>
            </div>
            <div class="Foodlr1">
                <img src="./images/狗粮.png" alt="">
                <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
                <p class="et2">适合年龄1个月-3个月的幼犬</p>
                <p class="et3">市场价：
                    <del>$59</del></p>
                <p class="et1">直销价：
                    <span>$39</span></p>
            </div>
            <div class="Foodlr1">
                <img src="./images/狗粮.png" alt="">
                <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
                <p class="et2">适合年龄1个月-3个月的幼犬</p>
                <p class="et3">市场价：
                    <del>$59</del></p>
                <p class="et1">直销价：
                    <span>$39</span></p>
            </div>
            <div class="Foodlr1">
                <img src="./images/狗粮.png" alt="">
                <p class="et1">耐威克狗粮泰迪贵宾成犬5斤2.5KG小型犬粮</p>
                <p class="et2">适合年龄1个月-3个月的幼犬</p>
                <p class="et3">市场价：
                    <del>$59</del></p>
                <p class="et1">直销价：
                    <span>$39</span></p>
            </div>
        </div>
    </div>
    <div class="Foodr">
        <img src="./images/右边狗图片.png" alt="">
    </div>
</div>
<!--foot部分-->
<div class="copyright">
    <p>本案例只供大家参考学习使用</p><br>
<p>
    Copyright @1999-2021 博客在线教育 | 晋ICP备99019762号
</p>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_53810245/article/details/119679576
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022