外链论坛

 找回密码
 立即注册
搜索
查看: 93|回复: 1

Web前端技巧_HTML+CSS+JavaScript

[复制链接]

3007

主题

148

回帖

9911万

积分

论坛元老

Rank: 8Rank: 8

积分
99119253
发表于 2024-6-29 13:01:36 | 显示全部楼层 |阅读模式

看这篇文案前,你首要要对Web前端的重点技术有必定认识,例如 HTML、CSS、JavaScript。

Web前端的构成

现代在网页技术,分为三个层面:内容(HTML)+表现(CSS)+行径(JavaScript),在这儿把这三个技术掰开来讲

1.内容(HTML):

1.1 运用 XHTML 1.0 或 HTML5 规范的代码,网页最后是由于浏览器来解析的,而浏览器又是按照Web规范来解析网页的,因此,遵守规范能够保证各样浏览器中都能正确解析,但倘若碰到了浏览器的Bug那就另一算了,那不是咱们的错,是浏览器的错。

1.2 布局采用先上下后上下的结构原则,尽可能不要显现一个容器里面有上下上下多种布局的元素,这般能够减少各样浏览器的布局排版的差异,为何呢?一个上下要浮动上下又要清除浮动,麻烦,二个,内容要修改的时候,发掘一个高了矮了,不对齐了,又要调节几个块的。那左中右怎么办?先分上下再从其中一个再分上下

1.3 全页布局,通常分为 Topbar(顶栏) ,Header(头部) ,Nav(导航栏) ,Content(内容) ,Footer(脚部),便是针对页面整体从上往下看。倘若还有横幅宣传(Banner)和帮忙栏(像淘宝那种),就另一再加。

1.4 整理自己的模板库,自己写过的代码Copy一份,以后就不消再重新写了,例如头部,注册表单,网银列表等。

2.表现(CSS):

2.1 设定默认样式,每种浏览器都会为元素设定一套初始样式(默认样式),设定默认样式能够减少各样浏览器渲染样式的差异。常用的设置有:

body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,form,input,textarea,p,th,td{margin:0;padding:0;} /* 默认内边距和外边距设置为0 */

caption,th{text-align:left;} /* 默认对齐方式设置为左对齐 */

img{border:0;} /* 去掉带链接照片的边框线 */

ul{display:block;} /* 设置列表为块表示 */

li{list-style:none;} /* 去掉默认添加的项目符号 */

table{border-collapse:collapse;border-spacing:0;} /* 去掉表格的内边框线和单元格间隔 */

body{font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#000;line-height:12px;} /* 设置文本字体 */

a:link, a:visited{font-size:12px;text-decoration:none;font-family:Verdana, Geneva, sans-serif;color:#000;line-height:12px;} /* 设置链接字体 */

a:hover{text-decoration:underline;}

2.2 为元素赋予样式特征,尽可能少用ID而用类来设定。

2.3 不消内联样式,所有样式经过外边文件引用,并且放在

里面。

2.4 恰当归类,如公共样式、首页样式、归类页样式、搜索页样式,必须时才引用。

2.5 模块化设定样式,通常规则是 ".mod_name .class_column tag" (模块名+布局名+元素名/类) ,如:

.header 头部

.header .left h1 头部左边的标题

.search .keyword 搜索栏的重要词输入框

.nav a 导航栏的链接

.mod_good .good_name 制品模块的制品

.user_info a 用户信息的链接

2.6 有自己一套自定义元素类,例如表单控件有非常多种,非常多都是 input 元素,只对文本输入框设定样式怎么办?设一个自定义类 .input_text ,而后设定高度
回复

使用道具 举报

3016

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139149
发表于 2024-10-16 09:52:16 | 显示全部楼层
你的见解真是独到,让我受益匪浅。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-9 10:03 , Processed in 0.071457 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.