甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
list-styleCSS1IE4+
徐水网站建设公司创新互联公司,徐水网站设计制作，有大型网站制作公司丰富经验。已为徐水上千余家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的徐水做网站的公司定做！
,
NS4+有复合属性。设置列表项目相关内容list-style-imageCSS1IE4+
,
NS6+有设置或检索作为对象的列表项标记的图像list-style-positionCSS1IE4+
,
NS6+有设置或检索作为对象的列表项标记如何根据文本排列list-style-typeCSS1/CSS2IE4+
,
NS4+有设置或检索对象的列表项所使用的预设标记marker-offsetCSS2NONE无设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距
CSS层叠样式表本身就有两种方法创建，一种是内建，一种是调用，你可以在网上找一个你比较喜欢的样式或者自己创建一种样式作为模版，然在需要的页面中调用这个模版不就行了吗，这样每个页面尺寸还比较小，不占空间。
解决方法：用普通标签模拟，背景图设置在普通标签里面，表单功能还是用input来实现，交互功能得用JavaScript来实现。换句话说，CSS控制普通标签的样式来美化表单，JavaScript实现表单交互功能。
案例分析：
移动端兼容 - 调用相册的按钮样式处理
具体情形：input type="file" accept="image/*;capture=camera"或者input type="file" capture="photo"设背景图无效。在我们的移动端网页当中，会有上传照片的操作需求。此时会使用到文件类型的input文本框，但是不同的系统不同的浏览器在样式上均不相同，而且，设置背景图也没有效果。
解决方法：通过设置opacity为0来进行模拟，背景图设置在其他标签里面。换句话说样式用普通标签模拟，功能用input来实现。
测试效果图：
《CSS美化表单大集锦》
xhtml如下:
div id="byitem"
h3 class="tabletitle"Widgets America (source by item)/h3
ul class="vert"
li class="tableheader"
ul class="horz"
liItem #/li
li class="name"Name/li
liColor/li
liIn Stock?/li
li class="price"Price/li
/ul
/li
li
ul class="horz"
li8476292163/li
li class="name"Cheese Widget/li
liGreen/li
liYes/li
li class="price"$3.14/li
/ul
/li
/ul
/div
CSS如下：
/* Widgets America (by item)
------------------------------------*/
div#byitem ul.vert {
list-style-type: none;
padding: 0;
margin: 0;
width: 540px;
}
div#byitem ul.vert li {
padding: 4px 0;
margin: 0;
height: 14px; /* space out your rows */
}
div#byitem ul.vert li.odd {
background-color: #eee;
}
div#byitem ul.horz {
clear: left;
list-style-type: none;
padding: 0;
margin: 0;
}
div#byitem ul.horz li {
float: left;
width: 80px;
padding: 0 20px 0 0;
margin: 0;
}
div#byitem ul.horz li.name { /* size your columns individually at the expense of »
slightly bloated markup (labelling each appropriate li with this class) */
width: 130px;
}
div#byitem ul.horz li.price {
text-align: right;
padding-right: 0;
}
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@163.com" 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信用卡类型/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"银行卡号：/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、漂亮的表单生成。
首先，css样式都是为了好看的~
其次，表单样式还可以起到提醒用户的作用，比如输入的时候表单有阴影这种~