前端学习
冥极醉醉冥极
这个作者很懒,什么都没留下…
展开
-
前端之立体动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #cube { margin: 200px; width: 300px; height: 300px; /* border: 1.原创 2021-07-29 09:34:00 · 85 阅读 · 0 评论 -
前端之transform
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { float: left; position: relative; width: 1200px; heigh.原创 2021-07-29 08:46:56 · 237 阅读 · 0 评论 -
前端之阴影效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>标题</title> <style> *{ padding: 0; margin: 0; } input[type='checkbox'] { -webkit-appearance: none; margin: 50px; .原创 2021-07-27 19:23:01 · 437 阅读 · 0 评论 -
前端之排行榜
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>电影排行榜</title> <style> /* 样式重置:将页面的元素进行初始化 */ * { margin: 0; padding: 0...原创 2021-07-24 10:04:50 · 574 阅读 · 0 评论 -
前端之OVERFLOW的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> section { width: 800px; margin: 100px auto; } section article { float: left; width: 200px; height.原创 2021-07-23 21:14:20 · 196 阅读 · 0 评论 -
前端之HTML智能表单
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } form { width: 350px; background-color: #9CBC2B; margin: 20px auto;.原创 2021-07-23 20:43:11 · 88 阅读 · 0 评论 -
前端之语义化标签
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .header1 { width: 100%; height: 200px; background-color: #008000; .原创 2021-07-23 20:03:48 · 46 阅读 · 0 评论 -
前端之样式的hover效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .test { width: 100px; height: 100px; background-color: #000000; } /* 划入效果 */ .test:hover { backgr.原创 2021-07-23 19:45:43 · 287 阅读 · 0 评论 -
前端之样式的布局定位
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>布局定位</title> <style> html, body { margin: 0; padding: 0; } .fix { width: 100%; height: 200px; /* 定位元素感觉像浮动,但又没有浮动效.原创 2021-07-23 19:25:13 · 91 阅读 · 0 评论 -
前端之样式元素的不同类型
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>不同类型</title> </head> <!-- 元素类型: 1.块元素:可以设置宽高大小,默认宽度100%,独占一行 如:p ul li h1~h6 div form table 2.内联(行内)元素:无法设置宽高大写,元素大小随内容变化,所有元素默认排在一行,显示出文.原创 2021-07-23 18:48:35 · 122 阅读 · 0 评论 -
前端之HTML样式总结篇(七)
backgroundbackground-color:背景颜色background-repeat:是否平铺background-image:背景图片background:gray(背景色)url(XXX/xxx.png) (背景图片)no-repeat(平铺方式)省略也可以borderborder-width:边框宽度border-style:边框样式border-color:边框颜色border:1px(宽度) solid(样式)white(颜色,默认是...原创 2021-07-22 21:20:15 · 112 阅读 · 0 评论 -
前端之HTML盒子模型篇(六)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style> /* 所有元素边距为0 */ * { margin: 0px; } body { background-color: green; } #box { width: 1020px;.原创 2021-07-22 21:02:20 · 91 阅读 · 0 评论 -
前端之HTML元素浮动篇(五)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>文字环绕和浮动</title> <style> .red { width: 100px; height: 100px; background-color: red; /* 浮动元素会脱了网页文档,与其他元素发生重叠,但是不能与文字内容,所以产生了环绕效果.原创 2021-07-22 20:12:03 · 93 阅读 · 0 评论 -
前端之HTML图片篇(四)
RGB:R(红色)、G(绿色)、B(蓝色)图片压缩:GIF:支持动画、全透明和不透明两种模式、256种颜色JPG:无损压缩、体积小、不支持透明、不支持动画PNG:无损压缩、体积小、支持透明、不支持动画SVG:矢量图片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>背景图的使用</title> <style>原创 2021-07-22 18:52:37 · 73 阅读 · 0 评论 -
前端之HTML样式篇(三)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <!-- form表情必须有action标签,表示提交地址 方法为post或get --> <form action="www.baidu.com" method="post"> <t.原创 2021-07-19 16:47:30 · 166 阅读 · 0 评论 -
前端之HTML表单提交(二)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <!-- form表情必须有action标签,表示提交地址 方法为post或get --> <form action="www.baidu.com" method="post"> <t.原创 2021-07-19 15:21:49 · 104 阅读 · 0 评论 -
前端之HTML常见标签(一)
<!--告诉浏览器,使用HTML5来解析网页--><!DOCTYPE html><html> <!--头部,网页的整体说明--> <head> <meta charset="utf-8" /> <title></title> </head> <!--主体,网页的内容--> <body> <p>p标签表示段落,独占一行</p>.原创 2021-07-19 13:36:44 · 66 阅读 · 0 评论