首页 > 代码库 > CSS的应用

CSS的应用

2024-08-17 03:46:56   220人阅读

 

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. 1.       ul>
  2. 2.                <li>吃的
  3. 3.              <ul>
  4. 4.                         <li>饼干</li>
  5. 5.                         <li>水果
  6. 6.                      <ul>
  7. 7.                               <li>榴莲</li>
  8. 8.                               <li>香蕉
  9. 9.                                <ul>
  10. 10.                                     <li>拔丝香蕉
  11. 11.                                      <ul>
  12. 12.                                        <li>冷的</li>
  13. 13.                                        <li>热的</li>
  14. 14.                                      </ul>
  15. 15.                                     </li>
  16. 16.                                     <li>越南香蕉</li>
  17. 17.                             </ul>
  18. 18.                            </li>
  19. 19.                   </ul>
  20. 20.                      </li>
  21. 21.           </ul>
  22. 22.             </li>
  23. 23.     
  24. 24.             <li>喝的</li>
  25. 25.             <li>用的</li>
  26. 26.             <li>玩的</li>
  27. 27.    </ul>

 

1.2有序列表

ordered list 有序列表 ，用ol表示

<ol>

         <li>小苹果</li>

         <li>最炫名族风</li>

         <li>隔壁老王</li>

</ol>

浏览器会自动添加阿拉伯序号

 

总结：

ol与ul的定义是不同的：

  1. 有序和无序
  2. 当前都是列表项（li）被包裹
  3. 一般来说很少使用有序列表，基本都是使用无序列表

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>

表示的语义两层：

  1. 是一个列表，列出北京、上海，广州
  2. 每个专有名词都有自己的描述项

 

 

<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的应用


联系
我们