您的位置：首页 > Web前端

[置顶] 《前端从傻逼到牛逼》第一章 乾坤大挪移

2018-01-10 11:09 447 查看
序章大概了解了HTML是什么，HTML的两个标签，HTML的几个属性和最关键的style属性

这章来讲讲如何使用这两个标签和属性再加上我即将教你的“定位”知识来做一些基本的页面布局

说最简单的页面，大家第一个想到的是不是百度？以前用来测试网络是否连接的页面

那咱们就用百度页面来实践，（毛爷爷说过，实践是检验真理的唯一标准）

目前我看到的百度首页是这样：


控制变量法，咱们无视图片等一些还没接触的标签，以及还没学习的样式

首先咱们看百度的页面的布局：

从整体上看：最上方有一小条导航栏，正中间是搜索框和搜索按钮，最下方的中间是关于百度的一些备案信息。

那布局从整体上咱们就分成上、中、下三个部分（其实大部分页面都是这样的结构）

再分析：

“上”部分：最上方的导航内容主要在右边（其实登录以后，你会发现左边也有东西）

“中”部分：只有一个百度的logo和搜索框和搜索按钮，搜索框在最中心，上下，左右居中，百度的logo在搜索框上方（先无视）

“下”部分：二维码+两行字整体也是上下、左右居中

分析如图：


开始写代码，无论什么时候，开始永远是html

<html>
</html>然后是三个主要的部分
<html>
<div>上</div>
<div>中</div>
<div>下</div>
</html>再分别是“上”部分
<html>
<div>
<div>上部分的右边</div>
</div>
<div>中</div>
<div>下</div>
</html>“中”部分
<html>
<div>
<div>上部分的右边</div>
</div>
<div>
<div>中部分的上下左右垂直部分内容</div>
</div>
<div>下</div>
</html>“下”部分
<html>
<div style="float:right;">
<div>上部分的右边</div>
</div>
<div>
<div>中部分的上下左右垂直部分内容</div>
</div>
<div>
<div>下部分的上下左右垂直部分内容</div>
</html>


好了，页面的大致布局就完事了，但是这样的页面展现的形式不是我们想要的

这时候就需要用样式来控制了，也就是style属性

先介绍一个新的样式：display，意思是类型，就是指这个标签是什么类型的标签，这个样式有个默认值，但不同的标签默认值不同，div的默认值是block，而我们要学的值是flex，当把div的style->display设置成flex时，我们就可以使用flex-direction样式，justify-content样式，align-item样式了。

flex-direction是设置当前标签的子标签的排列方式，可以设置为：column（竖着排列），row（横着排列）

justify-content是设置当前标签的子标签的主轴的对齐方式，可以设置为：flex-start（开始位置），flex-end（结束位置），center（居中）。（关于主轴：flex布局中轴线分为横轴和纵轴，当flex-direction的值为column时，主轴是竖着的，也就是纵轴，如果是row就是横着的，主轴就是横轴）

现在让上部分的内容靠右吧

<html>
<div>
<div style="display:flex;flex-direction:row;justify-content:flex-end">上部分的右边</div>
</div>
<div>
<div>中部分的上下左右垂直部分内容</div>
</div>
<div>
<div>下部分的上下左右垂直部分内容</div>
</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航