html中对页面布局的理解

一个新手

发布： 2017-10-17 10:23:55

原创

2044人浏览过

做页面前，先分析页面的布局，有几个模块，就用几个p，可以层层嵌套。、

用了p后，进行浮动就不会出现样式错乱

代码大概是这样的（有点繁琐，不过解决了燃眉之急）：

<p>
	<p>
		<p class="d_left"></p>
		<p class="d_left"></p>
	</p>
	<p>
		<p></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10985">
                            <img src="https://img.php.cn/upload/webcode/000/000/008/176456700286982.jpg" alt="LANUX蓝脑商务网站系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10985">LANUX蓝脑商务网站系统</a>
                            <p>LANUX V1.0 蓝脑商务网站系统 适用于网店、公司宣传自己的品牌和产品。 系统在代码、页面方面设计简约，浏览和后台管理操作效率高。 此版本带可见即可得的html编辑器, 方便直观添加和编辑要发布的内容。 安装： 1.解压后，更换logo、分类名称、幻灯片的图片及名称和链接、联系我们等等页面。 2.将dbconfig.php里面的数据库配置更改为你的mysql数据库配置 3.将整个文件夹上传至</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="LANUX蓝脑商务网站系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10985" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="LANUX蓝脑商务网站系统">
                        </a>
                    </div>
                
	</p>
</p>

登录后复制

将图中两个并排的p样式左浮动（上图是浮动后的效果）：

立即学习“前端免费学习笔记（深入）”；

.d_left {//将两个p进行左浮动
  float:left;
}

登录后复制

以上就是html中对页面布局的理解的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

html表格是如何创建_使用table标签创建HTML表格结构【结构】 html如何加html_在一个HTML中加入另一个HTML内容【加入】如何在html中内嵌html_在HTML代码中内嵌其他HTML【其他】怎么把html代码怎么运行_运行html代码方法【教程】 html音频如何往下挪_调整HTML音频播放器位置【位置】