数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类 全部分类技术牛文全部分类教程最新 网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava 新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销 开发数据库服务器系统虚拟化云计算 嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

html、css基础注意点(前端必看篇)

来源:本网整理
s">

html、css基础注意点(前端必看篇)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:07-27 11:10:56 我要评论

下面小编就为大家带来一篇html、css基础注意点(前端必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ">

之前第一次接触html,一直使用table进行布局,十分麻烦还相当丑陋,造成当初并没有多大的兴趣,直到半年前开始接触到了使用div+css编写页面,才对它有了兴趣。作为一个菜鸟记录自己的点滴教训与收获,主要还是给自己看的,也希望对以后想要学习的同学有所帮助,同时也还请各位前辈多多指出不足。

1      减少无意义标签的使用

简单的举个例子:

 

对于这个顶部的结构,

错误:通栏>版心>左边+(右边>ul>li*9>a)

正确:通栏>版心>左边+(ul>li*9>a)

对于右边的部分,不需要使用一个div包裹ul,明明一个ul就可以实现何必使用多余的div标签进行嵌套呢。所以在编写过程中明明可以用一个标签解决的,不要使用无意义的标签多层嵌套。

2      关于命名

以前学习java,因为英语不好,喜欢用拼音命名,这样做不好,虽然一开始学习就知道,但是并不是很注意。在身边人的提醒下,尤其自己也感觉用拼音的不便性,纠正,以后要更注意命名。英语不好没关系,这不是还有有道和度娘吗?

再有就是标签发生嵌套时候的命名。一般同一层级的标签的命名问题不是很大,只需要使用一个单词就可以。但是当发生嵌套的时候就需要使用“-”进行连接,不然很容易自己分不清哪个标签是哪个。比如以上那个顶部通栏可以使用top命名整个,右边部分可以叫top-right,后面可能还会有top-right-detail-link如果太长就可以缩写为top-r-d-link,还是太长甚至可以缩写为trd-link,注意是太长才缩写,短的话为了保证意思的理解不用缩写,另外最后一个单词为了理解也最好不要缩写。

3      特殊符号的使用

上面那个下拉箭头是使用菱形符号◇制作的,使用了两个标签进行嵌套书写,

<i><s>◇</s></i>

s标签使用position控制需要显示部分的位置,i标签控制窗口大小,同时隐藏溢出。

CSS Code复制内容到剪贴板
  1. i {   
  2.     width: 15px;   
  3.     height: 8px;   
  4.     position: relative;    
  5.     overflow: hidden;   
  6. }   
  7. i s {   
  8.     font: 400 14px/14px consolas;   
  9.     position: absolute;   
  10.     top: -6px;   
  11. }  

以上是通行的做法,作为菜鸟,在不考虑兼容的情况下,感觉使用一个标签就可以解决,对于字符使用行高控制垂直位置,用宽高限制显示区域。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>测试</title>  
  6.     <style>  
  7.         i {   
  8.             display: inline-block;   
  9.             height: 50px;   
  10.             width: 100px;   
  11.             overflow: hidden;   
  12.             font: 400 100px/0px SimSun;    
  13.         }   
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <i>◇</i>  
  18. </body>  
  19. </html>  

这是效果:  

目前只是测试了在谷歌,火狐下的效果,没有问题,有什么不妥之处还请指出。

4      相邻行内块元素之间的距离

上面的导航如果使用转化为行内块元素,那么相邻两个元素之间就会有几像素的距离,可能粗看看不出来,但是放大以后可以看见,解决这个问题的唯一办法就只能使用浮动。

5      数值的连写:

在css中有一些属性的值可以连写。比如padding、border-radius。前者为上、右、下、左,后者四个方向为左上、右上、右下、左下。它们都是顺时针方向排列的,只是起点不同。如果将四个方向看作a、b、c、d。那么当后面书写连续的2个数值时代表的是:ac、bd;3个数值代表a、bd、c;4个数值不用说代表的就是a、b、c、d了。

6      清除浮动

清除浮动的方法有4种,最普遍的是使用伪元素。

CSS Code复制内容到剪贴板
  1. .clearfix:before, .clearfix:after {   
  2.     content: "";   
  3.     display: table;   
  4. }   
  5. .clearfix:after {   
  6.     clear: both;   
  7. }   
  8. .clearfix {   
  9.     *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/  
  10. }  

7      设置高度

上面讲到浮动突然想到关于的板块高度的问题,一般来说尽量不要使用一个固定的高度把一个板块写死,不要写死!不要写死!不要写死!重要的事情说3遍。写死了怎么做响应式?

8      元素的margin,padding

对于所有元素margin和padding的水平方向(左右)都是起作用的,只有行内元素的垂直方向(上下)是不起支撑作用的。需要注意的是padding可以将元素边框撑大,但是并不会将元素挤离原来的垂直位置。

 

 

9     相对定位与绝对定位的使用

定位总共有四种:绝对定位、相对定位、固定定位、静态定位。后两种定位,没有什么好说的,就是前面的两种定位,需要注意的是相对定位会占据原来文档流的位置,而绝对定位则不占据原来的文档流位置,所以在需要使用定位的时候,需要按照实际情况,具体情况具体分析,考虑到底是使用相对定位还是使用绝对定位。举个栗子:

CSS Code复制内容到剪贴板
  1. * { margin: 0; padding: 0; color: #fff; font-size: 20px; }   
  2.         .nav { height: 30px; background-color: pink; border-bottom: 4px solid red; }   
  3.         .w { width: 100px; margin: 0 100px; position: relative; height: 30px; z-index: 1; }   
  4.         .nav-list { height: 30px; background-color: red; }   
  5.         .left { width: 100%; height: 400px; background-color: peru; position: absolute; }   
  6.         .b { margin-left: 210px; width: 100px; height: 100px; background-color: lightblue; position: relative; }  
XML/HTML Code复制内容到剪贴板
  1. <div class="nav">  
  2.     <div class="w">  
  3.         <div class="nav-list">list</div>  
  4.         <div class="nav-list">list</div>  
  5.         <div class="nav-list">list</div>  
  6.         <div class="nav-list">list</div>  
  7.         <div class="nav-list">list</div>  
  8.     </div>  
  9. </div>  
  10. <div class="left">left</div>  
  11. <div class="b">b</div>  

 

List属于上面部分,left为底层的广告,b是下面板块的内容,如果完全使用相对定位和绝对定位解决问题,那么left为了不影响下面的板块应该使用absolute,这样的话超过上面部分的list就会被遮盖,所以要给list的父盒子设置一定的层级,照道理来说需要使用relative去占据上面部分的位置,因为他依旧属于上面的部分。这样的话需要给b也设置relative,为了不被遮挡还需要设置左外边距。

10  使用定位居中元素

块级元素的水平居中可以使用margin:0 auto;使用定位解决的办法是:设置定位后设置left(top)为50%,再使用margin-left回退自己身位的一半。

CSS Code复制内容到剪贴板
  1. height: 20px;   
  2. width: 50px;   
  3. position: absolute;   
  4. left: 50%;   
  5. margin-left: -25px;  

11  背景和图片

经常被问到应该什么情况下使用img插入图片,什么时候用背景。简单得讲我认为,一般的网站里的图标都用背景,具体涉及到某件产品那么使用img图片。

以上这篇html、css基础注意点(前端必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持突袭网。

原文地址:http://www.cnblogs.com/qing9442/archive/2016/07/26/5709413.html

  • 本文相关:
  • 前端AI切图小技巧(心得)
  • 浅谈网页中的字体的设置
  • 浅谈H标签定义和注意事项
  • 设置块元素居窗口中间的位置实现方法
  • 兼容IE6的min-width、min-height的简单方法
  • 浅谈浏览器的兼容模式下的button中文字垂直方向不居中显示
  • Sublime Text—设置浏览器快捷键的方法推荐
  • 关于各类HTTP 返回状态代码详解
  • 深入理解HTML5在移动开发方面的发展现状
  • 符合w3c标准的html标准需要注意的地方详解
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved