仓酷云

标题: 来看看：纯语义化XHTML+CSS计划表双方法 [打印本页]

作者: 再见西城 时间: 2015-1-16 00:01
标题: 来看看：纯语义化XHTML+CSS计划表双方法
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
破洛洛文章简介：破洛洛将分享一种利用纯CSS取代HTML表格元素计划表单的办法。
　　良多CSS喜好者不喜好HTML表格，特别是在制造表单的时分，固然如今已是XHTML+CSS的年月，但表单的计划年夜多还在接纳table来结构。那末，有无更好的利用纯语义化XHTML+CSS计划表双方法呢？明天让我们一同来实验这类更切合语义化的办法来取代Table嵌套的表单位素吧！
　　在这里破洛洛要说，并非要完整摒弃table的利用，它有它的语义化结构感化，特别是在存储数据的时分。我在年夜多半情形下会利用纯CSS来计划表单，可是，我也很喜好表格，只需我们能在准确的中央利用准确的元素就能够了，不要太甚寻求所谓的DIV+CSS。间接利用table要比利用CSS来”摹拟”(display:table;)表格更便利更疾速。上面破洛洛将分享一种利用纯CSS取代HTML表格元素计划表单的办法。

您能够下载源代码并利用在本人的网站项目中。
下载源代码
第一步:HTML代码

创立一个新页面index.html，然后拷贝并粘贴以下代码到<body>标签内。

<divid=”stylized”class=”myform”>
<formid=”form”name=”form”method=”post”action=”index.html”>
<h1>Sign-upform</h1>
<p>Thisisthebasiclookofmyformwithouttable</p>
<label>Name
<spanclass=”small”>Addyourname</span>
</label>
<inputtype=”text”name=”name”id=”name”/>
<label>Email
<spanclass=”small”>Addavalidaddress</span>
</label>
<inputtype=”text”name=”email”id=”email”/>
<label>Password
<spanclass=”small”>Min.size6chars</span>
</label>
<inputtype=”text”name=”password”id=”password”/>
<buttontype=”submit”>Sign-up</button>
<divclass=”spacer”></div>
</form>
</div>

　　经由过程下面的代码，你是不是能看出它的视觉款式呢？上面是我们的CSS表单布局图示:

　　我为每一个input元素利用了<label>标签，并利用<span>标签包括冗长的形貌。一切的label和input元素都是用了CSS的float属性，值为left。
第二步:CSS代码

复制并粘贴以下代码到你页面中的<head>标签中的<styletype=”taxt/css”></style>内。(也能够独自存储到CSS文件中)

body{
font-family:”LucidaGrande”,“LucidaSansUnicode”,Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
p,h1,form,button{border:0;margin:0;padding:0;}
.spacer{clear:both;height:1px;}
/*———–MyForm———–*/
.myform{
margin:0auto;
width:400px;
padding:14px;
}
/*———–stylized———–*/
#stylized{
border:solid2px#b7ddf2;
background:#ebf4fb;
}
#stylizedh1{
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylizedp{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid1px#b7ddf2;
padding-bottom:10px;
}
#stylizedlabel{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylizedinput{
float:left;
font-size:12px;
padding:4px2px;
border:solid1px#aacfe4;
width:200px;
margin:2px020px10px;
}
#stylizedbutton{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666url(img/button.png)no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

　　以上仅仅是表单结构的一种体例，您也能够依照您的喜欢来修正源代码偏重新利用它。
下载源代码

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。

作者: 蒙在股里 时间: 2015-1-17 23:52
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 兰色精灵 时间: 2015-1-24 22:38
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 老尸 时间: 2015-2-2 16:05
可以使用 CSS 检查工具进行设计。

作者: 柔情似水 时间: 2015-2-8 03:20
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 不帅 时间: 2015-2-24 10:57
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 海妖 时间: 2015-3-7 12:09
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 活着的死人 时间: 2015-3-15 06:48
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 分手快乐 时间: 2015-3-21 22:45
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)

Powered by Discuz! X3.2