1.在区块线边框添加一条水平线
例如：<div style:"height :300px;width:800px;border-bottom: solid 1px orange ;">
//border-bottom: 边境底部 solid 实线 1px 像素为1 orange 颜色为橙色
2.在区块中设置背景图片
例如：<div style=" background: url(img/all_bg_index2.png);">
3.margin 标签
margin-top ; 边框到顶部的距离；
4.文档流
写html，css的同学应该需要清楚什么是文档流。文档流：将窗体自上而下分成一行一行,
并在每行中按从左至右的挨次排放元素,即为文档流。
5.脱离文档流的三种状态
有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位.
然则在IE中浮动元素也存在于文档流中。
6.常用十六进制颜色对照表代码查询
|
16位进制代码
|
颜色效果
|
|
|
|
|
#FFFFFF
|
|
|
#FFFFCC
|
|
|
#FFFF99
|
|
|
#FFFF66
|
|
|
#FFFF33
|
|
|
#FFFF00
|
|
|
#FFCCFF
|
|
|
#FFCCCC
|
|
|
#FFCC99
|
|
|
#FFCC66
|
|
|
#FFCC33
|
|
|
#FFCC00
|
|
|
#FF99FF
|
|
|
#FF99CC
|
|
|
#FF9999
|
|
|
#FF9966
|
|
|
#FF9933
|
|
|
#FF9900
|
|
|
#FF66FF
|
|
|
#FF66CC
|
|
|
#FF6699
|
|
|
#FF6666
|
|
|
#FF6633
|
|
|
#FF6600
|
|
|
#FF33FF
|
|
|
#FF33CC
|
|
|
#FF3399
|
|
|
#FF3366
|
|
|
#FF3333
|
|
|
#FF3300
|
|
|
#FF00FF
|
|
|
#FF00CC
|
|
|
#FF0099
|
|
|
#FF0066
|
|
|
#FF0033
|
|
|
#FF0000
|
|
|
|
|
Hex Code
|
Color
|
|
#66FFFF
|
|
|
#66FFCC
|
|
|
#66FF99
|
|
|
#66FF66
|
|
|
#66FF33
|
|
|
#66FF00
|
|
|
#66CCFF
|
|
|
#66CCCC
|
|
|
#66CC99
|
|
|
#66CC66
|
|
|
#66CC33
|
|
|
#66CC00
|
|
|
#6699FF
|
|
|
#6699CC
|
|
|
#669999
|
|
|
#669966
|
|
|
#669933
|
|
|
#669900
|
|
|
#6666FF
|
|
|
#6666CC
|
|
|
#666699
|
|
|
#666666
|
|
|
#666633
|
|
|
#666600
|
|
|
#6633FF
|
|
|
#6633CC
|
|
|
#663399
|
|
|
#663366
|
|
|
#663333
|
|
|
#663300
|
|
|
#6600FF
|
|
|
#6600CC
|
|
|
#660099
|
|
|
#660066
|
|
|
#660033
|
|
|
#660000
|
|
|
|
|
16位进制代码
|
颜色效果
|
|
|
|
|
#CCFFFF
|
|
|
#CCFFCC
|
|
|
#CCFF99
|
|
|
#CCFF66
|
|
|
#CCFF33
|
|
|
#CCFF00
|
|
|
#CCCCFF
|
|
|
#CCCCCC
|
|
|
#CCCC99
|
|
|
#CCCC66
|
|
|
#CCCC33
|
|
|
#CCCC00
|
|
|
#CC99FF
|
|
|
#CC99CC
|
|
|
#CC9999
|
|
|
#CC9966
|
|
|
#CC9933
|
|
|
#CC9900
|
|
|
#CC66FF
|
|
|
#CC66CC
|
|
|
#CC6699
|
|
|
#CC6666
|
|
|
#CC6633
|
|
|
#CC6600
|
|
|
#CC33FF
|
|
|
#CC33CC
|
|
|
#CC3399
|
|
|
#CC3366
|
|
|
#CC3333
|
|
|
#CC3300
|
|
|
#CC00FF
|
|
|
#CC00CC
|
|
|
#CC0099
|
|
|
#CC0066
|
|
|
#CC0033
|
|
|
#CC0000
|
|
|
|
|
Hex Code
|
Color
|
|
#33FFFF
|
|
|
#33FFCC
|
|
|
#33FF99
|
|
|
#33FF66
|
|
|
#33FF33
|
|
|
#33FF00
|
|
|
#33CCFF
|
|
|
#33CCCC
|
|
|
#33CC99
|
|
|
#33CC66
|
|
|
#33CC33
|
|
|
#33CC00
|
|
|
#3399FF
|
|
|
#3399CC
|
|
|
#339999
|
|
|
#339966
|
|
|
#339933
|
|
|
#339900
|
|
|
#3366FF
|
|
|
#3366CC
|
|
|
#336699
|
|
|
#336666
|
|
|
#336633
|
|
|
#336600
|
|
|
#3333FF
|
|
|
#3333CC
|
|
|
#333399
|
|
|
#333366
|
|
|
#333333
|
|
|
#333300
|
|
|
#3300FF
|
|
|
#3300CC
|
|
|
#330099
|
|
|
#330066
|
|
|
#330033
|
|
|
#330000
|
|
|
|
|
16位进制代码
|
颜色效果
|
|
|
|
|
#99FFFF
|
|
|
#99FFCC
|
|
|
#99FF99
|
|
|
#99FF66
|
|
|
#99FF33
|
|
|
#99FF00
|
|
|
#99CCFF
|
|
|
#99CCCC
|
|
|
#99CC99
|
|
|
#99CC66
|
|
|
#99CC33
|
|
|
#99CC00
|
|
|
#9999FF
|
|
|
#9999CC
|
|
|
#999999
|
|
|
#999966
|
|
|
#999933
|
|
|
#999900
|
|
|
#9966FF
|
|
|
#9966CC
|
|
|
#996699
|
|
|
#996666
|
|
|
#996633
|
|
|
#996600
|
|
|
#9933FF
|
|
|
#9933CC
|
|
|
#993399
|
|
|
#993366
|
|
|
#993333
|
|
|
#993300
|
|
|
#9900FF
|
|
|
#9900CC
|
|
|
#990099
|
|
|
#990066
|
|
|
#990033
|
|
|
#990000
|
|
|
|
|
Hex Code
|
Color
|
|
#00FFFF
|
|
|
#00FFCC
|
|
|
#00FF99
|
|
|
#00FF66
|
|
|
#00FF33
|
|
|
#00FF00
|
|
|
#00CCFF
|
|
|
#00CCCC
|
|
|
#00CC99
|
|
|
#00CC66
|
|
|
#00CC33
|
|
|
#00CC00
|
|
|
#0099FF
|
|
|
#0099CC
|
|
|
#009999
|
|
|
#009966
|
|
|
#009933
|
|
|
#009900
|
|
|
#0066FF
|
|
|
#0066CC
|
|
|
#006699
|
|
|
#006666
|
|
|
#006633
|
|
|
#006600
|
|
|
#0033FF
|
|
|
#0033CC
|
|
|
#003399
|
|
|
#003366
|
|
|
#003333
|
|
|
#003300
|
|
|
#0000FF
|
|
|
#0000CC
|
|
|
#000099
|
|
|
#000066
|
|
|
#000033
|
|
|
#000000
|
|
|
|
|
|
|
红色和粉红色，以及它们的16进制代码。
|
|
#990033
|
#CC6699
|
#FF6699
|
#FF3366
|
#993366
|
#CC0066
|
#CC0033
|
#FF0066
|
|
#FF3399
|
#FF9999
|
#FF99CC
|
#FF0099
|
#CC3366
|
#FF66CC
|
#FF33CC
|
#FFCCFF
|
|
#FF0033
|
#FF00CC
|
#CC3399
|
#FF99FF
|
|
紫红色，以及它们的16进制代码。
|
|
#FF66FF
|
#CC33CC
|
#CC00FF
|
#FF33FF
|
#CC99FF
|
#9900CC
|
#FF00FF
|
#CC66FF
|
|
#CC33FF
|
#CC99CC
|
#990066
|
#993399
|
#CC66CC
|
#CC00CC
|
#663366
|
#CC0099
|
|
#990099
|
|
蓝色，以及它们的16进制代码。
|
|
#660099
|
#666FF
|
#000CC
|
#9933CC
|
#666699
|
#660066
|
#333366
|
#0066CC
|
|
#99CCFF
|
#9933FF
|
#330099
|
#6699FF
|
#9966CC
|
#3300CC
|
#003366
|
#330033
|
|
#663399
|
#3333FF
|
#006699
|
#6633CC
|
#3333CC
|
#3399CC
|
#6600CC
|
#0066FF
|
|
#0033FF
|
#66CCFF
|
#330066
|
#3366FF
|
#3399FF
|
#6600FF
|
#3366CC
|
#6699CC
|
|
#0099FF
|
#CCCCFF
|
#000033
|
#33CCFF
|
#9999FF
|
#0000FF
|
#00CCFF
|
#9999CC
|
|
#0033CC
|
#3300FF
|
#333399
|
#000099
|
#000066
|
#6633FF
|
#003399
|
#6666CC
|
|
#0099CC
|
#9900FF
|
#9966FF
|
|
黄色、褐色、玫瑰色和橙色，以及它们的16进制代码。
|
|
#FFFFCC
|
#FFCC00
|
#CC99090
|
#663300
|
#FF6600
|
#663333
|
#CC6666
|
#FF6666
|
|
#FFCC66
|
#FF9900
|
#FF9966
|
#CC3300
|
#996666
|
#FFCCCC
|
#660000
|
#FF3300
|
|
#CC6600
|
#FF6633
|
#996633
|
#CC9999
|
#FF3333
|
#990000
|
#CC9966
|
#FFFF33
|
|
#FF9933
|
#330000
|
#993333
|
#CC3333
|
#CC0000
|
#FFCC99
|
#FFFF00
|
#996600
|
|
#993300
|
#FF0000
|
#CC6633
|
#CC9933
|
#FFCC33
|
#FFFF99
|
|
绿色，以及它们的16进制代码。
|
|
#99FFFF
|
#33CCCC
|
#00CC99
|
#99FF99
|
#009966
|
#33FF33
|
#33FF00
|
#99CC33
|
|
#66CCCC
|
#66FFCC
|
#66FF66
|
#009933
|
#00CC33
|
#66FF00
|
#336600
|
#33300
|
|
#99FFCC
|
#339933
|
#33FF66
|
#33CC33
|
#99FF00
|
#669900
|
#666600
|
#00FFFF
|
|
#99CC99
|
#00FF66
|
#66FF33
|
#66CC00
|
#99CC00
|
#999933
|
#00CCCC
|
#006666
|
|
#CCFFCC
|
#00FF00
|
#00CC00
|
#CCFF66
|
#CCCC66
|
#009999
|
#003333
|
#006633
|
|
#66CC33
|
#33CC00
|
#CCFF33
|
#666633
|
#669999
|
#00FFCC
|
#336633
|
#33CC66
|
|
#339900
|
#CCFF00
|
#999966
|
#99CCCC
|
#33FFCC
|
#669966
|
#00CC66
|
#99FF33
|
|
#999900
|
#CCCC99
|
#CCFFFF
|
#33CC99
|
#66CC66
|
#66CC99
|
#00FF33
|
#009900
|
|
#CCCC00
|
#CCC33
|
#336666
|
#006600
|
#003300
|
#669933
|
#339966
|
#339999
|
|
#669900
|
#99CC66
|
#99FF66
|
#00FF99
|
#33FF99
|
#66FF99
|
#CCFF99
|
#33FFFF
|
|
#66FFFF
|
|
白色、灰色和黑色，以及它们的16进制代码。
|
|
#FFFFF
|
#CCCCCC
|
#999999
|
#666666
|
#333333
|
#000000
|
|
16色和它们的16进制代码。
|
|
Aqua
|
Black
|
Fuchsia
|
Gray
|
Gree
|
Lime
|
Maroon
|
Navy
|
|
Red
|
Silver
|
Teal
|
White
|
Yellow
|
Blue
|
Olive
|
Purple
|
|
转载于:https://www.cnblogs.com/sbj-dawn/p/7003480.html
html 制作静态页面新知识相关推荐
- HTMLCSS仿京东首页制作静态页面总结
目录 一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用 三.字体图标的使用 四.base.css和comm ...
- Vue制作静态页面--Day03
希望仿制出游戏PHigros的页面,没有任何功能,只是联系vue语法用 期末考试直接摆烂,能过就行好吧 一.成果展示 当然只是做出样子了,很多地方和自己想的还不一样 二.布局 整体采用flex布局加p ...
- 制作静态页面的悬浮框
在写页面之前,我们首先要对所要实现的界面进行相应的分析,理清层次之后再写. 今天我们以小米官网为例,来进行这样悬浮框的实现. 第一步,我们要分析一下. 我们需要实现的功能: 滑动滚轮,悬浮框能够在页面 ...
- 基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品...
- 基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品
- html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作 首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
- 关于 静态页面布局 中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
- 爬取静态页面分页内容
静态准备爬取静态页面分页知识,因为写博客现在目的是当笔记一样,当学过知识梳理一遍,如果有观众,不喜勿喷,不足之处可以多多指点 工具:python3.6 操作系统:linux 浏览器:谷歌浏览器 创建项 ...
- jsp网页制作html页面,JSP制作静态网页.ppt
JSP制作静态网页 JSP制作静态网页 主要内容 1 制作网站的原型 2 制作注册页面 2.1 HTML的常用标签 2.2 CSS简介 2.3 使用HTML+CSS制作注册页面 2.4 JavaScr ...
- HTML静态页面总体设计思路,网页设计与制作(HTML+CSS+JavaScript)（张洪斌 刘万辉）课程整体设计...
内容简介: 网页设计与制作(HTML+CSS+JavaScript)(张洪斌 刘万辉)课程整体设计 一.课程设计思路 本课程依据课程标准,以软件技术专业学生的就业岗位群能力目标为导向,以Web客户端静 ...
最新文章
- 微生物所高程-郭良栋组（内附招聘）在菌根适应策略研究中取得进展
- PXE自动化安装系统
- 并发编程-22J.U.C组件拓展之Fork/Join框架
- MFC中动态创建控件及添加消息响应的方法实例
- python正则表达式匹配aabb_Python正则表达式拆分多个匹配项
- DownloadManager不好用？试试ZlsamDownloadService
- Spring Boot 学习之表单验证
- solr 英文模拟mysql like查询xml_Solr实现类似MySQL的LIKE查询功能
- 北京大学生物信息学学习(3动态规划进行2序列比对的原理 )
- JAVA开发一个合并单元格报表_9、docx4j实现动态表格（编程式）单元格合并
- MySql 数据类型 - 整型
- cesium 高程数据使用
- mysql 2008安装_关于SQL 2008安装时已经有实例名称。
- git使用命令行首次提交代码
- 计费在线计费和离线计费
- 基于ESP32CAM的物联网相机系统⑧（用原生JavaWeb实现双摄像头WIFI图传）
- 我的大学（一）-----回顾与反思
- 直播系统开发之ios对接腾讯云直播sdk
- Java项目在Linux环境使用aspose把word转pdf乱码问题
- 前端必学——用JavaScript实现电商图片放大镜效果（附代码）
热门文章
- 扩展方法：给 IEnumerableTSource 扩展一个自定义数据源绑定的方法
- Jenkins的Windows Slave的配置
- 群体智能优化算法之狩猎搜索（Hunting Search，Hus）
- 水体专题图和土地利用专题图制作
- java讲师北京_Java工程师提升空间大，前途好，该如何跨入它的大门呢？
- 斐波那契数列。古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子， 假如兔子都不死，问每个月的兔子总数为多少？
- Flutter之MediaQuery详细分析
- android zip4j之--解压zip文件并实时显示解压进度
- 3d游戏计算机硬件配置方案,做三维如何配电脑？内容创作者配置推荐
- 随机森林算法原理_集成算法，随机森林和梯度增强机
