小腦萀-CSDN博客

原创使用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 160

原创用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 280

原创框线与背景

**一.**框线与背景定位背景与框线定位的几种情况（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 228

原创使用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 310

原创使用盒子模型制作浮动案例

定义超链接去除下划线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 629

原创使用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 667

原创使用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 1505

原创盒子模型

在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 109

原创元素标签

<!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 252

原创 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 167

原创电子邮箱输入字段

电子邮箱输入字段新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示；增加了图片拖拽功能，你可以将本地的图片直接拖拽到编辑区域直接展示；全新的 KaTeX数学公式语法；增加了支持甘特图的mermaid语法1 功能；增加了多屏幕编辑 Markdown文章功能；

2020-05-28 22:52:53 568

fffffcc的博客