首页 > 代码库 > CSS的应用
CSS的应用
CSS基础入门
目录
一、 列表.................................................................................................................................................... 3
1.1 无序列表....................................................................................................................................... 3
1.2有序列表............................................................................................................................................ 4
1.3 定义列表....................................................................................................................................... 5
二、 DIV和SPAN........................................................................................................................................ 7
2.1、 DIV................................................................................................................................................. 7
2.2、span................................................................................................................................................. 7
2.3div+css布局......................................................................................................................................... 8
2.4表单元素............................................................................................................................................ 8
一、 列表
列表是有三种形式
1.1 无序列表
无序列表,用来表示一个列表语义,并且每个项目与项目之间是不分先后顺序的
ul 的英文unordered list “无序列表” li 的英文 list item “列表项” |
你会发现 ,这个我们学习的“组标签”,就是要么不写,要写就写一组 |
<ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ul> |
也就是,当前的这个列表项li不能单独的存在,必须包裹在ul标签里面,反过来说ul的“儿子”就是li
错误演示:没有被ul标签包裹,默认没有ul的语义,所以直接没有排版
<li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> |
Ul标签并不是给文字添加小圆点的,而是给无序列表增加“语义”
Ul标签实际应用的场景:导航条,排版文章,标题栏(ul放li,li是个容器级标签,什么都可以放)
ul的层级结构(嵌套结构)
|
1.2有序列表
ordered list 有序列表 ,用ol表示
<ol> <li>小苹果</li> <li>最炫名族风</li> <li>隔壁老王</li> </ol> |
浏览器会自动添加阿拉伯序号
总结:
ol与ul的定义是不同的:
- 有序和无序
- 当前都是列表项(li)被包裹
- 一般来说很少使用有序列表,基本都是使用无序列表
1.3 自定义列表
定义列表实际上一个组标签,不过比较复杂,出现三个标签
dl 表示 definition list 定义列表 dt 表示 definition title 定义标题 dd表示 definition description 定义表述次 |
<dl> <dt>北京</dt> <dd>国家首都,政治文化中心</dd>
<dt>上海</dt> <dd>魔都,有东方明珠,外滩,黄浦江</dd>
<dt>广州</dt> <dd>东莞,小蛮腰</dd> </dl> |
表示的语义两层:
- 是一个列表,列出北京、上海,广州
- 每个专有名词都有自己的描述项
<dl> <dt>购物篮</dt> <dd>小刀</dd> <dd>果汁</dd> <dd>辣条</dd>
<dt>食谱</dt> <dd>鱼香肉丝</dd> <dd>北京烤鸭</dd> <dd>羊肉串</dd>
<dt>活动</dt> <dd>买一送一</dd> <dd>充值100送50</dd> <dd>预存话费</dd> </dl> |
一个dt可以对应多个dd
京东最下方的列表
京东的下拉栏
二、 DIV和SPAN
2.1、 DIV
DIV和span是非常重要的标签,div的语义是division“分割”;span的语义是“范围、跨度”
Css课程中你将会知道,这二个标签都是盒子模型最重要的标签之一
<div> <h3>中国主要的城市</h3> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> </ul> </div>
<div> <h3>美国主要的城市</h3> <ul> <li>纽约</li> <li>华盛顿</li> <li>洛杉矶</li> </ul> </div> |
Div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了。
总结:div中的所有元素是一个小区域,div是一个容器级标签,里面什么都可以存放,甚至可以放div自己
2.2、span
span表达“小区域、小跨度”的标签,是一个文本级的标签
<span> 这是一个span标签 <a href="http://www.mamicode.com/#">详细信息</a> </span> |
Span里面只能存放图片,文字,表单元素。Span不能存放p、h、ul、dl、ol、div。
<div> 这是一个div <span> <a href="https://www.baidu.com/">百度</a> </span> </div> span里面放置小元素,div里面放置大东西 |
2.3div+css布局
详情参见代码示例 |
2.4表单元素表单就是收集数据的,就是让用户添加当前的数据 |
<div> <h1>欢迎来到本网站注册</h1> <form> 所有的表单元素都要写在form标签里面<br> <input type="text" name="这是文本框"/>这是文本框<br> <input type="password" name="这是密码框"/>这是密码框<br> <input type="radio" name="单选框">单选框1<br> <input type="radio" name="单选框">单选框2<br> <input type="radio" name="单选框">单选框3<br> <input type="checkbox" name="复选框1">复选框1<br> <input type="checkbox" name="复选框2">复选框2<br> <input type="checkbox" name="复选框3">复选框3<br> <input type="button" value="http://www.mamicode.com/我是一个普通的Button"/><br> <input type="submit"/><br> <input type="reset"/><br> <input type="radio" name="sex"/>男<br> <input type="radio" name="sex"/>女<br> <input type="radio" name="sex"/><label for="nan">男</label><br> <input type="radio" name="sex"/><label for="nv">女</label><br>
</form> <br>
<select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> <option>长沙</option> </select>
</div> |
Form标签
Form 标签里面action 和method 属性, 在ajax课程: action属性表示的就是“表单提交到那里去” method属性表示是用什么HTTP(get、post)方式提交 |
Input表示“输入”,指的是输入一个小部件 Type 表示:“类型” Text 表示“文本”,指的是一个文本框的小部件 Password表示的是一个密码框的小部件 Radio表示的是一个单选按钮 Checkbox表示的是一个复选框 Button表示的一个按钮 Submit表示一个提交按钮,默认没有value属性 Reset表示是一个重置按钮 Selected表示是一个下拉框 Label表示的是绑定input里面的id,使input和label进行绑定 |
CSS的应用