HTML5
JV_YAN
这个作者很懒,什么都没留下…
展开
-
内边距
内边距 1111111111原创 2017-05-07 10:55:31 · 551 阅读 · 0 评论 -
外边距Margin
*{ padding: 0; margin: 0; } /*标签选择器*/ div{ height: 300px; background-color: yellow; /*margin: 20px; /!*上右下左用同一个数据*原创 2017-04-24 16:55:14 · 284 阅读 · 0 评论 -
超链接(link,visited,hover,active)
/*伪类选择器*/ /*1.默认链接状态*/ a:link{ color: brown; } /*2.已访问状态*/ a:visited{ color:gainsboro; } /*3.原创 2017-04-23 13:55:38 · 1305 阅读 · 1 评论 -
float浮动
ul{ list-style: none; } li{ float: left; width: 150px; color: red; font-size: 25px; text原创 2017-04-24 16:53:27 · 270 阅读 · 0 评论 -
HTML 5 头head
我的第一个网页我是一个段落 -->/p> --> 1:标签是成对出现的(单个标签页存在) 前面的标签是开始标签,后面的标签是结束标签(闭合标签) 。 2:结束标签(闭合标签)有/--> 1:标签的一部分,存在页标签内 2:可以同时存在多个标签 3:属性和属性值成对出现-->我原创 2017-04-23 13:14:26 · 223 阅读 · 0 评论 -
列表补充( list-style,*)
*{ padding: 0; margin: 0; } ul{ border: 1px solid red; list-style:none; } li{ border: 1px sol原创 2017-04-23 13:50:30 · 237 阅读 · 0 评论 -
雪碧图
<!DOCTYPE html> /*空格 后代选择器*/ #container div{ height: 30px; width: 30px; color: red; backgro原创 2017-04-23 13:48:18 · 217 阅读 · 0 评论 -
背景图片
div{ height: 500px; border: 2px solid darkmagenta; /*背景颜色*/ background-color:springgreen; /*背景图片*/ background-原创 2017-04-23 13:46:30 · 242 阅读 · 0 评论 -
文本居中显示
p{ /*通过设置文本的行高于外部容器高度一致,可以实现文本垂直居中*/ width: 200px; height: 100px; border: 1px solid plum; text-align: center;原创 2017-04-23 13:44:53 · 327 阅读 · 0 评论 -
行距和对齐方式
行距和对齐方式 p{ color: lightcoral; font-size: 30px; /*行高 单行字体占用的高度 px 百分比*/ line-height: 150%; /*justify : 两端对齐 left: 左对原创 2017-04-23 13:43:15 · 1377 阅读 · 0 评论 -
布局
header{ height: 100px; background-color: gold; } section{ background-color: #585858; height: 400px; } #child1{原创 2017-04-24 16:55:55 · 281 阅读 · 0 评论 -
盒子弧度
#div{ height: 200px; width: 200px; background-color: blue; border-radius:50px 0 50px 0; background-size: 200px 200px; back原创 2017-04-24 16:57:18 · 329 阅读 · 0 评论 -
DIV居中
#div1{ width: 300px; height: 300px; background-color: red; position: relative; } #div2{ width: 200px; he原创 2017-05-07 10:54:51 · 174 阅读 · 0 评论 -
固定定位
#back{ width: 100px; height: 100px; background-color: thistle; text-align: center; line-height: 100px; position: fixed;原创 2017-05-07 10:53:07 · 245 阅读 · 0 评论 -
相对,绝对定位
#left,#center,#right{ float: left; } #left{ width: 200px; height: 200px; background-color: orange; } #center{原创 2017-05-07 10:48:35 · 239 阅读 · 0 评论 -
嵌套的盒子
#parent{ background-color: red; width: 300px; height: 300px; /*解决方式 1、为父盒子添加 overflow:hidden 2、为父盒子添加padding原创 2017-05-07 10:47:54 · 1429 阅读 · 0 评论 -
块级元素的上下边距
/*水平排列的盒子 间距是margin相加。垂直排列的盒子是取最大值*/ #div1{ height: 100px; background-color: red; margin-bottom: 20px; } #div2{ height: 1原创 2017-05-07 10:46:55 · 992 阅读 · 0 评论 -
行级标签的左右外边距
*{ padding: 0; margin: 0; } #span1{ margin-right: 20px; background-color: lightgreen; } #span2{ mar原创 2017-05-07 10:45:06 · 613 阅读 · 0 评论 -
float浮动的消除
#header{ height: 100px; background-color: red; } #body{ /*height: 300px;*/ background-color: yellow; } #food{原创 2017-04-24 16:59:23 · 198 阅读 · 0 评论 -
outline
input:focus{ /*除去外边框颜色*/ outline:none; } div{ width: 200px; height: 200px; background-color: red; outlin原创 2017-04-24 16:58:37 · 308 阅读 · 0 评论 -
盒子阴影
div{ height: 200px; width: 200px; background-color: gold; /*1. : x方向的偏移 2. : y方向的偏移 3. : 阴影模糊程度 4.:阴影迷糊原创 2017-04-24 16:57:55 · 273 阅读 · 0 评论 -
选择器
/*标签选择器 作用于当前页面的所有匹配标签*/ li{ color:red; } /*类选择器 作用于当前页面所有class值为里li1的标签*/ .li1{ color: blue; } /*ID选择器 id在当前页面具有唯一性原创 2017-04-23 13:40:53 · 191 阅读 · 0 评论 -
css样式的优先级
--> #price{ color:greenyellow; font-size: 50px; } #price1{ color:greenyellow; font-size: 50px; text-decoration:原创 2017-04-23 13:40:05 · 377 阅读 · 0 评论 -
flex
#div1{ width: 200px; height: 200px; background-color: lime; /*居中*/ display: flex; justify-content: center; al原创 2017-05-13 20:54:53 · 189 阅读 · 0 评论 -
display
img{ display: block; } div{ width: 48%; border: 1px solid red; display: inline-block; } displaydiv1原创 2017-05-13 20:53:49 · 260 阅读 · 0 评论 -
动画
img{ animation: plane 10s ease-in-out 1s; } @keyframes plane { 0%{ transform: translate(0px,0px); } 20%{原创 2017-05-13 20:52:18 · 219 阅读 · 0 评论 -
Transform
div{ border: 1px solid red; width:160px ; height: 185px; overflow: hidden; } img{ /*transform: translate(500px,100px)原创 2017-05-13 20:51:26 · 220 阅读 · 0 评论 -
长度单位
长度单位我是第一层 我是第一层 我是第二层 我是第三层 我是第四层 我是第二层原创 2017-05-13 20:50:08 · 380 阅读 · 0 评论 -
属性前缀
div{ width: 200px; height: 200px; background-color: darkmagenta; -webkit-border-radius: 40px;/*针对谷歌和苹果浏览器*/ -o-border-radius: 40px;/*针对原创 2017-05-13 20:48:37 · 271 阅读 · 0 评论 -
其他选择器
li:not(:last-child){ border: 1px solid red; } /* + : 相邻选择器 ~:兄弟选择器*/ #li3~li{ color: red; } 其他选择器 列表项1 列表项2原创 2017-05-13 20:47:51 · 226 阅读 · 0 评论 -
状态伪类选择器
input:checked+span{ color: red; } input[type="text"]:enabled{ border: 1px solid green; } 状态伪类选择器 男原创 2017-05-13 20:46:29 · 297 阅读 · 0 评论 -
结构伪类选择器
/*li:nth-child(3){ color:tomato; } li:nth-last-child(2){ color:fuchsia; }*/ li:first-child{ color: red; } l原创 2017-05-13 20:45:27 · 285 阅读 · 0 评论 -
flex
#container{ display: flex; /*flex-direction: row-reverse;*/ /*flex-wrap:wrap;*/ height: 300px; border: 1px solid red; }原创 2017-05-13 20:55:37 · 255 阅读 · 0 评论 -
快捷键
1:windows+d 返回左面 2:windows+e 打开你的电脑资源页面 3:alt+tab 切换页面--> 1:tal键 快速创建标签 代码缩进 2:ctrl+d 删除光标所在行 3:ctrl+/ ctrl+shift+/ 快速添加注释多行注释原创 2017-04-23 13:20:03 · 313 阅读 · 0 评论 -
CSS三类写法
#price{ color: red; font-size: 40px; } css入门 电脑 1元起 电脑 1元起原创 2017-04-23 13:37:22 · 453 阅读 · 0 评论 -
HTML5规范(实例)
HTML5规范 baidu meituan elememark标签 1111111111111111111111111111111111111111111111下载进度:显示度量值:3/10原创 2017-04-23 13:35:27 · 481 阅读 · 0 评论 -
HTML5 智能表单
【HTML5 智能表单】 H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交。 … type新增属性:详见表格 email、UR原创 2017-04-23 13:33:49 · 430 阅读 · 0 评论 -
文本域 textarea和表单的边框与标题
【文本域 textarea】 写法: 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用 readonly="readonly" 设置为只读模式,不允许编辑。 style="resize: none;" 设置为宽高不允许修改。原创 2017-04-23 13:31:09 · 3988 阅读 · 0 评论 -
下拉选择控件 select
【下拉选择控件 select】 写法: //可以有N多个 name属性,应该写在上,所有选项只有一个name multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般不用。 option常用属性:原创 2017-04-23 13:29:42 · 573 阅读 · 0 评论 -
input-type属性详解
【input-type属性详解】 text:文本输入框 password:密码输入框,输入内容时显示小黑点。 radio:单选按钮。 checkbox:复选按钮。 >>> name和value属性需同时存在,提交时,提交的是value中的属性值。原创 2017-04-23 13:28:47 · 823 阅读 · 0 评论