DIV+CSS简介_html/css_WEB-ITnose

传统页面数据和布局都混合在一起，如下图：

而DIV+CSS存在下述优势：

1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。     2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。     3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。     4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。     5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。  6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

<p><strong>我们可以简单的这样理解div+css:</strong></p><p><strong>div 是用于存放内容(文字,图片,元素)的容器。</strong></p><p><strong>css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.</strong></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2202">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679998510823.png" alt="UP简历">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2202">UP简历</a>
                            <p>基于AI技术的免费在线简历制作工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="UP简历">
                                <span>128</span>
                            </div>
                        </div>
                        <a href="/ai/2202" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="UP简历">
                        </a>
                    </div>