Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 326|回复: 0

[CSS学习]写CSS设计的一些原则

[复制链接]
  • TA的每日心情
    开心
    2021-3-12 23:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2014-11-3 23:55:17 | 显示全部楼层 |阅读模式
    大原则
    DIV布局

         因为表格布局会使浏览器的兼容性产生很大问题,比如在手机,掌上电脑用户浏览表格布局会一片混乱,所以最好使用DIV+CSS的布局,事实上我所有的客户,都是这样要求我的。

    兼容性

    对于一个好的CSS设计来说,必须保证所有的主流浏览器都能正常地显示,IE6+,Firefox,Chrome,Opera,Safari,这些浏览器都要支持的。 CSS Hack

       还记得 !important 吧,这个 CSS Hack 一度很流行呀,但是好的设计者,最好不要使用 CSS Hack 技术,因为不同浏览器下Hack都不一样,说不定某次浏览器的升级使得你使用的Hack无效了呢。
    目前流行的做法是,给IE,尤其是IE6单独做个CSS文件就好了,用新CSS覆盖掉老的,虽然有冗余,但是要比CSS Hack可读性好,也更容易修改。  
      
       
       
         
       

         
       
      
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection" />
    < ![endif]-->[/code] 页面头部设计

       一个页面在设计的时候,设计者就要想到,正确添加头部信息,保证所有必要的头部信息都存在,有些是W3C标准所要求的,有些是SEO所需要的,下面就是一个典型的页面的头部设计。 < !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Title</title>
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <meta name="language" content="en" />
      <meta name="author" content="" />
      <meta name="copyright" content="(c) Copyright 2009 All Rights Reserved" />
      <meta name="robots" content="follow, all" />
      <!-- CSS -->
      <link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
       <!--[if lt IE 7]>
         <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection" />
       < ![endif]-->
    <!-- javascripts -->
      <!-- Favicon -->
    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />
    </head>
    </html>[/code] 小细节 使用px设置字体大小

       因为不容浏览器兼容性的原因,尽量使用px来设置字体大小,当然在IE下px是不支持字体缩放的,如果非要缩放不可,那可以使用em。
    不要在div中直接包含文字

    最好是使用h1,h2,h3,p这些标签来标示文字,div中最好不要直接包含文字。
    使用小写字母书写标签

       因为XML对大小写敏感,所以XHTML对大小写也是敏感的,所有的XHTML元素和属性都要用小写字母书写,否则你的文档将是无效的,无法通过W3C标准的验证。
    在HTML中的文字尽量使用小写字母

    一般来说,数据和表现要分离,所以在HTML中尽量不要使用大写字母,尤其是全是大写字母的场合,其实很简单,一句CSS就可以把所有的字母变成大写。 text-transform:uppercase; 使用标准字体

       中文的标准字体就简单了,宋体,英文的标准字体则是Arial和Helvetica等,一般来说在CSS中写上一行,就可以解决字体问题了。 font-family:Arial, Helvetica, sans-serif;
    良好的编写风格

    其实CSS也可以理解为编程的一种,好的编写风格也是需要的,紧凑,注释,易于理解,都是必不可少的。

      
      
       
       

         
       

         
       
      
    复制代码
    回复

    使用道具 举报

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

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-11-12 00:32 , Processed in 1.073380 second(s), 46 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表