HTML5+CSS3常见布局方式-唐朝资源网

1、轮廓布局1.1个代码

等高布局是指子元素在父元素中等高的布局方式


    
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
    
    
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
    


    .father {
        width: 600px;
        overflow: hidden;
        margin: 20px auto;
    }
    .f1 {
        background-color: #888;
    }
    .f2 {
        background-color: bisque;
    }
    .f1,
    .f2 {
        float: left;
        width: 300px;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }

1.2 轮廓布局总结：2、圣杯布局2.1 代码

圣杯布局是三列结构，左右固定宽度，中间自适应，可以响应屏幕大小的布局。


    center
    left
    right


    .father{
        padding: 0 300px 0 200px;
        min-width: 200px;
        height: 300px;
    }
    .center, .left, .right{
        float: left;
        position: relative;
        height: 100%
    }
    .left{
        width: 200px;
        left: -200px;
        margin-left: -100%;
        background-color: blue;
    }
    .right{
        width: 300px;
        margin-right: -300px;
        background-color: burlywood;

    }
    .center{
        width: 100%;
        background: blanchedalmond;
    }

2.2 圣杯布局总结3、双翼布局3.1 代码

双翼布局一般与圣杯布局相同，但不需要使用;。


    
        
            哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星
        
    
    left
    right


    .father{
        height: 300px;
        min-width: 700px;
    }
    .father div{
        height: 100%;
        float: left;
    }
    .center{
        width: 100%;
        background: #ccc;
    }
    .left{
        width: 200px;
        background: #999;
        margin-left: -100%;
    }
    .right{
        width: 300px;
        background: #666;
        margin-left: -300px;
    }
    .con{
        padding-left: 200px;
        padding-right: 300px;
    }

3.2 双翼布局总结：4、rem布局

rem是一个相对单位，类似于em，是指相对于父元素的字体大小。


    这是一个盒子


   .wrap{
       font-size:20px;
   }
    .box{
        font-size:2rem;
    }

5、弹性盒布局5.1 原则

是一种新的布局方式，用于布局页面而不是浮动；而又分为flex 和flex 。要使用灵活的盒子布局，您需要设置 div 的: flex; 将 div 对象显示为灵活的框（容器）。flex容器默认显示在第一行，即它的flex属性为：flex-:row。常见的弹性特性如下：

5.2 常用属性弹性属性描述属性值

柔性-

确定主轴的方向（x 泵送）

row（默认值）主轴为水平方向，起点在左端；row-：主轴为水平方向，起点在右端；：主轴为垂直方向，起点在上边缘；

–

定义项目在主轴上的对齐方式

flex-start（默认）是左对齐的；flex-end：右对齐；: 居中; space-：两端对齐，item之间的间距相等，flex box元素会均匀分布在行中，两端并排；space-：每一项两边的间距相等

对齐项目

定义项目在横向（垂直）方向的对齐方式

flex-start：侧轴起点对齐；flex-end：侧轴的端点对齐；: 侧轴中点对齐；：对齐item第一行文本的；（默认）：如果item没有设置高度或者设置为auto，它将占据整个容器的高度

弹性包装

如果一个轴不适合如何换行

（默认）：不换行；wrap：换行，第一行在上面；wrap-: 换行，第一行在下面

命令

定义项目的排序顺序

默认为 0 表示不排序；值越大，越晚；如果排序后的值相同，则按照你的顺序排序。

弹性成长

定义项目的放大倍数

默认值为 0；如果你的子元素的宽度不够，不要放大比例

柔性-

定义项目的缩小范围

默认值为 0；子元素空间不足，不会缩小

6、普通响应式布局

响应式布局意味着同一个页面在不同的屏幕尺寸上有不同的布局

6.1 原理

使用媒体查询以不同的大小进行 css 更改。

6.2 媒体查询

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}
// 上面这段代码里面有个screen，是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。可以直接省去，如：
@media (max-width: 960px){
    body{
        background: #000;
    }
}

@media screen and (max-device-width:960px){
body{
    background:red;
   }
}
// 这里表示当窗口尺寸等于960px时，body的背景颜色是red。
@media screen and (min-width:960px){
body{
    background:orange;
  }
}
// 这里表示当窗口尺寸大于960px时，body的背景颜色是orange。
@media screen and (min-width:960px) and (max-width:1200px){
body{
   background:yellow;
  }
}
// 这里表示当窗口尺寸大于960px并小于1200px时，body的背景颜色是yellow。

6.3 与自适应布局的区别

响应性是指在不同尺寸的设备上渲染同一个网页；响应式布局是指同一个网页自动适应不同尺寸的屏幕，根据屏幕的宽度自动调整网页的内容大小。

图片[1]-HTML5+CSS3常见布局方式-唐朝资源网

6.4 个实例




    
    
    
    武汉亿房网
    
        * {
            padding: 0;
            list-style: none;
            margin: 0;
        }
        body,
        html {
            width: 100%;
            height: 100%;
            background: #000;
        }
        .wrap {
            width: 984px;
            margin: 0 auto;
        }
        .title {
            color: #ff9900;
            padding-top: 35px;
        }
        .nav {
            width: 100%;
            height: 50px;
        }
        .nav li{
            background: #666633;
            float: left;
            width: 25%;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
        .con{
            overflow: hidden;
            margin-top: 12px;
        }
        .left{
            width: 726px;
            float: left;
            background: #fff;
            border-radius: 20px;
            padding: 0 0px 25px;
        }
        .left p{
            padding: 0 32px
        }
        .right{
            width: 240px;
            float: right;

            border-radius: 20px;
        }
        .left h3{
            padding-top: 12px;
            padding-left: 12px;
        }
        .rigth_con1{
            background: #fff;
            border-radius: 20px;
            height: 220px;
            margin-bottom: 10px;
        }
        .rigth_con1 ul{
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
        }
        .rigth_con1 li{
            width: 33.33%;
            margin-bottom: 10px;
        }
        .rigth_con1 li img{
            width: 100%;
        }
        .footer{
            height: 36px;
            background: #666699;
            line-height: 36px;
            text-align: center;
            color: #fff;
        }
        .bb{
            display: none;
        }
        @media screen and (max-width:960px){
            .bb{
                display: block;
            }
            .aa{
                display: none
            }
            .wrap{
                width: 100%;
            }
            .title{
                text-align: center;
            }
            .nav li{
                width: 20%;
                margin-right: 20px;
                border-radius: 10px;
            }
            .left ,.right{
                width: 100%;
            }
            .left{
                margin-bottom: 20px;
            }
            .footer{
                height: auto;

                margin-top: 20px;
            }
            .footer span{
                display: block;
                background: #666699;
            }
        }
    


    
        往事随风
        往事随风  三
        
            亿房首页
            
                亿房信息
            
                在线咨询
            
            
                亿房论坛
        
        
                
                    武汉亿房网
                    前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
                    html指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML
                    css级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力
                    javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能
                
                
                    
                    
                    
                        
                            
                            
                            
                            
                            
                            
                        
                    
                    
                
            
                
                    关于站长之家
                    联系我们(电话)
                    广告服务
                    友情链接
                    网站地图
                    版权声明
                    人才招聘

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END