备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

前端实战_手撕HTML、CSS

2024-01-25 13
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端实战_手撕HTML、CSS

@TOC

在学完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>
文章标签：
前端开发
关键词：
CSS前端
CSS html
前端css
HTML前端
前端html
博客zhu虎康
目录
相关文章
爱吃糖的范同学
|
1天前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则？
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则？
爱吃糖的范同学
7 0
爱吃糖的范同学
|
1天前
|
前端开发 JavaScript UED
【Web 前端】css的引用有哪些，link和@import的区别？
【4月更文挑战第22天】【Web 前端】css的引用有哪些，link和@import的区别？
爱吃糖的范同学
8 0
爱吃糖的范同学
|
1天前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些？
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些？
爱吃糖的范同学
7 1
爱吃糖的范同学
|
1天前
|
XML 存储 前端开发
【Web 前端】HTML、XHTML、XML 有什么区别？
【4月更文挑战第22天】【Web 前端】HTML、XHTML、XML 有什么区别？
爱吃糖的范同学
10 2
游客hjgt3xacvje4w
|
1天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
游客hjgt3xacvje4w
8 0
爱叨叨的小嘟
|
2天前
|
前端开发 容器
用html、css实现一颗简单小爱心【2022首文】
用html、css实现一颗简单小爱心【2022首文】
爱叨叨的小嘟
7 0
我菜就爱学
|
2天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
我菜就爱学
7 1
鑫宝Code
|
3天前
|
前端开发 JavaScript API
【热门话题】PostCSS：现代前端开发中的CSS增强工具
**PostCSS** 是一个JavaScript库，用于转换CSS，通过插件系统解析、优化代码，确保兼容性和效率。它提供插件化架构、向后/向前兼容性、代码质量提升和与其他工具链集成。PostCSS工作原理包括解析CSS成抽象语法树，插件遍历并转换AST，最后生成增强版CSS。主要功能包括Autoprefixer（自动添加浏览器前缀）、CSS变量、CSS Modules、Linting、预处理器支持等。在实际项目中，PostCSS可通过配置文件集成到Webpack等构建工具中，持续优化工作流，助力现代前端开发。
鑫宝Code
13 3
wscwdie
|
4天前
|
机器学习/深度学习 前端开发 JavaScript
探寻前端巨变：从HTML到现代框架的发展历程
探寻前端巨变：从HTML到现代框架的发展历程
wscwdie
13 2
yma16
|
4天前
|
移动开发 前端开发 JavaScript
前端vue3——html2canvas给网站截图生成宣传海报
前端vue3——html2canvas给网站截图生成宣传海报
yma16
6 0

热门文章

最新文章

  • 1
    构建高效响应式Web界面：现代前端框架的比较
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 3
    前端最常见的JS面试题大全
  • 4
    layui：从崛起到蜕变，前端框架的华丽篇章
  • 5
    使用机器学习优化前端用户体验
  • 6
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
  • 7
    如何使用浏览器调试前端代码？
  • 8
    常见的前端加密方式有哪些？运用场景有哪些？
  • 9
    uniapp上传图片 前端以及java后端代码实现
  • 10
    从前端到后端：构建现代化Web应用的技术探索
  • 1
    HTML 链接
    18
  • 2
    HTML 超链接
    81
  • 3
    HTML 链接语法
    25
  • 4
    请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
    27
  • 5
    自适应窗口图片轮播HTML代码
    21
  • 6
    前端框架演进史：从HTML到现代化开发
    40
  • 7
    如何在HTML中添加图像链接
    27
  • 8
    如何在HTML文件中添加超链接
    24
  • 9
    HTML玩转超链接a标签
    27
  • 10
    PHP爬虫技术：利用simple_html_dom库分析汽车之家电动车参数
    30

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • HTML及前端框架
  • 前端开发基础1：前端开发环境的安装和配置
  • CSS基础教程
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考