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

CSS布局快速入门

2024-06-06 16
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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学堂
目录
相关文章
aliyun5297948689-49597
|
7天前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量，用于复杂二维布局。然而，隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
aliyun5297948689-49597
22 11
aliyun5297948689-49597
|
7天前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块，简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外，还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局，强调实践和理解核心概念是掌握Flexbox的关键。
aliyun5297948689-49597
27 10
你都不懂
|
4天前
|
前端开发 容器
如何用css实现两列布局?
如何用css实现两列布局?
你都不懂
10 1
aliyun5297948689-49597
|
9天前
|
前端开发 开发者
CSS进阶-CSS3多列布局
【6月更文挑战第14天】CSS3的多列布局简化了复杂布局，提供杂志样式排版。通过`column-*`属性如`column-count`和`column-gap`实现内容分割和列间距控制。常见问题包括内容溢出、列间距不当和兼容性问题。解决方法包括使用`word-break`和`hyphens`处理长单词，灵活设置列宽和列数，以及为旧浏览器提供回退方案。代码示例展示了一个自动平衡列高的两列布局。理解并解决这些问题将帮助开发者更好地利用CSS3多列布局。尽管有兼容性挑战，但它是现代网页设计的重要工具。
aliyun5297948689-49597
60 1
aliyun5297948689-49597
|
12天前
|
前端开发 开发者 容器
CSS基础-Flexbox布局基础
【6月更文挑战第11天】Flexbox是CSS3的全新布局模式，简化了网页动态布局问题。通过`display: flex`设置容器，调整`flex-direction`、`justify-content`、`align-items`等属性控制项目排列和对齐。适用于响应式布局、均匀分布空间和元素对齐。注意浏览器兼容性、选择合适布局模式及区分对齐与排序属性。通过实例代码学习和实践，掌握Flexbox能有效提升网页布局效率。
aliyun5297948689-49597
20 3
_BugMan
|
11天前
|
存储 前端开发 编译器
【CSS预处理语言】less快速入门
【CSS预处理语言】less快速入门
_BugMan
15 1
aliyun5297948689-49597
|
12天前
|
前端开发 开发者 容器
CSS基础-Grid布局基础
【6月更文挑战第11天】CSS Grid布局简化了网页设计，提供前所未有的灵活性。本文探讨Grid基础、常见问题及解决方案。学习重点包括理解容器和项目、正确使用网格线、避免固定单位、有效对齐元素以及选择合适布局模型。通过深入学习、实践调试和参考资源，设计师能避免陷阱，掌握这一现代布局技术。实践是关键，不断尝试将使你在Grid布局中游刃有余。
aliyun5297948689-49597
18 1
茶卡盐佑星_
|
9天前
|
前端开发 JavaScript 容器
css实现瀑布流布局
css实现瀑布流布局
茶卡盐佑星_
6 0
NorthS
|
11天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例，使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单，包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式，如背景色、边框、字体颜色等，并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局，适应不同设备的屏幕宽度。
NorthS
22 0
NorthS
|
11天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构，包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签，以及一个简单的登录界面，由一个容器`.container`包含一个登录框`.login-wrapper`，登录框内有输入框和登录按钮。CSS部分设置了全局样式，如字体、边距，并为HTML元素添加了样式，如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
NorthS
16 0