全国热线

400-080-3312

全国监督投诉热线:9:00-23:00

学码思Web大讲堂:Web前端中几写CSS的小窍门

今天略微闷骚的Web前端老师给大家分享前端教程:Web前端中几写CSS的小窍门。Web老师建议大家,搭好HTML结构后不要急着写CSS,最好先多琢磨一下,尽可能针对多个class写通用样式,尽可能把多个样式整合起来写,让样式文件看起来更加简洁合理。

  各位同学大家星期一好呀!周末刚过完,大家心情可能不是很明媚,今天略微闷骚的Web前端老师给大家分享前端教程:Web前端中几写CSS的小窍门。Web老师建议大家,搭好HTML结构后不要急着写CSS,非常好先多琢磨一下,尽可能针对多个class写通用样式,尽可能把多个样式整合起来写,让样式文件看起来更加简洁合理。


  1、CSS缩写


  很多时候CSS代码可以用简洁易懂的方式写,比如这样:


  .top{ background-color:#fff;

        background-image:url(logo.png);

        background-repeat:no-repeat;

        background-position:top left;}


  完全可以写成这样:


  .top{ background:#fff url(logo.png) no-repeat top left}


  这样看起来就更加简洁易懂,还能少打几个字(偷懒~),提高工作效率。


  2、弄清class和id的区别用法


  初学者经常搞不清这两者直接的区别,在CSS中ID标识单独不重复的样式,用"#"来标识,class的样式可以重复调用,用"."来标识。


  3、多用li布局


  <li>标签非常好用,一般导航、列表、菜单都可以用li来排,和<ul>和<ol>配合使用,也有前端喜欢用<dl><dd><dt>的组合。


  4、多用<div>少用<table>


  十年前的传统网页多用<table>布局,因为那时候HTML和CSS技术发展还不完善,现在网站已经很少用<table>了,多用灵活便捷的<div>来代替。


  Web前端中几写CSS的小窍门就为大家介绍道这里,CSS刚开始的学习比较容易迷茫,起初用很多种方法能达到同样的效果,却不知道这些方法有什么区别利弊,学码思前端老师再次建议大家,多看正规网站的源码,学习前端前辈们的方法,这些都是Web前端布局中的非常优解,值得借鉴和学习。


上一篇:学码思Web大讲堂:初学前端开发要学哪些
下一篇:学码思Web大讲堂:提高用户体验要注意这些

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京学码思教育科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.njxms.com.cn

全国热线

400-080-3312

全国监督服务热线:9:00-23:00