html课题研究学习日记#31

编写食谱页面侧边栏中的搜索栏和最近文章栏

搜索栏HTML代码

<div class="widget">

   <h2 class="widget-title">搜索</h2>

    <form class="search-form">

        <input type="text" class="form-control" placeholder="请输入关键词...">

     </form>

</div>

CSS代码

侧边栏下的标题样式

.sidebar .widget-title {

    display: block;

    font-size: 18px;

    margin: 0 0 2rem;

    padding: 0;

    line-height: 1;

}

最近文章栏

主要HTML代码

<div class="widget">

    <h2 class="widget-title" id="btnShowClose" οnclick="funShowClose()">最近文章</h2>

       <div class="blog-list-widget" >

                          div class="list-group" id="tbcontent" style="display: block;">

                <a href="single.html" class="list-group-item list-group-item-action                                                         flex-columnalign-items-start">                                                      <divclass="w-100justify-content-between"><imgsrc="upload/blog_square_14.jpg"alt=""class="img-fluid float-left">

           <h5 class="mb-1">五种你必须尝试的健康的食物</h5>

            <small>12 Jan, 2022</small>

</div>

CSS代码

.sidebar .widget ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.sidebar .blog-list-widget img {

    width: 55px;

    padding: 0;

}

.sidebar .blog-list-widget .mb-1 {

    font-size: 15px;

}