我是HTML的新手,我正在努力学习如何使用表单.
到目前为止,我遇到的最大问题是调整表格.以下是我当前HTML文件的示例:
<form>
First Name:<input type="text" name="first"><br />
Last Name:<input type="text" name="last"><br />
Email:<input type="text" name="email"><br />
</form>
问题是,"电子邮件"之后的字段框在间距方面与第一个和最后一个名称相比有很大差异.什么是"正确"的方式使它们"排列"基本上？
我正在努力练习良好的形式和语法...很多人可能会用CSS做这个我不确定,到目前为止我只学习了HTML的基础知识.
好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了？ 现在已经讨论过表vs divs/CSS的一般主题,例如:
因此,这不是关于CSS与布局表格的一般性讨论.这只是一个问题的解决方案.我使用CSS尝试了以上的各种解决方案,包括:
由于各种原因,这些解决方案都不令人满意.例如,相对定位导致z-index问题,其中我的下拉菜单出现在内容下.
所以我最终回到:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
而且效果很好.它很简单,因为它具有向后兼容性(即使在IE5上也可以工作)并且它只是起作用.没有搞乱定位或花车.
所以任何人都可以做没有表的等价物吗？
要求是:
在旁注中,我今天看到了几篇有趣的文章:
我目前正在将我的网站切换到Bootstrap 3.0.我遇到表单输入和文本格式问题.在Bootstrap 2中有效的功能在Bootstrap 3中不起作用.
如何在表单输入之前和之后获取同一行上的文本？我已经将它缩小到示例的Bootstrap 3版本中的'form-control'类的问题.
我如何在一行中获取所有文本和输入？我想bootstrap 3示例看起来像jsfiddle中的bootstrap 2示例.
<div class="container ">
<form>
<h3> Format used to look like this in Bootstrap 2 </h3>
<div class="row ">
<label for="return1"><b>Return:</b></label>
<input id="return1" name='return1' class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return1' style='color:blue'> +/- 14 Days</span>
</div>
<br>
<br>
<h3> BootStrap 3 Version </h3>
<div class="row">
<label for="return2"><b>Return:</b></label>
<input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return2' style='color:blue'> +/- 14 Days</span>
</div>
</form>
更新:我将代码更改为有效但现在无法对齐的代码.有任何想法吗？
<div class="form-group">
<div class="row">
<div …看来fieldset默认为其容器的100%宽度.有没有什么方法可以让字段设置与字段集中最宽的控件一样大？
[注意:对于那些可能会将此问题与"为什么不使用表格进行HTML布局"混淆的人,我不是在问这个问题.我问的问题是为什么网格布局与表格布局根本不同.
我正在为一个项目研究CSS库(特别是Bootstrap).我是程序员而不是网页设计师,我觉得我可以从一个封装好设计的库中受益.
我们都知道使用HTML表来完成基本的站点布局是不好的做法,因为它将表示与内容混合在一起.CSS库(如Bootstrap)提供的一个好处是它们能够在不使用表的情况下创建"网格"布局.但是,我有点麻烦,了解他们的网格布局与等效表格布局有何不同之处.
换句话说,这两个HTML示例之间的根本区别是什么？我认为网格布局只是一个具有其他名称的表格,我错了吗？
<div class="row">
<div class="span16"></div>
</div>
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
和
<table>
<tr>
<td colspan=4></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
我想创建我的第一个网页,但我遇到了一个问题.
我有以下代码:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
我想知道如何使徽标和H1在同一行.谢谢!
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
无论div元素有多高,我怎样才能将div标签内的h1标签垂直居中？即如果用户更改其浏览器高度,我希望h1根据新高度在中心垂直对齐.
谢谢.
聘请前端开发人员时,您应该测试哪些具体技能和实践？什么是评估他们的HTML,CSS和Javascript技能的好指标？
显然,无表格语义HTML和纯CSS布局可能是关键技能.但具体技术呢？他/她是否应该毫不费力地模拟多列布局？CSS sprites？等高(或人造)柱？HTML标签选择是否重要(即过分依赖<div>)？他们应该能够解释(用语言)浮标是如何工作的吗？
那javascript技能怎么样？框架体验(jQuery,Prototype等)有多重要.今天？
显然,他们将要处理的职位和网站的详细信息是所需技能的最佳指示.但我想知道在为候选人创建测试时,人们可能会考虑哪些特定技能成为交易破坏者(或制造者).
html ×10
css ×7
html-table ×2
alignment ×1
centering ×1
fieldset ×1
formatting ×1
forms ×1
frontend ×1
grid-layout ×1
html5 ×1
htmllayout ×1
inline ×1
javascript ×1
layout ×1
position ×1