-
html常见网页布局,常见网页布局.html
2021-06-14 02:59:03常见网页布局* {margin: 0;padding: 0;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;height: 300px;...展开全文常见网页布局* {
margin: 0;
padding: 0;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
height: 300px;
background-color: #ff80c0;
margin: 0 auto;
}
li {
list-style: none;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: #8000ff;
margin-right: 10px;
}
/* 中间要空格 */
.box .last{
margin-right: 0;
}
.footer {
height: 200px;
background-color: #00ffff;
margin-top: 10px;
}
top- 1
- 2
- 3
- 4
一键复制
编辑
Web IDE
原始数据
按行查看
历史
-
常见网页布局
2017-07-13 13:51:14常见网页布局展开全文1. “国”字形：即最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要内容，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的最多的一种结构类型。例如：
2. “匡”字形：这种形式去掉了“国”字形布局的最右边部分，给主内容区释放了更多空间，这种布局上面是标题及广告横幅，接下来是左侧一窄列链接，右侧是很宽的正文，下面也是一些网站的辅助信息。例如：
3. “三”字形：这种布局由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。
4. “川”字形：这种布局整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。
5. 海报型布局：这种布局常出现在网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接。这种类型常出现在企业网站和个人主页。
6. Flash布局：这种布局与海报型结构类似，不同的是由于Flash功能强大，页面所表达的信息更丰富。
7. 标题文本型布局：这种布局中页面内容常以文本为主，最上面往往是标题，下面是正文，比如一些文章页面或注册页面等就是这一类。
文章参考：
https://wenku.baidu.com/view/76ca10d5c850ad02df80410f.html 感谢原作者的分享
-
【常见网页排版布局】
2020-04-30 15:04:57第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* 适用于全部元素 */ ... margin...展开全文放在盒子里
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* 适用于全部元素 */ *{ padding: 0; margin: 0; } /* 匹配id为box的 */ #box{ width:700px; background-color: red; /* 自动居中 */ margin: 0 auto; } #logo{ height: 100px; background-color: #FF0000; } #nav{ height: 50px; background-color: yellow; } #main{ height: 600px; } #left_main{ display: inline-block; width: 350px; height: 600px; background-color: blue; } #right_main{ display: inline-block; width: 350px; height: 600px; /* 浮动 */ float: right; background-color: deeppink; } #foot{ height: 40px; background-color: aqua; } </style> </head> <body> <div id="box"> <!-- id值唯一，不能相同 --> <div id="logo"> </div> <!-- nav导航 --> <div id="nav"> </div> <!-- 广告 --> <div id="guanggao"> </div> <!-- 主体 --> <div id="main"> <div id="left_main"> </div> <div id="right_main"> </div> </div> <!-- 底部 --> <div id="foot"> </div> </div> </body> </html>
-
DIV CSS网页标准化布局_常见网页布局
2020-04-24 07:10:18DIV+CSS网页标准化布局 主讲张双 Email:zhangshuang3@126.com 1概述 使用DIV+CSS对网站进行布局符合W3C标准采用这种方式布局通常是为了说明与HTML表格定位方式的区别因为现在的网站设计标准中已经不再使用表格定位... -
Dreamweaver中网页布局的方法教学设计x_常见网页布局
2020-11-25 20:42:44Dreamweaver中网页布局的方法教学设计 授课班级高一(3)授课教师:曹雪丽 授课时间2004.5.12 教材分析 1 .教学目标 教学目标既是教学的出发点和归宿又是师生双边活动的中介因此我参照高中新课 程标准和高中学生现有的... -
html5手机端页面布局,移动端H5常见的布局方式有哪些
2021-06-13 04:22:18随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配移动端设备屏幕尺寸非常多...展开全文随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配
移动端设备屏幕尺寸非常多，碎片化严重，Android和苹果设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等
一般的电脑端的页面布局在手机上无法完全适应，那么如何让一个页面匹配各个分辨率的页面呢？
那么首先现在移动端有两种适配方案:
一 .单独制作移动端页面(主流)也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站
移动端单独制作的常见布局方式:
流式布局(百分比布局)
flex 弹性布局(强烈推荐)
less+rem+媒体查询布局
混合布局
比如百度pc端和移动端的官网:
pc端一套代码样式
移动端一套代码样式二 .响应式页面兼容移动端即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
响应式
媒体查询
bootstarp
比如三星的官网 , 用不同终端打开, 它会自动适配不同的样式 ,但是却是一套代码 ,但是由于响应式网站能够适应市场上所有主流终端，在开发中的测试量非常很大很麻烦，因此响应式布局不能在大型网站的前提下实现多终端自适应。所以大部分网站都不用它.
那么我们来看看他们有什么不同
流式布局：
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限 制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
下面是百分比布局(流式布局)的用法:
例如这样的三个盒子
第一个盒子占50%右边俩个各占25%flex布局
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活 性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性 将失效。
flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器(flex
container)
下面就是flex布局 ,弹性盒模型:
flexbu'j
给盒子添加flex属性,改变盒子模型rem适配布局
1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当 前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem 做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适 配。
技术方案：
1.rem+媒体查询
2.lflexible.js+rem
盒子样式字体随着屏幕宽度变化
运用rem和媒体查询自动适配不同屏幕混合布局
至于混合布局就是在我们做网站项目的时候 ,可以根据不同的组件需求 ,做出相应的 布局方式 ,并不局限在哪一种 ,例如我们全局使用rem适配 ,部分盒子照样用flex布局 可以混用,并不影响.(同上rem里面运用了flex)
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子 元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
超小屏幕(手机，小于 768px)：设置宽度为 100%
小屏幕(平板，大于等于 768px)：设置宽度为 750px
中等屏幕(桌面显示器，大于等于 992px)：宽度设置为 970px
大屏幕(大桌面显示器，大于等于 1200px)：宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
下面是通过媒体查询来展示不同屏下的响应式排列 ,当然实际网站很多时候都是通过bootstarp来做的
响应式就会根据屏幕大小排版
这些都是常见的H5移动端布局方式 ,实际运用中flex和rem都是非常实用的布局方式 ,那么今天就这些了
想要了解更多 ,请关注一下 ,一起交流学习
举报/反馈
-
移动端有哪些常见的布局方式？
2019-06-03 19:38:53【移动端有哪些常见的布局方式？ 】 大家好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员 今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见的... -
CSS网页布局实例 常见的12种网页布局
2020-09-25 13:59:46在一个国外网站看到的12种常见的div+css布局模板，是可以根据屏幕分辨路自适应宽度的动态布局，感觉很好。 -
移动端有哪些常见布局方式？
2021-07-14 20:28:22移动端有哪些常见布局方式？ 一、固定布局 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点... -
网页常见布局
2021-01-23 11:52:45网页常见布局 一、标准文档流 在没有任何样式的修饰下，所有元素，将从上至下，从左至右进行排列 块级元素：独占一行，可以设置宽高大小 行级元素：从左往右依次排列，不能设置宽高和大小 二、脱离标准文档流 ... -
几种常见网页布局设计
2019-09-18 02:39:33现在的网页差不多都采用分列布局，常见的有单列布局（如百度首页）、双列布局、三列布局和混合布局，超过三列的布局很少见，在此只介绍以上四种。 注：混合布局可以看作是在三列布局的基础上，再继续分块。本文仅... -
常见的网页布局
2020-01-02 10:26:40一、网页常见布局 二、网页布局分类 1、固定布局： 以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸 2、可切换的固定布局： 以像素作为页面的基本单位，参考主流设备尺寸，设计几套不同... -
基于CSS的常见网页布局
2021-10-05 20:24:57题目：常见网站首页页面布局。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=... -
java布局有哪些,网页设计有哪些布局的方法和技巧？
2021-04-17 10:27:18那么网页设计有哪些布局的方法和技巧呢？下面为大家总结了布局的六个方法，其实设计思路都并不复杂，技巧在于设计的时候，要从目标用户和产品内容的具体情况出发，考虑和审视布局的安排。下面我们来一起看一下布局的... -
网页常见的布局结构
2013-11-12 13:13:32一般来说，网站首页的形式不外乎有两种，一种是纯粹的形象展示型，这种类型文字信息较少，图像信息较多，另一种是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、... -
web开发技巧-网页排版布局常见问题及解决办法
2021-09-09 10:06:16在前端开发过程中比较麻烦的地方其实并不是开发，而是考虑用哪些页面布局样式，一个好的布局排版重点突出，看起来舒适不费劲，整体简洁大方，更重要的是能让用户更好的更方便的浏览网站。今天小千就来给大家介绍几种... -
五种常见的网页布局
2019-11-22 17:43:411.自适应布局 特点：页面窗口发生变化时，网页元素宽度和字体大小不变，元素位置会变化 方案：为不同的屏幕分辨率(屏幕宽度为1200,1920)定义布局，相同的类名指定不同样式代码（媒体查询），bootstrap的栅栏系统和... -
网页布局-12种常见布局
2016-05-15 17:16:0612中常见布局 固定宽度 1行1列2行2列3行1列1行2列-两栏布局2行2列3行3列-三栏 自适应宽度 1行1列2行1列3行1列1行2列 备注：页面的加载顺序是根据页面的结构，灵活控制页面的加载顺序。 -
HTML常见的网页布局
2020-06-12 14:32:35虽然这种布局随着屏幕、设备而有所差异，有的设计师会倾向于设计成固定宽或者横跨整个页面的布局，但是总体的模式都大同小异。 ·导航栏 ·顶部大图，图片上叠有文字标题 ·2~4个分栏，承载不同类别的信息，有... -
常见的布局方式有哪些？解释不同解决方案的优缺点
2019-06-17 22:47:00多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应还有等分布局等。 一列定宽，一列自适应 float + margin IE 6 中会有3像素的 BUG，... -
常见的网页布局分析
2016-05-13 22:12:00通过观察上面的三张图，也即是三个网页，不难发现，他们都有一个共同点都是两边留白，而且留白的区域都很大。我们观察代码会发现，其实三者都设了一个类似于wrap的div，把内容都包在这个wrap的盒子中... -
网页设计16种常见布局
2012-09-28 17:42:11网页设计16种常见布局图，简明扼要，非常实用的东西。
