Web — 调色盘打开+div

一丶 Ctrl + Shift + C 快速弹出调色盘

这里指的是 sublime 编译器

二丶 div 是什么？

效果图：

那么我们要制作这个网页就应该要先搭建起它的布局架构，此时我们就需要用到div来进行布局：

对比布局架构和成品图片，是不是感觉到布局是一样的，接下来只需要往里面放内容就可以了！
这段利用 div+css布局的代码为：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="box"><div id="banner"></div><div id="menu"></div><div class="clearfix id="main" ><div id="left"></div><div id="center"></div><div id="right" ></div></div></div><div id="footer"></div></body>
</html>

css代码：

#box{width: 1024px;margin: 0 auto;
}#banner{width: 1024px;background: #0EF0A5;height: 300px;
}
#menu{width: 1024px;height: 100px;background: #05F3EC;
}
#main{width: 1024px;
}
#left{float: left;width: 250px;height: 400px;background: #F60A0A;
}
#center{float: left;width: 524px;height: 400px;background: #1A9EFC
}
#right{float: right;width: 250px;height: 400px;background: #5D5D5D;
}
#footer{width: 1024px;height: 150px;background: #F7D80D;margin: 0 auto;
}
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;
}

这里CSS的作用主要是用来给页面设置背景颜色以及让内容浮动使得三个div共同占据一行，再来就是清除浮动！这些内容会在后续章节再做讲解，这里只为分析div的作用！

那么通过上面的分析，可以看出 div 其实就是拿来划分代码区域，以及设置网页布局架构的！

Web — 调色盘打开+div相关推荐

Echarts调色盘
<template><div><h2>调色盘</h2><div id="canvas3" style="width: ...
echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]
一个简单的例子 1. 下载并引入 (1)npm install echarts --save (2)import echarts from 'echarts' //main.js引入echarts 或 ...
34-Vue之ECharts高级-调色盘
ECharts高级-调色盘前言调色盘主题调色盘全局调色盘局部调色盘渐变颜色前言本篇来学习下ECharts中调色盘的使用调色盘它是一组颜色,图形.系列会自动从其中选择颜色, 不断的循 ...
009_调色盘和高亮样式
1. color调色盘 1.1. 调色盘, 可以在option中设置.它给定了一组颜色, 图例.系列会自动从其中选择颜色.可以设置全局的调色盘, 也可以设置系列自己专属的调色盘. option = { ...
原生JS搭配canvas模式开发的调色盘
之前做了一版纯div版的,有同学反应加载速度太慢.无可否认,1W多个div能不慢么.做那个版本的用意在于...好玩, 好了,同样废话不多说,这次先上图吧! 风格是学习的谷歌的,一眼就看得出来,由于IE ...
Echarts主题和调色盘以及颜色渐变
默认主题: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
03-echarts主题和调色盘
主题 1.内置主题在初始化对象方法 init 中可以指明 var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, ' ...
origin画热力图时自定义调色盘palette，自定义颜色标尺
目录前言安装Color Editor 自定义调色盘Parula 加载调色盘前言使用origin画了热力图后,需要对热力图进行一些美化,其中会有热力图颜色的调整.打开调色板后发现并没有matla ...
图表可视化seaborn风格和调色盘
seaborn是基于matplotlib的python数据可视化库,提供更高层次的API封装,包括一些高级图表可视化等工具. 使用seaborn需要先安装改模块pip3 install seaborn ...
python plot map_python的colormap总结（matplotlib+ncl+气象家园调色盘）
colormap又叫colorbar是一个包含三列矩阵的色彩映射表,简单来说就是一个shape为(N,3)的矩阵. 矩阵中的值的值取值范围为[0,1] 每一行代表一个颜色,即RGB值 1.matplo ...

Web — 调色盘打开+div

一丶 Ctrl + Shift + C 快速弹出调色盘

二丶 div 是什么？

Web — 调色盘打开+div相关推荐

最新文章

热门文章