一、HTML的语法
二、html的基本结构
三、文档设置标记
四、图像标记
五、超链接的使用
六、表格
七、HTML框架
八、表单设计
让后面的文字、、表格等等，显示在下一行
换段落，由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中要换段落就要用<p>,<p>段落中也可以包含<p>段落！
属性align ：说明文本对齐方式
让段落或者是文字相对于父标记居中显示
保留预先编排好的格式
每一个列表使用一个<li>标记
<ul>声明这个列表没有序号
可以显示特定的一些顺序
格式
<ol type="符号类型">
<li type="符号类型"></li>
<li type="符号类型"></li>
</ol>
有序列表的type属性值
size：线的粗细/厚度 align：对齐方式 width：线的宽度 noshade：加入一条没有阴影的水平线
常用来编排一大段的HTML段落，也可以用于格式化表，和<p>很相似
层可以多层嵌套使用
共有6个级别，n的范围1~6，不同级别对应显示大小不同的标题，h1最大，h6最小
不要为了把文本字体加大或加粗而使用标题标记，因为搜索引擎会使用标题为网页结构与内容编制索引，所以用标题来呈现文档结构很重要
设置字体的格式
三个常用属性
粗字体标记
斜字体标记
文字下标字体标记
文字上标字体标记
打印机字体标记
引用方式的字体，通常是斜体
表示强调，通常显示为斜体字
表示强调，通常显示为粗体字
小型字体标记，可嵌套
大型字体标记，可嵌套
下划线字体标记
html 设置漂亮的表单样式，以下是代码：1、编写一个from表单
<form id="payment">
<fieldset>
<legend>用户详细资料</legend>
<ol>
<li>
<label for="name">用户名称：</label>
<input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus>
</li>
<li>
<label for="email">邮件地址：</label>
<input id="email" name="email" type="email" placeholder="example@163com" required>
</li>
<li>
<label for="phone">联系电话：</label>
<input id="phone" name="phone" type="tel" placeholder="010-12345678" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>家庭住址（收货地址）：</legend>
<ol>
<li>
<label for="address">详细地址：</label>
<textarea id="address" name="address" rows="1" required></textarea>
</li>
<li>
<label for="postcode">邮政编码：</label>
<input id="postcode" name="postcode" type="text" required>
</li>
<li>
<label for="country">国 家：</label>
<input id="country" name="country" type="text" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>付费方式</legend>
<ol>
<li>
<fieldset>
<legend>xyk类型</legend>
<ol>
<li>
<input id="visa" name="cardtype" type="radio">
<label for="visa">中国工商银行</label>
</li>
<li>
<input id="amex" name="cardtype" type="radio">
<label for="amex">中国人民银行</label>
</li>
<li>
<input id="mastercard" name="cardtype" type="radio">
<label for="mastercard">中国建设银行</label>
</li>
</ol>
</fieldset>
</li>
<li>
<label for="cardnumber">yhk号：</label>
<input id="cardnumber" name="cardnumber" type="number" required>
</li>
<li>
<label for="secure">验 证 码：</label>
<input id="secure" name="secure" type="number" required>
</li>
<li>
<label for="namecard">持 卡 人：</label>
<input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户！" required>
</li>
</ol>
</fieldset>
<fieldset>
<button type="submit">现在购买</button>
</fieldset>
</form>
2、编写css样式
<style type="text/css">
/分别定义HTML中和标记之的距离样式/
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
/定义<body>标记样式/
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 20px;
}
/定义付费内容的样式/
form#payment {
background: #9cbc2c;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:auto;
}
form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type { margin-bottom: 0; }
form#payment legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#payment > fieldset > legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#payment ol li {
background: #b9cf6a;
background: rgba(255, 255, 255, 3);
border-color: #e3ebc3;
border-color: rgba(255, 255, 255, 6);
border-style: solid;
border-width: 2px;
-webkit-border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#payment ol ol li {
background: none;
border: none;
float: left;
}
form#payment label {
float: left;
font-size: 13px;
width: 110px;
}
form#payment fieldset fieldset label {
background: none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#payment fieldset fieldset label:hover { cursor: pointer; }
form#payment input:not([type=radio]), form#payment textarea {
background: #ffffff;
border: #FC3 solid 1px;
-webkit-border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#payment input:not([type=submit]):focus, form#payment textarea:focus {
background: #eaeaea;
border: #F00 solid 1px;
}
form#payment input[type=radio] {
float: left;
margin-right: 5px;
}
</style>
3、漂亮的表单生成。在按钮中加style样式。。。
举例说明：
下面我给出一个自定义button按钮，
<input
type="button"
value="提交"
style="height=20px;width=50px;"
/>
以上是一个按钮的代码，我想楼主应该能看懂
其中style="height=20px;width=50px;"就是样式定义
他的意思就是，这个自定义的button按钮，长50像素，宽20像素！
这就是按钮的大小了吧？根据你自己的需要改变数值就可以改变大小了！
回答完毕，希望能解决你的问题……
直接给表单中对应的元素设置相应的css样式就是可以实现设置字体等属相的样式的。
设置表单输入框字体样式的代码实例如下：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>float</title>
</head>
<form action="" method="post">
<input type="text" id="text" value="" />
<input type="submit" value=""/>
</form>
</body>
<style>
#text{
color: red;
font-style: italic;
/设置了字体颜色为红色，字体为斜体/
}
</style>
</html>
如上图：css设置input的字体是红色斜体。
你好！因为浏览器的不同，input中的text文本框高宽也有所不一样，如何能保证呢，那最好办法就去设置input本身的字数及高度，这样会不兼容的，怎么做呢，你就在input里加入CSS样式就行了，你加以保证，最好在其里加入margin:0; padding:0，这样就能很好保证一致性。例子如下：<input name="user" type="text" style="margin:0; padding:0; width:100px; height:20px" />
<input name="password" type="text" style="margin:0; padding:0; width:100px; height:20px" />
这样就可以很好地保证一致性了，你试一下就知道了。
希望我的回答能令你满意！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）