整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
hinkcss给大家分享下 DIV CSS布局流程
CSS代码布局
第一步骤：分析网页美工图
第二步骤：建立项目文件夹（包括用于放图片、CSS文件、JS文件等文件夹）
为了节约时间推荐使用thinkcss初始化模板，直接解压即可使用。
第三步骤：PS软件切出图片素材（可以先切出一部分图片素材，待布局中再根据需求再切出需要图片素材）
第四步骤：将先切出图片放入images文件夹中，包括布局中切出图片依然放入此文件夹中
以下操作中ThinkCSS初始化模板基础上进行。
第五步骤：修改初始化模板HTML文件与CSS文件，将对应文件代码修改调整为当前项目实用的，比如背景、文字大小、文字颜色、超链接文字颜色等CSS样式。
第六步骤：根据分析 从头到尾开始 着手布局，一般布局时推荐布局时注意测试HTML兼容性，再继续布局，直到布局完成HTML。
CSS中最常见的块元素，便是 div，每一个都将独立为一行。而最常见的内联元素，便是 span了，每一个都默认从左到右排列连接起来。
有时候我们需要 div 的结构，但是是需要 span 的效果，如何将这个特点一起利用起来呢？
想把上图的京东·技术与数据中台，和logo为一行，初始代码如下，初始效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div>
<div class="position-name">京东</div>
<div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>加上 display: inline-block，使之为内联元素，而非块元素即可，修改后的代码如下，修改后的效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position {
/* 融合为块元素 */
display: inline-block;
margin-left: 8px;
}
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div class="position">
<div class="position-name">京东</div>
<div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>利用好 CSS 提供的 display: inline-block 属性即可。
义：HTML文档中的分隔或者是部分，常用于组合块级元素，以便通过样式表来对元素进行格式化。
<div> 是一个块级元素，也就是说它的内容自动的开始一个新行，换行是它固有的特定格式表现，同时它也是一个双向标签。
它应用于样式表，有多种属性：Class、Style、title、ID等。
小实例：
在div中给定id或者是类选择器：
<h1>侠课岛</h1>
<div class="content1">第一段文本内容....</div>
<div class="content2">第二段文本内容....</div>
<div class="content3">第三段文本内容....</div>
<div id="main">第四段文本内容.....</div>直接在div中添加设置样式属性：
<div style="color:#777;">
<h2>定义文本内容颜色</h2>
</div>动手小练习
*请认真填写需求信息，我们会在24小时内与您取得联系。
