AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

html+css+JavaScript例题

2017-11-28 1219
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
< html >
 
     < head >
         < meta  charset = "utf-8"  />
         < title ></ title >
     </ head >
     <!--  引入样式文件  -->
     < link  rel = "stylesheet"  href = "css/style_A.css"  />
     <!--  引入脚本文件  -->
     < script  type = "text/javascript"  src = "js/operation.js" ></ script >
 
     <!-- 添加一个用于初始化的事件  -->
     < body  onload = "init()" >
         <!-- 打开修改或添加的操作窗口时，用来覆盖网页的div  -->
         < div  id = "back_div" >
             <!-- 作为进行添加操作的窗口，不打开时是隐藏的  -->
             < div  id = "addOperation" >
                 <!-- 让表单中的组件能够向右对齐  -->
                 < div  id = "main_div" >
                     < h2 >添加学生...</ h2 >
                     <!-- 收集并验证需要添加的数据  -->
                     < form  id = "add_from"  onsubmit = "return addStudent(this)" > <!-- 任何情况下都return false表单不提交 -->
                         < ul >
                             < li >
                                 < label >姓名：</ label >                                
                                 < input  type = "text"  required = "required"  placeholder = "姓名只能是中文"  name = "sname" 
                                     pattern = "[\u4E00-\u9FA5]{2,5}$"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >年龄：</ label >< input  type = "text"  required = "required"  placeholder = "周岁" 
                                     name = "age"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >性别：</ label >< label  style = "margin-left: 30px;" >男</ label >< input  type = "radio" 
                                     checked  name = "sex"  />< label  style = "margin-left: 70px;" >女</ label >< input  type = "radio"  name = "sex"  />
                                     < label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >住址：</ label >< input  type = "text"  required = "required"  placeholder = "联系地址" 
                                     name = "address"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >手机号码：</ label >< input  type = "text"  required = "required"  placeholder = "手机号码" 
                                     name = "phoneNumber"  pattern = "^1[34578]\d{9}$" />< label  class = "label" >*</ label >
                             </ li >
 
                             < button  id = "add_button"  type = "submit" >添加</ button >
                             < button  type = "button"  id = "close_button" >退出</ button >
                         </ ul >
                     </ form >
                 </ div >
             </ div >
             <!-- 作为进行修改操作的窗口，不打开时是隐藏的  -->
             < div  id = "editOperation" >
                 <!-- 让表单中的组件能够向右对齐  -->
                 < div  id = "editMain_div" >
                     < h2 >修改学生资料...</ h2 >
                     <!-- 收集并验证需要修改的数据  -->
                     < form  id = "edit_from"  onsubmit = "return editStudent(this)" >
                         < ul >
                             < li >
                                 < label >姓名：</ label >
                                 <!-- 隐藏域是用来记录需要修改的学生对象所在的数组下标的  -->
                                 < input  type = "hidden"  name = "arrayIndex"  />
                                 < input  type = "text"  required = "required"  placeholder = "姓名只能是中文"  name = "sname" 
                                     pattern = "[\u4E00-\u9FA5]{2,5}$"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >年龄：</ label >< input  type = "text"  required = "required"  placeholder = "周岁" 
                                     name = "age"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >性别：</ label >< label  style = "margin-left: 30px;" >男</ label >< input  type = "radio" 
                                     checked  name = "sex"  />< label  style = "margin-left: 70px;" >女</ label >< input  type = "radio"  name = "sex"  />
                                     < label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >住址：</ label >< input  type = "text"  required = "required"  placeholder = "联系地址" 
                                     name = "address"  />< label  class = "label" >*</ label >
                             </ li >
                             < li >
                                 < label >手机号码：</ label >< input  type = "text"  required = "required"  placeholder = "手机号码" 
                                     name = "phoneNumber"  pattern = "^1[34578]\d{9}$"  />< label  class = "label" >*</ label >
                             </ li >
 
                             < button  id = "edit_button"  type = "submit" >修改</ button >
                             < button  type = "button"  id = "editClose_button" >退出</ button >
 
                         </ ul >
                     </ form >
                 </ div >
             </ div >
         </ div >
 
         <!-- 让表格居中 -->
         < div  align = "center" >
             <!-- 以表格的方式显示数据 -->
             < table   id = "tableData"  cellspacing = "0"  >
                 < thead >
                     < tr >
                         < th >姓名</ th >
                         < th >年龄</ th >
                         < th >性别</ th >
                         < th >住址</ th >
                         < th >手机号码</ th >
                         < th >操作</ th >
                     </ tr >
                 </ thead >
                 <!-- 用于方便插入数据   -->
                 < tbody  id = "tableBody" >
 
                 </ tbody >
                 < tfoot >
                     < tr >
                         < td  colspan = "6"  align = "right" >
                             <!-- 注册相应的事件  -->
                             [
                             < a  href = "javascript://"  id = "addHref" >添加学生</ a >] 共计
                             < label  id = "rowCountLabel" >0</ label >行， 分
                             < label  id = "pageCountLabel" >0</ label >页， 当前是第
                             < label  id = "thisPageLable" >1</ label >页 [
                             < a  href = "javascript://"  id = "shouye" >首页</ a >] [
                             < a  href = "javascript://"  id = "shangyiye" >上一页</ a >] [
                             < a  href = "javascript://"  id = "xiayiye" >下一页</ a >] [
                             < a  href = "javascript://"  id = "weiye" >尾页</ a >]
                         </ td >
                     </ tr >
                 </ tfoot >
             </ table >
         </ div >
     </ body >
 
</ html >




CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
body{
     margin :  0px ;
}
#bac k_div{
     position :  absolute ;
     z-index :  997 ;
     width :  100% ;
     height :  100% ;
     background-color : rgba( 0 , 0 , 0 , 0.3 );
     display :  none ;
}
#add Operation,#editOperation{
     position :  absolute ;
     z-index :  998 ;
     width :  506px ;
     height :  333px ;
     top :  25% ;
     left :  35% ;
     background-color : cornflowerblue;
     border-radius:  10px ;
}
#tableData{
     width :  100% ;
     text-align :  center ;
}
#tableData thead tr th{
     margin :  0px ;
     font-size : 20px  ;
     box-shadow:  0px  10px  10px  darkgray;
     background-color : rgba( 230 , 230 , 230 , 0.5 );
}
#tableBody td{
     margin-top :  0px ;
     margin-bottom :  0px ;
     box-shadow:  0px  0px  3px  darkgray;
     background-color : rgba( 255 , 255 , 255 , 0.0 );
}
#tableBody tr:hover{
     height :  65px ;
     background-color : rgba( 230 , 230 , 230 , 0.3 );
}
#tableData tr td,th{
     padding :  20px ;
}
  a{
     text-decoration :  none ;
     
     color :  #6495ED ;
}
#delete{
     color :  red ;
}
  a:hover{
     text-decoration :  underline ;
     color : chocolate;
}
.label{
     color :  red ;
     margin-left : 5px ;
}
ul{
     list-style :  none ;
}
#main_div button,#editMain_div button{
     position :  absolute ;
     text-align :  left ;
}
#main_div button:hover{
     background-color : dimgray;
     color :  #D2691E ;
     border :  1px  solid  dimgray;
}
#editMain_div button:hover{
     background-color :  #6495ED ;
     color :  white ;
     border :  1px  solid  dimgray;
}
ul li{
     margin :  20px ;
}
#main_div,#editMain_div{
     width :  380px ;
     text-align :  right ;
}
#main_div h 2 ,#editMain_div h 2 {
     font-weight :  500 ;
     text-align :  left ;
     margin-left :  15px ;
}
#add _button,#edit_button{
     left :  175px ;
}
#close_button,#editClose_button{
     left :  305px ;
}





JavaScript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
//用于存储学生对象的数组
var  students =  new  Array();
 
//总共能分多少页数
var  pageConut = 0;
 
//当前页数
var  thisPage = 0;
 
//通过元素ID查找到元素对象，然后返回出去
function  $(element_ID) {
     return  window.document.getElementById(element_ID);
}
 
//关闭用于覆盖网页的div
function  close_div() {
     $( "back_div" ).style.display =  "none" ;
}
 
//打开添加学生资料的div
function  open_add() {
     $( "back_div" ).style.display =  "block" ;
     $( "addOperation" ).style.display =  "block" ;
     $( "editOperation" ).style.display =  "none" ;
}
 
//打开修改学生资料的div
function  open_edit() {
     $( "addOperation" ).style.display =  "none" ;
     $( "back_div" ).style.display =  "block" ;
     $( "editOperation" ).style.display =  "block" ;
}
 
//随便注入一些数据来测试用的
function  initData() {
     for ( var  i = 0; i <= 10; i++) {
         var  stu =  new  Student( "test"  + i, 12,  "男" ,  "湖南"  + i,  "15820365112" );
         students.push(stu);
     }
}
 
//初始化方法，主要用来给各个元素添加事件
function  init() {
     //初始化时注入一些数据来测试效果
     initData();
     
     //在初始化时显示第一页
     showStudentAll(1);
     
     //点击这个超链接后就能打开添加学生资料的窗口
     $( "addHref" ).onclick =  function () {
         open_add();
     }
     //点击这个按钮后就能退出添加学生资料的窗口
     $( "close_button" ).onclick =  function () {
         close_div();
     }
     //点击这个按钮后就能退出修改学生资料的窗口
     $( "editClose_button" ).onclick =  function () {
         close_div();
     }
 
     //点击这个超链接后就能跳转到首页
     $( "shouye" ).onclick =  function () {
         //如果只有一页就不跳到首页，并告诉用户只有一页数据
         if (pageConut == 1) {
             alert( "当前只有一页！" );
             return ;
         }
         //如果不止一页就可以跳到首页
         showStudentAll(1);
     }
     
     //点击这个超链接后就能跳转到上一页
     $( "shangyiye" ).onclick =  function () {
         //如果当前是第一页就停留，否则跳转到到上一页
         showStudentAll(thisPage == 1 ? 1 : thisPage - 1);
     }
     
     //点击这个超链接后就能跳转到下一页
     $( "xiayiye" ).onclick =  function () {
 
         //如果当前是最后一页就停留，否则跳转到到下一页
         showStudentAll(thisPage == pageConut ? pageConut : thisPage + 1);
     }
     
     //点击这个超链接后就能跳转到尾页
     $( "weiye" ).onclick =  function () {
         //如果只有一页或者当前就在尾页的话就不跳到尾页，并提示用户
         if (pageConut == 1) {
             alert( "当前只有一页！" );
             return ;
         } else  if (pageConut==thisPage){
             alert( "已经是尾页了！" );
             return ;
         }
         //如果不止一页或不在尾页就可以跳到尾页
         showStudentAll(pageConut);
     }
}
 
//以数组下标来删除学生数据
function  delStudent(index) {
     //询问用户是否确定删除数据，确定才进行删除
     if (window.confirm( "确定删除此数据吗？" )) {
         students.splice(index, 1);
     }
     //删除后刷新当前页面
     showStudentAll(thisPage);
}
 
//通过数组下标来获得需要修改的学生对象，并将此对象的数据显示在div窗口的表单上
function  showStudentEditDiv(index) {
     open_edit();
     //通过数组下标，拿出需要修改的学生数据对象
     var  stuObj = students[index];
     
     //把从数组里拿出来的对象数据，显示在表单上
     $( "edit_from" ).arrayIndex.value = index; //隐藏域是用来记录需要修改的学生对象所在的数组下标的
     $( "edit_from" ).sname.value = stuObj.name;
     $( "edit_from" ).age.value = stuObj.age;
     $( "edit_from" ).address.value = stuObj.address;
     $( "edit_from" ).phoneNumber.value = stuObj.phoneNumber;
 
     //先删除性别单选框里的checked属性，让两个单选框都不被选中
     $( "edit_from" ).sex[0].removeAttribute( "checked" );
     $( "edit_from" ).sex[1].removeAttribute( "checked" );
 
     //如果性别为“男”，就给“男”单选框添加checked属性，让这个单选框被选中，否则反之
     if (stuObj.sex ==  "男" ) {
         $( "edit_from" ).sex[0].setAttribute( "checked" ,  "true" );
     }  else  {
         $( "edit_from" ).sex[1].setAttribute( "checked" ,  "true" );
     }
 
}
 
//学生数据的封装类
function  Student(name, age, sex, address, phoneNumber) {
     this .name = name;
     this .age = age;
     this .sex = sex;
     this .address = address;
     this .phoneNumber = phoneNumber;
}
 
//将当前页码的学生数据呈现出来
function  showStudentAll(page) {
 
     //存储当前页码
     thisPage = page;
     
     //以10行为一页，计算总共分几页              //因为以10行为一页，所以数组长度除以10
     pageConut = Math.floor((students.length / 10) + (students.length % 10 == 0 ? 0 : 1));
                                                     //这里是要得出余数，因为如果尾页的行数少于10行的话，就得分一页出来，
                                                     //如果刚好是10行的话，就不需要分了已经能够整除了
     var  htmlStr =  "" ;  //用字符串存储组合好的html标签
     var  rowNum = 0;  //此变量作为循环的跳出条件之一
     
     //循环添加学生数据
                /*使用当前页数计算出前一页数据所占的行数，
                       并以此作为变量的初始值，让变量在这个节
                       点上进行增长，所以进入某页或者在某页添
                       加一行数据都是在这个节点上进行重新添加*/
     for ( var  i = ((page - 1) * 10); i < students.length && rowNum++ != 10; i++) {
                                                           //添加到第十行就要跳出循环                                                        
         var  stuObj = students[i];  //拿取学生对象
         
         //利用数组合成html标签，并将学生对象里的数据添加进去
         var  trStr = [ "<tr>" ,
             "<td>" ,
             stuObj.name,
             "</td>" ,
             "<td>" ,
             stuObj.age,
             "</td>" ,
             "<td>" ,
             stuObj.sex,
             "</td>" ,
             "<td>" ,
             stuObj.address,
             "</td>" ,
             "<td>" ,
             stuObj.phoneNumber,
             "</td>" ,
             "<td>" ,
             //添加事件，并把每行数据的数组下标记录在参数里
             "【<a href='javascript://' id='delete' onclick='delStudent(" , i,  ")'>删除</a>】" ,
             "【<a href='javascript://' onclick='showStudentEditDiv(" , i,  ")'>修改</a>】" ,
             "</td>" ,
             "</tr>"
         ].join( "" ); //将字符串数组合成一个字符串
 
         //alert(htmlStr);
         htmlStr += trStr;  //将合成后的字符串存储到该变量中
 
     }
     //把组合成的标签插入到tableBody里，也就是将数据显示到表格上
     $( "tableBody" ).innerHTML = htmlStr;
     //显示总行数
     $( "rowCountLabel" ).innerText = students.length;
     //显示总共分了几页
     $( "pageCountLabel" ).innerText = pageConut;
     //显示当前在第几页
     $( "thisPageLable" ).innerText = thisPage;
}
 
//添加学生资料，参数为表单对象
function  addStudent(fromObj) {
     //收集表单数据
     var  name = fromObj.sname.value;
     var  age = fromObj.age.value;
     var  sex = fromObj.sex[0].checked ?  "男"  :  "女" ;
     var  address = fromObj.address.value;
     var  phoneNumber = fromObj.phoneNumber.value;
 
     //在控制台打印日志信息，看看收集表单数据的过程有没有出问题
     console.log(name);
     console.log(age);
     console.log(sex);
     console.log(address);
     console.log(phoneNumber);
 
     //把收集到的学生数据封装到对象里
     var  stu =  new  Student(name, age, sex, address, phoneNumber);
     students.push(stu);  //然后把对象添加到数组里
 
     //重置表单数据
     fromObj.reset();
     //关闭添加窗口
     close_div();
     //显示当前页面的数据，也可以说是刷新
     showStudentAll(thisPage);
     //不提交表单
     return  false ;
 
}
 
//修改学生资料，参数为表单对象
function  editStudent(fromObj) {
     //收集表单数据
     var  name = fromObj.sname.value;
     var  age = fromObj.age.value;
     //有checked属性的就会返回true
     var  sex = fromObj.sex[0].checked ?  "男"  :  "女" ;
     var  address = fromObj.address.value;
     var  phoneNumber = fromObj.phoneNumber.value;
     var  arrayIndex = fromObj.arrayIndex.value;
 
     //在控制台打印日志信息，看看收集表单数据的过程有没有出问题
     console.log(name);
     console.log(age);
     console.log(sex);
     console.log(address);
     console.log(phoneNumber);
     console.log(arrayIndex);
 
     //通过隐藏域记录的数组下标拿出学生对象
     var  stuObj = students[arrayIndex];
 
     //将这个对象的数据重新覆盖一遍
     stuObj.name = name;
     stuObj.age = age;
     stuObj.sex = sex;
     stuObj.address = address;
     stuObj.phoneNumber = phoneNumber;
 
     //重置表单数据
     fromObj.reset();
     //关闭修改窗口
     close_div();
     //刷新当前页面
     showStudentAll(thisPage);
     //不提交表单
     return  false ;
 
}




运行结果：

9ee6c1dade22d2bf32cc3ec4b5ede8ec.png


2070da706cac129f40e30d149dd400cb.png

b6b98d89ed95c17488e6d74de5e0b720.png




本文转自 ZeroOne01 51CTO博客，原文链接：http://blog.51cto.com/zero01/1977526，如需转载请自行联系原作者

文章标签：
前端开发
JavaScript
Web App开发
存储
关键词：
HTML JavaScript
HTML CSS
HTML CSS JavaScript
JavaScript CSS
JavaScript HTML
技术小阿哥
目录
相关文章
游客vx6uejvd6s6ck
|
6月前
|
移动开发 前端开发 JavaScript
征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具，采用HTML5实现，仅供学习参考。核心功能通过JavaScript构建，包含虚拟数据生成、权重分配及信用因素分析（如还款记录、信用使用率等）。
游客vx6uejvd6s6ck
1720 4
游客vx6uejvd6s6ck
|
6月前
|
前端开发 JavaScript
个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现，包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
游客vx6uejvd6s6ck
733 0
蓝易云
|
5月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用，可被集成到更复杂的项目中。它们注重实用性，并且易于理解，旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术（如Node.js, PHP, Ruby等）现代，但它在遗留系统中仍非常普遍，了解基础仍具有价值。
蓝易云
185 14
游客ib7xsk7hcucuo
|
6月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
2423 4
游客vx6uejvd6s6ck
|
6月前
|
前端开发
个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统，旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告，涵盖还款记录
游客vx6uejvd6s6ck
1292 0
游客vx6uejvd6s6ck
|
6月前
|
前端开发 JavaScript 容器
制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具，效果逼真，仅供学习参考与娱乐。包含前端技术学习要点：语义化布局、响应式设计、Flexbox、图片自适应
游客vx6uejvd6s6ck
635 0
土木林森
|
前端开发 JavaScript UED
【专栏：HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法，包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理，并分享了最佳实践，如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
土木林森
620 7
土木林森
|
缓存 前端开发 JavaScript
【专栏：HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性，并提出了优化策略。HTML方面，建议精简结构、使用语义化标签、异步加载脚本和压缩文件；CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
土木林森
315 6
土木林森
|
编解码 移动开发 前端开发
【专栏：HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性，如宽度、高度、初始缩放等，解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width（常用device-width）、initial-scale、maximum-scale、minimum-scale和user-scalable。
土木林森
544 4

热门文章

最新文章

  • 1
    Javascript 文件命名规范
  • 2
    crypto-js中AES的加解密封装
  • 3
    JavaScript是什么？能做什么？一篇文章带你了解JavaScript的发展史、组成及作用
  • 4
    JS之setInterval与setTimeout（超详细）
  • 5
    js生成制定范围的随机整数
  • 6
    Rails中Form标签JavaScript验证
  • 7
    eclipse加速之禁用JS、jsp等文件的语法验证
  • 8
    js中2个等号与3个等号的区别
  • 9
    JavaScript 基础语法总结
  • 10
    cookie读写JS
  • 1
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
    228
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    220
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    159
  • 4
    （CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
    130
  • 5
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    269
  • 6
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
    401
  • 7
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
    175
  • 8
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
    111
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
    187
  • 10
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
    257

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • JavaScript函数
  • Delivering Javascript to World
    • 下一篇
    「直播预告」Streaming Lakehouse Meetup EP.2｜Paimon × StarRocks 共话实时湖仓