随笔档案「2021年7月」 - 2237774566

CSS3----less----预处理器

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运行式编译</title> <style type="text/less"> *{ margin: 0; padding: 0; } .wrap{ position: relati 阅读全文

posted @ 2021-07-19 09:44 2237774566 阅读(73) 评论(0) 推荐(0)

CSS3----过渡--整合

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; } body{ w 阅读全文

posted @ 2021-07-16 16:41 2237774566 阅读(37) 评论(0) 推荐(0)

CSS3----新增UI样式----线性渐变

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 600px; height: 阅读全文

posted @ 2021-07-16 10:58 2237774566 阅读(62) 评论(0) 推荐(0)

CSS3----新增UI样式

摘要：圆角 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; heigh 阅读全文

posted @ 2021-07-14 21:44 2237774566 阅读(67) 评论(0) 推荐(0)

CSS3----盒模型新增样式

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 阅读全文

posted @ 2021-07-13 21:28 2237774566 阅读(49) 评论(0) 推荐(0)

CSS3----文本新增样式

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 300px; height: 阅读全文

posted @ 2021-07-13 12:05 2237774566 阅读(86) 评论(0) 推荐(0)

CSS3----自定义字体（自定义字体与字体图标）

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* @font-face { font-family:Daum; src: url(font/Inkfree.t 阅读全文

posted @ 2021-07-13 11:54 2237774566 阅读(186) 评论(0) 推荐(0)

CSS3----伪元素和伪类选择器----伪元素选择器

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* div{ height: 200px; backgr 阅读全文

posted @ 2021-07-12 15:06 2237774566 阅读(49) 评论(0) 推荐(0)

CSS----伪元素和伪类选择器----结构性伪类

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* .wrap li:nth-child(1){ 找到w 阅读全文

posted @ 2021-07-12 14:16 2237774566 阅读(50) 评论(0) 推荐(0)

CSS3----伪元素和伪类选择器---动态伪类和表单伪类

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test:hover{ color: pink; } #test:active{ color: red; } < 阅读全文

posted @ 2021-07-09 16:58 2237774566 阅读(61) 评论(0) 推荐(0)

CSS3----伪类与伪类元素选择器--链接伪类和锚点伪类

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ text-decoration: none; } a:link{ color: #bfa; } a:visi 阅读全文

posted @ 2021-07-09 12:01 2237774566 阅读(114) 评论(0) 推荐(0)

CSS3----属性选择器

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* #wrap > div{ border: 1px s 阅读全文

posted @ 2021-07-09 11:28 2237774566 阅读(58) 评论(0) 推荐(0)

CSS3----基本选择器及其扩展

摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 通配符，类选择器（.），id选择器（#），元素（元素名），后代（空格），分组阅读全文

posted @ 2021-07-09 11:26 2237774566 阅读(49) 评论(0) 推荐(0)

条件hack，属性hack

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 有一些特殊代码只需要在某些特殊浏览器中执行而在其他浏览器中不需要执行，使用css hack解决 CSS Hack指一个特阅读全文

posted @ 2021-07-07 21:54 2237774566 阅读(45) 评论(0) 推荐(0)

IE6png修复

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-image: url 阅读全文

posted @ 2021-07-07 21:29 2237774566 阅读(71) 评论(0) 推荐(0)

框架集

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 框架集合内来拿框架爱的作用类似，都是用于在一个页面中引入其他外部页面框架集可以同时引入多个页面，内联框架只能引入一个 H5标准中，推荐阅读全文

posted @ 2021-07-07 20:53 2237774566 阅读(60) 评论(0) 推荐(0)

表单项二

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="66（续）target.html"> <!-- 在表单中可以使用fieldest为表单分组可以将表单项阅读全文

posted @ 2021-07-07 20:23 2237774566 阅读(34) 评论(0) 推荐(0)

表单项一

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="66（续）target.html" >  阅读全文

posted @ 2021-07-07 19:38 2237774566 阅读(51) 评论(0) 推荐(0)

表单

摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8  11 <!-- 12 使用f 阅读全文

posted @ 2021-07-07 15:46 2237774566 阅读(51) 评论(0) 推荐(0)

完善clearfix

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: #BB 阅读全文

posted @ 2021-07-07 15:05 2237774566 阅读(28) 评论(0) 推荐(0)

使用表格布局（被CSS淘汰，仅供了解）

摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- 9 表格早先实际上为页面布局，后期被CSS淘汰 10 表格列数由td最多的决定,表格是可以阅读全文

posted @ 2021-07-07 11:59 2237774566 阅读(96) 评论(0) 推荐(0)

长表格

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ width: 300px; margin: 0 auto; border: 1px solid bl 阅读全文

posted @ 2021-07-07 11:57 2237774566 阅读(54) 评论(0) 推荐(0)

表格样式

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title><style type="text/css"> /* 设置表格宽度 */ table{ width: 300px; margin: 0 auto; border: 阅读全文

posted @ 2021-07-07 11:51 2237774566 阅读(156) 评论(0) 推荐(0)

表格简介

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> td{ text-align: center; } </style> </head> <body> <!-- 表格阅读全文

posted @ 2021-07-06 20:57 2237774566 阅读(95) 评论(0) 推荐(0)

雪碧图的制作和使用

摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .box1{ 8 width: 129px; 9 height: 45px; 10 b 阅读全文

posted @ 2021-07-06 20:53 2237774566 阅读(76) 评论(0) 推荐(0)

简写属性

摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 height: 5000px; 9 /*设置背景*/ 10 /* ba 阅读全文

posted @ 2021-07-06 16:49 2237774566 阅读(44) 评论(0) 推荐(0)

按钮练习

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 做完功能后，在第一次切换图片时，会发现图片有一个非常快的闪烁这个闪烁会造成一次不佳用户体验产生闪烁原因阅读全文

posted @ 2021-07-06 16:43 2237774566 阅读(77) 评论(0) 推荐(0)

背景二

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ height: 500px; backgro 阅读全文

posted @ 2021-07-06 15:59 2237774566 阅读(36) 评论(0) 推荐(0)

导航条练习

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 990px; height: 32px; background-color: #BBFF 阅读全文

posted @ 2021-07-06 15:01 2237774566 阅读(21) 评论(0) 推荐(0)

背景

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 500px; height: 500px; background-color: #BB 阅读全文

posted @ 2021-07-06 14:49 2237774566 阅读(141) 评论(0) 推荐(0)

opacity