本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳。
本系列将主要分为4个模块:
控件
样式
布局
JavaScript
根据多年WPF的开发经验,界面就是控件及样式与布局的组合,再加上代码来控制交互逻辑,本期先对HTML常用的控件进行归纳。
div : 区块
1 <div class="***"> 2 </div>
div的概念与WPF中的Border类似,一般作为一个局部控件的容器,可通过css来设置它的各个属性,比如宽、高、背景色
1 div {2 height: 160px; 3 width:200px;4 background-color: #fff;5 }通过上面的css即可得到如下结果
我们也可以将div的背景色改为图片,只需在css中加如下一句即可
background-image:url(图片路径);
background-repeat:no-repeat; 注:如果不加这句图片会通过重复来进行填充
因为div经常被当作局部控件的容器,所以我们可以在它的内部添加其他控件,
1 <div>2 <p>叫爸爸</p>3 </div>
input : 用户输入区
该控件可以通过设置type属性来实现多种用户交互,主要的用法如下:
<input type="***" value="***" name="***"/>
常用的几种type效果如下所示:
有关input的更多信息,建议参考另外一篇博客,他会给你更全面的讲解:HTML input
select : 选择框
select通常需要与选项option一起出现,例如
1 <select>2 <option value ="volvo">Volvo</option>3 <option value ="saab">Saab</option>4 <option value="opel">Opel</option>5 <option value="audi">Audi</option>6 </select>生成的效果图如下:
通过在select外嵌套一个div,再添加一个css样式,即可得到一个相对美观的选择框。
1 div{ 2 background: url('https://raw.githubusercontent.com/ourjs/static/gh-pages/2015/arrow.png') right center no-repeat; 3 /* the width and the height of your image */ 4 width: 100px; 5 height: 30px; 6 overflow: hidden; 7 border: solid 1px #ccc; 8 } 9 10 select {11 -webkit-appearance: none;12 -moz-appearance: none;13 appearance: none;14 background: transparent;15 border: none;16 padding-left: 10px;17 width: 120px;18 height: 100%;19 }
img :图片
<img src="url" alt="some_text">
例如:
<img src="https://gss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3611826739,2799706291&fm=173&app=49&f=JPEG?w=218&h=146&s=50F111C4BEE9241596FD489703004087" alt="美国单身的向日葵" />
ul : 列表
ul通常会与li列表项一起出现,例如:
1 <ul>2 <li>Coffee</li>3 <li>Tea</li>4 <li>Milk</li>5 </ul>如果给它加上一点样式,就能得到一个不一样的列表
1 ul 2 { 3 list-style-type:none; 4 padding:0px; 5 margin:0px; 6 } 7 ul li 8 { 9 background-image:url(sqpurple.gif);10 background-repeat:no-repeat;11 background-position:0px 5px; 12 padding-left:14px;13 }
table : 表格
table通常需要与表格行tr/表格头内容th/表格行内容td一起使用,例如如下示例
1 <table border="1"> 2 <tr> 3 <th>Month</th> 4 <th>Savings</th> 5 </tr> 6 <tr> 7 <td>January</td> 8 <td>$100</td> 9 </tr>10 </table>如果你对编程感兴趣或者想往编程方向发展,可以关注微信公众号【筑梦编程】,大家一起交流讨论!小编也会每天定时更新既有趣又有用的编程知识!
HTML常用的几种控件这里就介绍完毕了,近期将进行样式方面的归纳,敬请期待。