简书网页的搭建可分三部分说:
第一部分:图中所示是头部导航,分为了头左边 中间 右边。
我在中间部分使用了列表标签,对图片都进行了了样式处理,就是一些简单的改变宽高度,也将搜索框进行圆角的改变,这样看起来就美观。
第二部分:中间部分,我们需要知道文章列表用<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=""