- 博客(11)
- 收藏
- 关注
RSS订阅原创 使用css自制元素模型与div阴影框
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。-moz-box-shadow:0 0 1em gold;/*box-shadow设置添加边框阴影效
2020-06-05 22:22:50
189
原创 用css制作div颜色与渐变
今天太晚啦，先放代码明天再进行备注吧<!doctype html><html><head><meta charset="utf-8"><title></title><style type="text/css">body{background-color:rgb(255,255,204);}div{width:450px;height:200px;margin-top:10px;margin-lef
2020-06-05 00:18:13
316
原创 框线与背景
**一.**框线与背景定位背景与框线定位的几种情况（background-origin设置背景的定位区域）：background-origin:border-box/背景图像相对于边框盒来定位/.s1{ background-origin:border-box;/*背景图像相对于边框盒来定位*/-moz-background-origin:border; } background-origin:padding-box;/背景图像相对于内边距框来定位/.s2{ background-
2020-06-03 22:39:08
250
原创 使用css进行文章简单的多栏排版
**案例中主要使用到column-count和column-gap来设置列数和列之间的间隔**例：#text1{border:1px solid #930;line-height:1.5em;/*设置行高*//*em为一种测量单位，12点活字*/-webkit-column-count:2;/*网站规定元素应该被分隔的列数为2*/-moz-column-count:2;/*-column-count规定元素应该被分隔的列数*/column-coumn:2;-webkit-colum
2020-06-03 00:09:02
331
原创 使用盒子模型制作浮动案例
定义超链接去除下划线a:link{ text-decoration:none;将背景色显示全，定义为块（在定义图片位置时可先设置一个背景色，以方便在调试时观看）.span1{background-color:pink;display:block;}如图：将li列表前的小圆点去除/*设置ul列表大小*/.faceul{width:310px;height:80px;/*background-color:gray;*/list-style-type:none;/*将.
2020-06-01 22:49:18
657
原创 使用HTML+css制作简易动画
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title></title><style type="text/css">@keyframes mymovie{0%{left:0px;top:0px;}20%{left:200px;top:0px;}70%{
2020-06-01 22:31:25
702
原创 使用css+HTML+div制作图片浮动并列案例
<!doctype html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* div1 用于控制显示的位置*/.div1 {width:500px;height:300px;border:1px solid #b4b4b4;margin-left:100px;margin-top:20px;}/*
2020-05-31 22:48:56
1538
原创 盒子模型
在HTML中可直接设置body的边框大小和颜色并用css中的 margin:0 auto;例：<!doctype html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="cc.css" ></head><body><img src="C
2020-05-30 22:14:42
121
原创 元素标签
<!doctype html><html><head><meta charset="utf-8"><title>元素标签</title><style>table {border:0px;}a:visited {color: #336600;}a:link {color: #003399;text-decoration: none;}a:hover {color: #CC0000;text-decoratio
2020-05-29 23:13:11
277
原创 thead、tfoot、tbody元素
<!doctype html><html><head><meta charset="utf-8"><title></title><style>table {border:1px solid black;border-collapse: collapse;width:500px;}</style></head><body><h3>指定表格表头、底纹与主体的..
2020-05-28 23:37:13
182
原创 电子邮箱输入字段
电子邮箱输入字段新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；全新的 KaTeX数学公式 语法；增加了支持甘特图的mermaid语法1 功能；增加了 多屏幕编辑 Markdown文章功能；
2020-05-28 22:52:53
594
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人