html设置页面无法回退,html、css基础注意点(前端必看篇)

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

1      减少无意义标签的使用

简单的举个例子:

102a6187112123aee11f6acec94ce270.png

对于这个顶部的结构,

错误:通栏>版心>左边+(右边>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      特殊符号的使用

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

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

CSS Code复制内容到剪贴板

i {

width:15px;

height:8px;

position:relative;

overflow:hidden;

}

i s {

font: 40014px/14pxconsolas;

position:absolute;

top: -6px;

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

XML/HTML Code复制内容到剪贴板

html>

测试

i {

display: inline-block;

height: 50px;

width: 100px;

overflow: hidden;

font: 400 100px/0px SimSun;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值