CSS-列表-输入控件

来源:互联网 发布:java socket做聊天室 编辑:程序博客网 时间:2024/06/14 06:21
列表:双表情,块状元素
无序列表:<ul> + <li>
有序列表:<ol> + <li>
定义列表:<dl> + <dt> +<dd>


列表样式 list-style:针对列表的项目符号进行样式设置的专有属性
list-style:复合属性,在一个声明中设置所有的列表属性
list-style-type:设置列表符号的类型  
list-style-image:设置列表符号的图像
list-style-position:设置列表符号的放置的位置
list-style-type>list-style-position>list-style-image
应用技巧:
1:消除默认的列表区域中的边距 ul,ol{padding:0;}  dd{margin:0;}
2:消除默认的列表项目符号,<ul>,ol{list-style:none}
3:使用背景属性模糊项目符号效果:背景属性需要附加给<li> <dt> <dd>

ul li{background:url(xx.png) no-repeat left;padding-left:25px;font-size:14px;line-height:1.8em;}


控件

html5新增input输入控件
网址:<input type="url">
邮箱:<input type="email">
数字 <input type="number">
数字范围 <input type="range">
时间选择器 <input type="date">  
色彩拾取器 <input type="color">
搜索 <input type="search">
电话 <input type="tel">


输入提示:datalist
<input list="aa">
    <datalist id="aa">
    <option>a1</option>
    <option>a2</option>
        <option>b1</option>
    </datalist>


Dreamweaver快捷键:ctr+t:环绕标签

0 0
原创粉丝点击