zoukankan      html  css  js  c++  java
  • Form表单与块级元素/行内元素宽高问题

    再用HTML5+CSS3根据教程做了个表单,做个总结。原文地址:http://line25.com/tutorials/create-a-stylish-contact-form-with-html5-css3

    效果如如下

    将表单放置在一个容器div元素中,这样方便我们将表单居中。每个label元素的for属性都引用了相应对应的input属性的id(<label for="name">Name:</label><input type="text" id="name" placeholder="Enter your full name" />)这样改善了表单的可访问性。

    而主要CSS部分呢,首先重置了浏览器的默认属性。给容器div指定宽高,然后将其居中。然后呢使用css3给body设置了一个渐进的蓝色背景。

    input指定宽高,和内外边距,背景色,圆角效果等。

    在这个练习中遇到了给行内元素设置宽高的问题,总结如下:

    在行内非替换元素设置宽高是不起作用的,只有块级元素和行内替换元素才有width,height属性。

    如果想给一个行内非替换元素应用指定宽高可以通过如下方式:

    1,浮动该行内非替换元素。float就是隐形的把内联元素转化为块级元素。float会隐形地把改内联元素转化为块级元素,但是他不会占据一行。相当于display:inline-block

    2,display:inline-block,将该行内非替换元素设置为行内块元素。

  • 相关阅读:
    自动关联
    如何提高测试效率
    检查点
    windows server 2008 安装vs2008 的问题
    【转】xampp mysql 忘记密码的解决方案
    zencart 目录产品显示控制
    静态html文件执行php语句的方法
    UNIX主机访问PHP程序提示“Internal Server Error”的处理办法
    【转】javascript 点击 <a> 链接
    u880刷机
  • 原文地址:https://www.cnblogs.com/submerge/p/4038757.html
Copyright © 2011-2022 走看看