UDN-企业互联网技术人气社区

板块导航

浏览  : 1304
回复  : 0

[资源] web前端面试题之HTML、CSS知识点④

[复制链接]
小辫儿的头像 楼主
  No10.表格数据操作

  1.Table 元素

    (1)一般元素:table、tr(table row)、td(table data)、th(table head)。

    (2)结构化元素:caption、thead、tbody、tfoot。

    (3)元素说明:table的head、body、foot可把表格分组显示,头部信息放在thead中,body放在tbody中,末尾总结信息放在tfoot中。例如:
  1. <table>
  2.     <caption>
  3.         迟到人员统计
  4.     </caption>
  5.     <thead>
  6.         <tr>
  7.             <th>姓名</th>
  8.             <th>迟到次数</th>
  9.         </tr>
  10.     </thead>
  11.     <tbody>
  12.         <tr>
  13.             <td>张三</td>
  14.             <td>2</td>
  15.         </tr>
  16.     </tbody>
  17.     <tfoot>
  18.         <tr>
  19.             <td colspan="2">总人数: 33</td>
  20.         </tr>
  21.     </tfoot>
  22. </table>
复制代码

    (4)table边框border间隙设置:border-collapse(值包含collapse、separate、inherit)边框间隙是否可见、border-spacing单元格与单元格之间border的空隙宽度。例如下面的样式设置border间隙可见,间隙宽度为5px:
  1. table{
  2.     border-collapse: separate;
  3.     border-spacing: 5px;
  4.     border: 1px solid red;
  5. }
复制代码

     (5)如何显示行分割线:首先要设置border间隙border-collapse为collapse,然后设置th和td的border-bottom。样式代码如下:
  1. table{
  2.     border-collapse: collapse;
  3. }

  4. td, th{
  5.     border-bottom: 1px solid #cecfd5;
  6. }

  7. tfoot tr:last-child td{
  8.     border-bottom: none;
  9. }
复制代码

    (6)交替行背景设置:通过伪类选择器:nth-child()方法以及参数even和odd选中奇数或偶数行可实现奇偶行交替显示。样式代码如下:
  1. table{
  2.     border-collapse: collapse;
  3. }

  4. thead{
  5.     background: #395870;
  6.     color: #fff;
  7. }
  8. tbody tr:nth-child(even){
  9.     background: #f0f0f2;
  10. }
复制代码

  展示效果如下:
2.png

    (7)border-collapse属性说明:建议设置值为separate,如果不设置为separate,带边框的body和foot比head宽一些。所以一般都建议设置border-collapse为separate并且border-spacing为0。下面代码实现带边框的交替行背景:
  1. table{
  2.     border-collapse: separate;
  3.     border-spacing: 0;
  4. }

  5. thead{
  6.     background: #395870;
  7.     color: #fff;
  8. }

  9. th, td{
  10.     padding: 10px 15px;
  11. }

  12. td{
  13.     border-bottom: 1px solid #cecfd5;
  14.     border-right: 1px solid #cecfd5;
  15. }

  16. td:first-child{
  17.      border-left: 1px solid #cecfd5;
  18. }

  19. tbody tr:nth-child(even){
  20.     background: #f0f0f2;
  21. }
复制代码

  实现效果如下:
2.png

   2.本文对齐

    (1)对齐属性:通过text-align、vertical-align设置单元格对象方式。

    (2)对齐规则:name和desc等文本信息一般左对齐,而数字类型一般右对齐。

  3.选择器

    (1):first-child、:last-child:例如p:first-child{}选择父元素中第一个子元素并且这个元素名称是p。last-child同理。

    (2):nth-child(even/odd):选择奇、偶元素。在表格交替设置背景色中用的比较多,例如: tbody tr:nth-child(even)表示赛选tbody中tr是偶数行的tr。

    (3):first-of-type、last-of-type、only-of-type:和first-child或者last-child相似,分别表示选择包含父类的第一个元素、选择包含父类的最后一个元素、选择父元素只有一个元素的元素。例如下面代码表示赛选tr下只有一个td元素的所有所有td元素:
  1. tbody td:only-of-type {
  2.     padding-left: 0;
  3.     padding-right: 0;
  4. }
复制代码

    (4):first-child和:first-of-type区别:first-child筛选的元素必须是父元素的第一个元素,而first-of-type筛选的元素可以不用是父元素的第一个元素,只要被父元素包含即可筛选到。下面的代码中first-child值筛选到第一个div下的p元素,而first-of-type两个div下的p元素都筛选到了。
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.              p:first-child{
  7.                  color: red;
  8.              }
  9.             p:first-of-type{
  10.                 color: blue;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <div class="box">
  16.             <div>
  17.                 <p>111</p>
  18.             </div>
  19.             <div>
  20.                 <span>
  21.                 </span>
  22.                 <p>222</p>
  23.             </div>
  24.         </div>
  25.     </body>
  26. </html>
复制代码

  No11.怎样写出好的代码

  1.常见规则

    (1)添加DOCTYPE:正确的文档结构都必须包含<DOCTYPE html>声明。

    (2)小写规则:元素名称、属性、值都使用小写。

    (3)引号使用:坚持使用双引号而不使用单引号。

    (4)boolean值属性:属性的值类型为布尔类型时省略布尔值。例如:<checkbox checked></checkbox>。

    (5)id和class命名:使用实际使用场景来命名,例如设置一个class为red,red表示的展示效果而不是场景。代码如下:
  1. Bad:<p class="red">Error! Please try again.</p>
  2. Good:<p class="alert">Error! Please try again.</p>
复制代码

    (6)image标记alt属性:image必须标记可代替图片的文本信息alt属性。例如:
  1. Bad:<img src="puppy.jpg">
  2. Good:<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
复制代码

    (7)内容和样式分割:不要把样式嵌入到html内容中。一方面增加页面加载,另一方面难维护。例如:
  1. Bad:<p style="color: #393; font-size: 24px;">Thank you!</p>
  2. Good:<p class="alert-success">Thank you!</p>
复制代码

    (8)少使用div元素:尽量多使用结构化元素,div使用太多导致页面太臃肿并且难维护。例如:
  1. Bad:
  2. <div class="article">
  3.     <div class="headline">Headlines Across the World</div>
  4.     </div>
  5. </div>
  6. Good:
  7. <div class="container">
  8.     <article>
  9.         <h1>Headlines Across the World</h1>
  10.     </article>
  11. </div>
复制代码

  2.CSS代码规则

    (1)使用注释组织代码:使用注释组织分组样式
  1. Bad:
  2. header { ... }
  3. article { ... }
  4. .btn { ... }
  5. Good:
  6. /* Primary header */
  7. header { ... }

  8. /* Featured article */
  9. article { ... }

  10. /* Buttons */
  11. .btn { ... }
复制代码

    (2)使用多行和空格分割样式
  1. bad:
  2. a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}
  3. Good:
  4. a,
  5. .btn {
  6.     background: #aaa;
  7.     color: #f60;
  8.     font-size: 18px;
  9.     padding: 6px;
  10. }
复制代码

    (3)class命名:命名要表示实际意义,保持和css语义一致,使用小写字母和连字符。例如:
  1. Bad:.Red_Box { ... }
  2. Good:.alert-message { ... }
复制代码

    (4)选择器定义:不要使用id来定义,选择器深度最好不要超过2到3级,中间过度定位的选择器尽量移除。像.new li a中的li就可移除掉。例如:
  1. Bad:
  2. #aside #featured ul.news li a { ... }
  3. #aside #featured ul.news li a em.special { ... }
  4. Good:
  5. .news a { ... }
  6. .news .special { ... }
复制代码

    (5)使用简短属性:一个border如果同时设置了border-bottom、border-top、border-right、border-left,那么可使用border的简写方式。如果border只需设置一个方向,其他保持继承。那么可使用单个方向如border-left。例如:
  1. Bad:
  2. img {
  3.     margin-top: 5px;
  4.     margin-right: 10px;
  5.     margin-bottom: 5px;
  6.     margin-left: 10px;
  7. }
  8. button {
  9.     padding: 0 0 0 20px;
  10. }
  11. Good:
  12. img {
  13.     margin: 5px 10px;
  14. }
  15. button {
  16.     padding-left: 20px;
  17. }
复制代码

    (6)color属性值:尽量使用简单的十六进制表示,并且都小写。例如:

  1. Bad:
  2. .module {
  3.     background: #DDDDDD;
  4.     color: #FF6600;
  5. }
  6. Good:
  7. .module {
  8.     background: #ddd;
  9.     color: #f60;
  10. }
复制代码

   (7)value为0规则:删除属性值为0的单位。例如:
  1. Bad:
  2. div {
  3.     margin: 20px 0px;
  4.     letter-spacing: 0%;
  5.     padding: 0px 5px;
  6. }
  7. Good:
  8. div {
  9.     margin: 20px 0;
  10.     letter-spacing: 0;
  11.     padding: 0 5px;
  12. }
复制代码

    (8)供应商属性:把供应商属性分组排列。虽然现在很多浏览器都支持CSS3样式,但为了保证兼容性还是需要添加上供应商样式。例如:
  1. div {
  2.     background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
  3.     background: -moz-linear-gradient(#a1d3b0, #f6f1d3);   
  4.     background: linear-gradient(#a1d3b0, #f6f1d3);
  5.     -webkit-box-sizing: border-box;
  6.     -moz-box-sizing: border-box;
  7.     box-sizing: border-box;
  8. }
复制代码

相关帖子

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

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部