工作直接--css
来源:互联网 发布:c盘windows system32 编辑:程序博客网 时间:2024/05/21 20:29
今天的任务是完成一个前端界面的布局: 有输入框、复选框
遇到的问题:
1)、由于参考的代码是带table表单的样式,所以被坑了---table的每一列<td>好像都是按照最长的一列的长度取值的,很难看。
最后,去掉了table样式,改成<div>嵌套样式,每一行写一个<div>。
1、对应主要部分HTML代码:
- <form action="" method="get">
- 您喜欢的水果?<br /><br />
- <label><input name="Fruit" type="checkbox" value="" />苹果 </label>
- <label><input name="Fruit" type="checkbox" value="" />桃子 </label>
- <label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
- <label><input name="Fruit" type="checkbox" value="" />梨 </label>
- </form>
2、html案例截图
html Checkbox用法案例截图
2)、照搬源程序的按钮格式,注意display属性,源程序都是class="XXX"的方式引用的样式,究其源头,查看源代码
有一个"display: block",开始的时候以为它没什么用,就把各个代码字段都一个个带入调试。
使段落生出行内框:
p.inline { display:inline;
}
定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
默认值: inline继承性: no版本: CSS1JavaScript 语法: object.style.display="inline"可能的值
值 描述 none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。inline默认。此元素会被显示为内联元素,元素前后没有换行符。inline-block行内块元素。(CSS2.1 新增的值)list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。table此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。inline-table此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。table-row-group此元素会作为一个或多个行的分组来显示(类似 <tbody>)。table-header-group此元素会作为一个或多个行的分组来显示(类似 <thead>)。table-footer-group此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。table-row此元素会作为一个表格行显示(类似 <tr>)。table-column-group此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。table-column此元素会作为一个单元格列显示(类似 <col>)table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>)table-caption此元素会作为一个表格标题显示(类似 <caption>)inherit规定应该从父元素继承 display 属性的值。
阅读全文
0 0
- 工作直接--css
- 直接用CSS+XML排版
- css里直接定义table
- CSS工作原理
- CSS 如何工作
- CSS实际上如何工作?
- 绘图之使用工作空间直接绘图
- 《CSS设计指南》笔记--CSS工作原理
- CSS是 如何工作的?
- HTML与CSS工作方式
- 使用css直接定义input标签
- 使用ASP.NET直接控制CSS样式
- javascript/CSS代码直接运行调试页面
- CSS格式化工具-直接可以使用
- myEclipse不打开工作空间,直接打开myEclipse
- 程序员怎么从中国直接去美国工作?
- MyEclipse删除工作空间-不直接改配置
- 如何配置Kali Linux直接用于工作-转载
- Java反射机制
- sigar 使用报错问题解决(java.lang.UnsatisfiedLinkError: gather)
- 一个intellij idea、AndroidStudio代码实时翻译的插件
- MFC几种给对话框添加背景图的方法
- java序列化
- 工作直接--css
- form 表单提交后返回json 回调处理返回结果
- 阶乘因式分解(一)
- Java集合
- Codeforces Round #435 (Div. 2) (思路题)
- 利用java反射机制绕开java的泛型
- JavaEE 和 JavaWeb的区别与联系
- 【互联网金融】阻碍用户注册的竟然是……
- Azure 托管镜像和非托管镜像对比