AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS布局快速入门

2024-06-06 30
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS布局快速入门

1346854341_5182.png 最近因为项目需要，不得不重新看看CSS/HTML之类的东西，不看不要紧，一看吓一跳

原来不知道真的是太多，以前从未认真对待过，这次总结了一下学习所得，算是对自己

有个交代，也可能让想了解CSS/HTML布局应用的朋友快速入门：

1. CSS 与HTML元素直接关联，以HTML h1元素为例。CSS定义如下：

H1 {
margin: auto;
width:600px;
font-size:18px;
font-weight: bold;
}

2.  CSS与HTML元素的id属性关联，以HTML元素img标签为例， CSS定义如下：

#image_style{
margin: auto;
width:450px;
height:450px;
background: #1F1F1F;
border-style: solid;
border-width: 5px;
border-color: #0000FF;
}
#image_style .sub_style{
padding: 25px;
margin:auto;
}

3. CSS与HTML元素的class属性关联，以HTML元素DIV为例，CSS定义如下：

.header {
margin: auto;
width: 600px;
background: #2D2D2F;
}


以上三个CSS综合运用结合HTML代码，页面效果如下：

1346854341_5182.png

完整的HTML代码如下：

<html>
<head>
    <title>CSS Related to HTML element directly</title>
    <style type="text/css">
      .header {
      margin: auto;
      width: 600px;
      background: #FF1F1F;
    }
    
    h1 {
    font-size:18px;
    font-weight: bold;
    text-align: center;
    /*display: inline;*/
    }
    
    #image_style{
      margin: auto;
      width:450px;
      height:450px;
      background: #1F1F1F;
      border-style: solid;
      border-width: 5px;
      border-color: #0000FF;
    }
    #image_style .sub_style{
      padding: 25px;
      margin:auto;
    }
    
  </style>
</head>
<body>
  <div class="header">
  <h1>My Fist CSS Introduce - Sample Codes</h1>
  </div>
  <div id="image_style">
    <img class="sub_style" src="images/star_stareu.png">
  </div>
</body>
</html>

4. CSS与DIV元素结合使用实现排版布局

很多常见的博客系统网页布局可以通过CSS + DIV很容易的实现，下面是一个最常用的博

客网页布局CSS+DIV代码解释与介绍, 首先看一下布局效果：

1346854429_5245.png

DIV代码如下：

  <div id="container">
    <div id="header">
      <label>头区域</label>
    </div>
    <div id="leftBar">
      <label>左侧导航</label>
    </div>
    <div id="content">
      <label>内容</label>
    </div>
    <div id="rightBar">
      <label>右边框</label>
    </div>
    <div id="footer">
      <label><b>尾区域</b></label>
    </div>
  </div>


CSS的定义代码如下：

    #container {
      margin:auto; /* IE6 supports them with a full and valid doctype */
      width: 800px;
      /* margin-left: 200px;  */
      background: #ffffff;
    }
    
    #header {
      height: 80;
      background: #B0C4DE;
    }
    
    #leftBar {
      float: left; 
      width: 150px; 
      background: #DFDF12; 
    }
    
    #content {
      float:left;
      width:500px;
      background-color: #cdcde6;
    }
    
    #rightBar { 
      float:right; 
      width: 150px; 
      background: #EBEBEB; 
    }
    
    #rightBar #zhao_shang {
      /*height:600px; - comment it */
      padding: 20px;
    }
    
    #footer { 
      clear:both;
      text-align: center;
      background:#DDDDDD;
    }

5.  CSS注释语法 - CSS注释代码使用如下语法格式/* 代码片段*/

6. 浏览器支持问题

上面的代码在IE6/IE7/IE8中显示时候，HTML页面头必须声明doctype，否则margin: atuo;

不能被IE浏览器识别，doctype声明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

该布局的完整HTML代码如下，copy之后save为html文件可以直接在chrome运行：

<html>
<head>
    <title>CSS Related to HTML element directly</title>
    <style type="text/css">
    #container {
      margin:auto; /* IE6 supports them with a full and valid doctype */
      width: 800px;
      /* margin-left: 200px;  */
      background: #ffffff;
    }
    
    #header {
      height: 80;
      background: #B0C4DE;
    }
    
    #leftBar {
      float: left; 
      width: 150px; 
      background: #DFDF12; 
    }
    
    #content {
      float:left;
      width:500px;
      background-color: #cdcde6;
    }
    
    #rightBar { 
      float:right; 
      width: 150px; 
      background: #EBEBEB; 
    }
    
    #rightBar #zhao_shang {
      /*height:600px; - comment it */
      padding: 20px;
    }
    
    #footer { 
      clear:both;
      text-align: center;
      background:#DDDDDD;
    } 
  </style>
</head>
<body>
  <div id="container">
    <div id="header">
      <label>头区域</label>
    </div>
    <div id="leftBar">
      <label>左侧导航</label>
    </div>
    <div id="content">
      <label>内容</label>
    </div>
    <div id="rightBar">
      <label>右边框</label>
    </div>
    <div id="footer">
      <label><b>尾区域</b></label>
    </div>
  </div>
</body>
</html>



文章标签：
前端开发
Web App开发
关键词：
CSS布局
CSS布局快速入门
opencv学堂
目录
相关文章
我是快乐的嘟嘟
|
12天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
89 34
大树营养快线
|
6天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
大树营养快线
14 0
九月天空
|
1月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
九月天空
46 4
有路有乔-六月
|
1月前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
44 3
杀死一只知更鸟debug
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记，详细介绍了flex容器和元素的相关属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等，解释了这些属性在弹性盒子布局中的作用和用法。
杀死一只知更鸟debug
51 2
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
70 0
石小石Orz
|
3月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局？
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局？
石小石Orz
100 3
技术混子
|
3月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中，网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具，为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用，帮助读者快速掌握这一强大的网页布局工具。
技术混子
52 3
土木林森
|
3月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统，打造未来网页设计！
【8月更文挑战第25天】在网页设计领域，布局至关重要。传统的布局方法难以满足复杂需求，CSS Grid 栅格系统因此诞生。它是一种二维布局模式，能直接控制行和列，简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器，并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸，轻松实现响应式布局。此外，CSS Grid 支持高级功能，如网格区域划分和对齐设置，极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强，CSS Grid 必将成为未来网页设计的关键技术之一。
土木林森
64 1
白如意i
|
3月前
|
前端开发
CSS Grid 布局：span 关键字
CSS Grid 布局：span 关键字
白如意i
62 0

热门文章

最新文章

  • 1
    一张图让你快速掌握CSS3倒影
  • 2
    css应该注意的小技巧
  • 3
    如何用纯 CSS 创作一个脉动 loader
  • 4
    美妙的 CSS3 动画！一组梦幻般的按钮效果
  • 5
    Css基本样式————字体
  • 6
    CSS3实现多样的边框效果
  • 7
    CSS3-实现单选框radio的小动画
  • 8
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 9
    纯CSS3实现宽屏二级下拉菜单
  • 10
    05.javascript访问CSS
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    63
  • 2
    技术心得：xpath、CSS定位方法
    34
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    146
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    66
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    133
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    41
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    61
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    129
  • 9
    使用HTML和CSS创建响应式表格
    146
  • 10
    常见的css优化方案都有那些
    47

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 《优酷响应式布局技术全解析》
  • WebGL 在前端可视化中的实践

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    DataWorks售前咨询