html+css的布局方式

总共分为浮动布局、定位布局、flex布局、table-cll表格布局、网格布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域

一、display（flex）布局

display中的属性

1.flex-direction:

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

2.flex-wrap:

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方

justify-content:

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items:
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

二、网格布局

网格布局就是把HTML 元素设置为 display，属性为 grid

grid-template-columns 属性在网格容器中创建列
grid-template-rows 属性在网格容器中设置行的高度

实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>main {width: 800px;height: 600px;border: 1px solid darkcyan;display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 50px auto 50px;}.col1 {border: 1px solid salmon;grid-column-start: 1;grid-column-end: 4;}.col2 {border: 1px solid seagreen;grid-column-start: 1;grid-column-end: 2;}.col3 {border: 1px solid red;grid-column-start: 2;grid-column-end: 4;}.col4 {border: 1px solid blue;grid-column-start: 1;grid-column-end: 4;}</style>
</head><body><main><div class="col1"></div><div class="col2"></div><div class="col3"></div><div class="col4"></div></main>
</body></html>

效果：

使用网格布局做一个小的项目

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/index.min.css">
</head><body><div class="box"><div class="top"><p class="s">手机</p><p class="a">查看更多</p></div><div class="content"><div class="left"><img src="img/left.jpg" alt=""></div><div class="right"><div class="top"><img src="img/2.png" alt=""><br><p style="line-height: 0;">Xiaomi 12S Ultr</p><br><p style="line-height: 0;" class="text1">这镇来卡|专业莱卡影像</p><br><p style="line-height: 0;" class="text2">5999元起</p></div><div class="top2"><img src="img/2.png" alt=""><p>Xiaomi 12S Ultr</p><p class="text1">这镇来卡|专业莱卡影像</p><p class="text2">5999元起</p></div><div class="top3"><img src="img/3.png" alt=""><p>Xiaomi 12S Ultr</p><p class="text1">这镇来卡|专业莱卡影像</p><p class="text2">5999元起</p></div><div class="top4"><img src="img/4.png" alt=""><p style="line-height: 0;">Xiaomi 12S Ultr</p><p class="text1">这镇来卡|专业莱卡影像</p><p class="text2">5999元起</p></div><div class="footer"><img src="img/5.png" alt=""><p style="line-height: 0;">Xiaomi 12S Ultr</p><p class="text1">这镇来卡|专业莱卡影像</p><p class="text2">5999元起</p></div><div class="footer1"><img src="img/6.png" alt=""><p>Xiaomi 12S Ultr</p><p class="text1">这镇来卡|专业莱卡影像</p><p class="text2">5999元起</p></div><div class="footer2"><img src="img/7.png" alt=""><p>Xiaomi 12S Ultr</p><p class="text1">这镇来卡|专业莱卡影像</p><p class="text2">5999元起</p></div><div class="footer3"><img src="img/8.png" alt=""><p>Xiaomi 12S Ultr</p><p class="text1">这镇来卡|专业莱卡影像</p><p class="text2">5999元起</p></div></div></div></div>
</body></html>

scss代码

.box {width: 1200px;margin: 0 auto;background-color: #F5F5F5;display: grid;grid-template-columns: 1fr 3fr;.top {grid-column-start: 1;grid-column-end: 4;display: grid;grid-template-columns: 1fr 3fr;.s {grid-column-start: 1;grid-column-end: 2;margin-left: 10px;font-size: 20px;margin-top: 10px;}.a {grid-column-start: 3;grid-column-end: 4;margin-right: 10px;font-size: 14px;color: #666;cursor: pointer;}}.content {width: 1200px;display: grid;grid-template-columns: 1fr 3fr;grid-template-rows: auto;.left {grid-column-start: 1;grid-column-end: 2;img {width: 100%;height: 600px;}}.right {grid-column-start: 2;grid-column-end: 4;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-template-rows: 300px 300px;.top,.footer {margin-top: 10px;grid-column-start: 1;grid-column-end: 2;margin-right: 10px;background-color: #fff;margin-left: 10px;img {width: 200px;}p {text-align: center;font-size: 14px;}.text1 {color: #999;}.text2 {color: #F96429;}}.top2,.footer1 {grid-column-start: 2;grid-column-end: 3;margin-right: 10px;margin-top: 10px;background-color: #fff;img {width: 200px;}p {line-height: 10px;text-align: center;font-size: 14px;}.text1 {color: #999;}.text2 {color: #F96429;}}.top3,.footer2 {margin-top: 10px;grid-column-start: 3;grid-column-end: 4;margin-right: 10px;background-color: #fff;img {width: 200px;}p {line-height: 10px;text-align: center;font-size: 14px;}.text1 {color: #999;}.text2 {color: #F96429;}}.top4,.footer3 {margin-top: 10px;grid-column-start: 4;grid-column-end: 5;margin-right: 10px;background-color: #fff;img {width: 200px;}p {line-height: 10px;text-align: center;font-size: 14px;}.text1 {color: #999;}.text2 {color: #F96429;}}}}
}

效果：

html+css布局相关推荐

css布局中的居中问题
css布局中的居中问题作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
理解 CSS 布局和块级格式上下文
本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用过CSS 布局你 ...
CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
php两个按钮左右怎么做,css布局两个button在同父标签中左右两侧分布的方法
本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法,分享给大家,具体如下: 效果图布局代码提交重置 style="float:right;width:50%&quo ...
前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...
html的高度自适应,CSS布局自适应高度解决方法
原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...
典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
3.实战HTML+CSS布局（实例入门篇）
转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...
bootstrap 垂直居中布局_给你一份详细的CSS布局指南，请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...

html+css布局

html+css的布局方式

总共分为浮动布局、定位布局、flex布局、table-cll表格布局、网格布局

一、display（flex）布局

display中的属性

1.flex-direction:

2.flex-wrap:

justify-content:

align-items:

二、网格布局

网格布局就是把HTML 元素设置为 display，属性为 grid

效果：

使用网格布局做一个小的项目

html代码

scss代码

效果：

html+css布局相关推荐

最新文章

热门文章

html+css布局

html+css的布局方式

总共分为浮动布局、定位布局、flex布局、table-cll表格布局、网格布局

一、display（flex）布局

display中的属性

1.flex-direction:

2.flex-wrap:

justify-content:

align-items:

二、网格布局

网格布局就是把HTML 元素设置为 display， 属性为 grid

效果：

使用网格布局做一个小的项目

html代码

scss代码

效果：

html+css布局相关推荐

最新文章

热门文章

网格布局就是把HTML 元素设置为 display，属性为 grid