简书的网页的搭建

最新推荐文章于 2022-06-14 11:09:59 发布

junlingshiwo

最新推荐文章于 2022-06-14 11:09:59 发布

阅读量434

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45722135/article/details/106027953

版权

本文详细介绍了简书网页的搭建过程，分为三部分：头部导航的布局与样式设计，文章列表的创建及图片处理，以及图文混合内容的排版。通过修改HTML标签属性，实现元素的样式美化，如圆角处理、宽高调整、字体大小改变等。

摘要由CSDN通过智能技术生成

简书网页的搭建可分三部分说：

第一部分:图中所示是头部导航，分为了头左边中间右边。

我在中间部分使用了列表标签，对图片都进行了了样式处理，就是一些简单的改变宽高度，也将搜索框进行圆角的改变，这样看起来就美观。

第二部分：中间部分，我们需要知道文章列表用<div>标签中包<dl>标签。在这里图片使用<dt>标签中所写。

对上边的图片进行了圆角的处理，也将<p>标签进行了字体大小改变等。

第三部分：中第一部分就是将图片进行位置改变调整。第二部分就是和上边的图文混合的调整，采用的方法都是相同。第三部分就是如下所示：

这部分用了的<li>标签来完成的，这也是图文混合的，都是对图像进行了圆角处理，改变文字的大小。

下面是对小部分的样式代码

样式变化完后就进行复制，就没有必要的麻烦。

下面是整个制造过程：

<nav id="nav">
    <div class="nav-content">
        <!--左边-->
        <div class="nav-content-left">
            <a href="#">
                <img src="简书/js_logo.png" alt="">
            </a>

        </div>
        <!--中间内容-->
        <div class="nav-content-c">
            <ul>
                <li><a href=""><img src="简书/find_icon.png" alt="">发现</a></li>
                <li><a href=""><img src="简书/book_icon.png" alt="">关注</a></li>
                <li><a href=""><img src="简书/ld_icon.png" alt="">消息</a></li>
                <li class="search-input">
                    <input type="text" value="搜索">
                    <img class="search-icon" src="简书/fd_icon.png" alt="" >
                </li>
            </ul>
        </div>
        <!--右边-->
        <div class="nav-content-right">
            <img src="简书/jsa_icon.png" alt="" class="jsa-btn">
            <img src="简书/touxiang_img.png" alt="" class="head-btn">
            <a href="#" class="write-btn">
                <img src="简书/write_icon.png" alt="">
                写文章
            </a>
        </div>
    </div>
</nav>
<!--主体内容-->
<div id="main">
<!--主体左边-->
<div class="main-left">
    <!--焦点图-->
    <div class="main-left-top">
        <img src="简书/jdt.png" alt=""