网页设计中常见的几种布局

最新推荐文章于 2024-06-11 19:26:21 发布
最新推荐文章于 2024-06-11 19:26:21 发布
阅读量5.8k 收藏 11
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qlzx_syzx/article/details/50929540
版权

1.一列布局,使用margin:0 auto属性

代码：


  
    设置自动居中
    
  
    
       
   
   

    
    top
   
   

          
   
    
       
   
   

    
    bottom

2.两列布局,使用浮动
代码： 

  
     两列布局
     
  
  
     
    
    

        
     
     
     
    
    

    
    
    

       
     
     

      
      left
3.三列布局（仍然使用浮动进行实现）
代码： 

  
     清除浮动
     
  
  
     
    
    

        
     
     
     
    
    

    
    
    

       
     
     

      
      left
     
     

       
     
     

      
      middle
4.混合布局
混合布局就是在常见的几种布局上运用浮动或其他定位机制对子元素块再分割。如下面
是两列布局,可以在right块中再添加两个子元素，并设置左右浮动就形成了混合布局
代码： 

  
     两列布局
     
  
  
     
    
    

        
     
     
     
    
    

    
    
    

       
     
     

      
      left

RecordLiuV
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
几种常见的网页布局
zn0128的博客
07-14 1120
两列自适应布局：一列由内容撑开，另一列撑满剩余宽度 <style> * { margin: 0; padding: 0; } .content { width: 1000px; height: 500px; background-color: lightblue; } .left { float: left; background-color: pink; }
网页常见的布局结构
11-12
一般来说，网站首页的形式不外乎有两种，一种是纯粹的形象展示型，这种类型文字信息较少，图像信息较多，另一种是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等。
几种常见网页布局设计
产品老A，6年互联网大厂AIPM，专注探索新型人机交互
03-20 678
　　现在的网页差不多都采用分列布局，常见的有单列布局（如百度首页）、双列布局、三列布局和混合布局，超过三列的布局很少见，在此只介绍以上四种。 　　注：混合布局可以看作是在三列布局的基础上，再继续分块。本文仅从宏观结构上介绍，比如新浪、腾讯首页可以看作是三列布局，淘宝、京东首页可以看做是混合布局，这些大型网站会根据其内容更改其布局。 　　最简单的要数单列布局了，这种布局适合各种搜索引擎...
掌握这12种常见网页布局设计方法，提升你的设计技能
最新发布
2301_79599164的博客
06-11 1637
网页布局在整个网页设计中起着至关重要的作用。不同的网页布局设计会产生不同的视觉效果，直接影响浏览者对网页的第一印象。即时设计认为，网页布局在很大程度上决定了网站用户如何与网页内容互动。好的网页设计具有很强的实用性和适应性，所以在布局上要选择合适的设计，让用户满意。作为UI设计师，我们应该遵循网页布局的最佳实践效果，为观众带来最前沿、最全新的网页体验。以下常见的网页布局是什么？跟随即时设计了解12种常见的网页布局设计方法。12种常见的网页布局设计方法。
常见的网页布局结构
热门推荐
qq_73599840的博客
11-19 1万+
整理了一些适合网页设计初学者的网页布局结构，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。
HTML常见布局
jfscs的博客
06-08 2179
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;布局练习&amp;lt;/title&amp;g
网页设计技巧:网页中英文混排行高问题
09-22
网页设计中，中英文混排的行高问题是一个常见的挑战，尤其在IE6和IE7浏览器下更为显著。这个问题的核心在于中英文字符的基线不同，导致排列时产生视觉上的不整齐，严重影响了网页的美观度。Arial字体的下边缘相对于...
常见的几种页面布局、BFC以及处理过程中遇到的高度塌陷问题
01-20
在网页设计和开发中，页面布局是至关重要的，它决定了用户如何与网站互动以及内容如何在不同设备上呈现。常见的页面布局方式有多种，每种都有其特定的应用场景和优缺点。 1. 静态布局：这是一种最基础的布局方式，...
网页布局设计.doc
12-23
以下是对几种常见网页布局结构的详细解析： 1. **骨骼型结构**：这种布局通常包含顶部（包含logo和导航）、中部内容区（可能分为两或三栏）以及底部（页脚）。它提供了清晰的信息层次，让用户能够快速理解和导航。 ...
常见布局方案
03-13
本篇文章将深入探讨几种常见的布局方案，包括上中下一栏式、左右两栏式以及它们的不同实现方法，以及左中右三栏布局。 1. 上中下一栏式布局： 这种布局是最基础的网页布局之一，通常用于展示网站头部信息、主要内容...
商业设计公司介绍网页模板
01-22
【商业设计公司介绍网页模板】是一种专为商业设计公司打造的网页设计框架，它通常包含一系列预设的页面布局、色彩方案、图形元素以及交互设计，以帮助设计师快速创建具有专业感和品牌形象的网站。这样的模板能有效...
html基本常见布局
kinglyjn的博客
12-29 434
基本 banner-left-content-footer 布局<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本 banner-left-content-footer 布局</title> <style> body { background-color: #e1ddd9;
html常用的样式布局
zhaoxinglin123的专栏
04-22 1145
自己写写，留着以后备用 1、ul  li 标签排列布局 2、p 标签带有自动换行功能 3、文字对齐方式 text-align:center是垂直居中，如果水平对齐，只需要设置line-height的高度与所在的标签高度一致即可 4、常用样式font-size:14px; 5、在某个div中，里面的一些子DIV采用流式布局，这时候父Div的高度和子div的高度是不相关联的，如果需要设置父D
pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局
panliyou的博客
01-17 4735
pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局 1分栏布局: float 2 通栏布局: 在页面中不设置宽度，让默认宽度和浏览器等宽的布局 3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
2 html中常见的布局有哪三种,html中的三种布局分别是什么
weixin_36312301的博客
06-17 171
流动布局(html网页默认的布局方式)(视频教程分享：html视频教程)特点：1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。2、内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)浮动布局(float)特点：默认布局下，块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示。就需要使...
html页面布局主要有哪些形式,网页布局的基本类型
weixin_39640849的博客
06-07 1240
10.3　网页布局的基本类型网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的，这种规则使得网页布局只能在左右对称结构布局、“同”字型结构布局、“回”字型结构布局、“匡”字型结构布局、“厂”字型结构布局、自由式结构布局、“另类”结构布局等几种布局的...
html布局类型有哪些,html+css布局类型
weixin_32715349的博客
06-21 411
一、单列布局1.代码如下单列布局body{margin:0;}.box{width:960px;margin:0 auto;}.dinbu{height:100px;border:1px solid #f0f;}.zhongbu{height:400px;border:1px solid #f00;}.dibu{height:100px;border:1px solid #00f;}运行结果二、双...
HTML常用布局---新浪布局
weixin_34146410的博客
04-12 294
<!DOCTYPE html> MarkdownPad Document html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,...
网页布局-12种常见布局
sh0109的博客
05-15 4185
12中常见布局 固定宽度 1行1列2行2列3行1列1行2列-两栏布局2行2列3行3列-三栏 自适应宽度 1行1列2行1列3行1列1行2列 备注：页面的加载顺序是根据页面的结构，灵活控制页面的加载顺序。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值