
前端培训
基本模型与排列组合
编程与搭积木异乎?
展开
-
常见的MIME类型
常见的MIME类型 超文本标记语言文本 .html,.html text/html 普通文本 .txt text/plain RTF文本 .rtf application/rtf GIF图形 .gif image/gif JPEG图形 .jpeg,.jpg image/jpeg au声音文件 .au audio/basic MIDI音乐文件 mid,.midi audio/midi,audio/x-midi RealAudio音乐文件 .ra, .ram audio/x-pn原创 2022-01-01 17:11:22 · 1337 阅读 · 0 评论 -
JS操作checkbox
function checkAll(){ for(i=0;i<document.getElementsByName("hobby").length;i++){ document.getElementsByName("hobby")[i].checked="checked"; }}function inverse(){ for(i=0;i<document.getElementsByName("hobby").length;i++){ .原创 2021-09-08 17:41:42 · 252 阅读 · 0 评论 -
JavaScript的外部引入方式
document.writeln("hello world");<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.原创 2021-09-07 00:55:35 · 450 阅读 · 0 评论 -
JS变量的命名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-09-07 00:30:24 · 167 阅读 · 0 评论 -
JS命名的规范
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-09-06 23:57:39 · 209 阅读 · 0 评论 -
今天我开始学JS了切歌
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-09-06 23:22:30 · 151 阅读 · 0 评论 -
学了忘忘了学,肿么办,我的form表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-09-05 17:29:28 · 66 阅读 · 0 评论 -
是时候展示真正的技术了滑动条效果
input[type="checkbox"]{ width: 0; height: 0px; visibility: hidden;}label{ display: block; width: 500px; height: 150px; background-color:red; /* border-radius:该属性允许您为元素添加圆角边框! 属性是一个简写属性,用于设置四个 border-*-radius 属.原创 2021-09-04 19:28:00 · 121 阅读 · 0 评论 -
还有这种神操作CLIP
#divyellow{ position: absolute; clip: rect(250px auto auto auto);}#divred{ position: absolute; clip: rect(0 auto 500px 0);}#container{ width: 500px; height: 500px; margin:1em auto; position: relative; background: .原创 2021-09-04 15:53:15 · 138 阅读 · 0 评论 -
别闹了Marquee
img{ width:55px; height:55px; opacity: 0.8; border-width: 1px; border-style: solid; border-color: pink; border-radius: 50%;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.原创 2021-08-31 19:28:30 · 132 阅读 · 0 评论 -
html5不支持之忧伤的frameset
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页制作</title> <link rel="stylesheet" href="style.css" type="text/css"></head><frameset cols="10%,*" frameborder="no">.原创 2021-08-31 16:53:47 · 126 阅读 · 0 评论 -
什么?你居然会做三线表
table{ width: 600px; height: 200px; border-collapse: collapse; }thead{ border-top-width: 4px; border-top-style: solid; border-top-color:black; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-co.原创 2021-08-31 15:40:49 · 479 阅读 · 0 评论 -
表格的CSS
/*这个三个标签的属性是要单独设置的,否则没鸟用*/table,th,td { border-width: 1px; border-style: solid; border-color: brown;}/*border-collapse是要设置在table标签里面的*/table{ /* border-collapse: collapse; */ /* width:400px; */ /* height:300px; */ }td{.原创 2021-08-31 12:47:45 · 92 阅读 · 0 评论 -
图像的映射图
img{ border-width:1px; border-style: solid; border-color: red;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页制作</title> <link rel="stylesheet" href="style.css" typ.原创 2021-08-30 22:32:59 · 425 阅读 · 0 评论 -
回到页面底部
img{ width:55px; height:55px; opacity: 0.8; border-width: 1px; border-style: solid; border-color: pink; border-radius: 50%; vertical-align:top;}a{ float: right; display: block; position:fixed; bottom: 0px;.原创 2021-08-30 21:34:35 · 194 阅读 · 0 评论 -
图片属性CSS设置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css" type="text/css"></head><body> <a href="http://www.bai.原创 2021-08-30 20:32:53 · 429 阅读 · 0 评论 -
列表的一些技巧
.id1 li::marker { content: "(" counter(list-item,decimal) ")"; }.id1 li { display: list-item; }.id2 li::marker { content: "(" counter(list-item,upper-alpha) ")"; }.id2 li { display: list-item; } <ol class="id1"> ...原创 2021-08-30 01:01:20 · 145 阅读 · 0 评论 -
css选择器包括有哪些
css选择器包括有哪些?一:类选择器class元素可以有多个值,中间用空格隔开。一个文件中,可以有多个相同的class值。<p class="first done"></p>样式:.first{ background-color: red;}二:ID选择器#(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。<p id="polite"></p>样式:#polite{ .原创 2021-07-04 12:10:47 · 665 阅读 · 0 评论 -
再战导航栏
<!Doctype html><html> <head> <meta charset="utf-8"> <title>this is the title</title> <style> ul li{ list-style: none; background-color: red; width: 100px; height: 50px; line-height: 50px;.原创 2021-07-02 19:11:03 · 66 阅读 · 0 评论 -
相对定位和绝队定位
<!Doctype html><html> <head> <meta charset="utf-8"> <title>this is the title</title> <style> .square{ width: 200px; height: 200px; background: #ccc; position: relative; top: 400px; left.原创 2021-07-02 18:40:15 · 121 阅读 · 0 评论 -
下拉菜单栏的制作
<!Doctype html><html> <head> <meta charset="utf-8"> <title>this is the title</title> <style> .entertainment{ width: 100px; height: 40px; background-color: #ccc; line-height: 40px; te.原创 2021-07-01 23:34:45 · 573 阅读 · 2 评论 -
表格的制作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> table{ border: 1px solid #ccc; border-collapse: collapse;/*合并无用的边框,有点像padding=0*/ } tr th{ height: 200px; border: 1.原创 2021-06-30 14:12:32 · 84 阅读 · 0 评论 -
登录框的设计
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> input{ height: 8px; width::258px; border: 1px solid #ccc; margin-top: 20px; padding: 20px; } button{ height: .原创 2021-06-30 13:36:07 · 160 阅读 · 0 评论 -
列表的样式
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <ol> <li>order list</li> <li>order list</li> <li>order list</li> </o.原创 2021-06-29 16:01:15 · 103 阅读 · 0 评论 -
a标签的使用
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="shortcut icon" type="image/x-icon" href="images/logo.png"> <style type="text/css"> a{ text-decoration: none; color:.原创 2021-06-29 15:28:40 · 197 阅读 · 0 评论 -
字体格式化
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="shortcut icon" type="image/x-icon" href="images/logo.png"> <link rel="stylesheet" type="text/css" href="css/index.css"><.原创 2021-06-29 03:57:54 · 133 阅读 · 0 评论 -
网站图标的设置方法
让网站显示出标题旁边的小图标<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="shortcut icon" type="image/x-icon" href="images/logo.png"> <link rel="stylesheet" type="text/css" href="css/in原创 2021-06-29 02:54:18 · 361 阅读 · 0 评论