HTML+CSS项目开发经验总结(推荐)

时间：2017-04-08

好几天没更新博客了，刚实战完一个HTML+CSS的简单项目。经过几天的摸索，发现收益良多。之前只是单纯得写demo，看知识点，没有亲自实战项目。但实战过后才会了解，如何才能更好地提升自己的技术。针对这次项目开发，我总结了以下内容：

一、技术总结

1、公共样式的设定

在开始项目之前，我们可以先大体了解一下项目中每个页面的内容，比如字体样式，段落结构，文字大小等。我们可以针对这些内容来设定一个固定的样式文件。在开发中    就可以直接引入此文件，而无需再重复敲CSS代码。

CSS Code复制内容到剪贴板
  1. /*基本样式*/  
  2. * {   
  3.     margin:0;   
  4.     padding:0;                   
  5. }   
  6. body {   
  7.     font-family: "微软雅黑";   
  8. }   
  9. .clear {  /*清除两边浮动*/  
  10.     clear: both;   
  11. }   
  12. .fl {  /*清除左浮动*/  
  13.     float: left;   
  14. }   
  15. .fr {    /*清除右浮动*/  
  16.     float: rightright;   
  17. }   
  18.   
  19. a {  /*去掉链接的默认下划线*/  
  20.     text-decoration: none;   
  21. }   
  22. li { /*去掉列表默认样式*/  
  23.     list-style: none;   
  24. }  

需要用到时就直接在类名后加上所要用到的类名即可：

XML/HTML Code复制内容到剪贴板
  1. <div class="div01 lf"></div>  
  2. <div class="div02 clear"></div>  

2、整体布局

开发项目过程时，若事前先将每一页的框架搭建好，而后期就只需把具体内容填充进去就可以了。而我就习惯用以下框架来实现页面整体布局：　　　

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.         <div id="header"></div><!--页面顶部内容-->  
  3.         <div id="nav"></div><!--导航部分-->  
  4.         <div id="content"></div><!--页面中间内容-->  
  5.         <div id="footer"></div><!--页面底部-->  
  6. </body>  
  • 共5页:
    • 上一篇1/5
  • 下一页
    • 上一篇：浅谈script在html中的摆放位置 下一篇：浅谈HTML中的标记

    相关文章

    最新文章

    Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权