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 dt 表示 definition title dd表示 definition |
<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 </span> |
Span里面只能存放图片,文字,表单元素。Span不能存放p、h、ul、dl、ol、div。
<div> 这是一个div <span> <a </span> </div> span里面放置小元素,div里面放置大东西 |
2.3div+css布局
详情参见代码示例 |
2.4表单元素表单就是收集数据的,就是让用户添加当前的数据 |
<div> <h1>欢迎来到本网站注册</h1> <form> 所有的表单元素都要写在form标签里面<br> <input <input <input <input <input <input <input <input <input <input <input <input <input <input <input
</form>
<option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> <option>长沙</option>
</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的应用的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- The MESI Protocol
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION To provide cache cons ...
- Reveal - UI 分析工具
一.安装和简介 a) download url b) Reveal 使用的方法有两种: Static Library Intefration, Dynamic Library Intefration. ...
- 去除select的样式
select::-ms-expand { display: none } .info-select { width: 88px; height: 25px; border: none; outline ...
- 带阈值的平滑l0范数加速稀疏恢复——同名英文论文翻译
原文链接:Thresholded Smoothed l0 Norm for Accelerated Sparse Recovery http://ieeexplore.ieee.org/documen ...
- 关于iOS和android自定义包的名字
自定义包名的使用,android的包名和ios的包名都是你的自定义包名!如下以新浪微博SDK自定义包名示例:(官方没的,自己踩过坑,方便后来人吧) 相关技术文档:http://www.apicloud ...
- [SharePoint 2013] Subscribe report within SharePoint mode
param([string]$path, [string]$fileName, [string]$storage) $description = "Save in $storage as $ ...
- Java 使用GDAL 读写 shapefile
读取shp文件,并把它转化为json import org.gdal.ogr.*; import org.gdal.ogr.Driver; import org.gdal.gdal.*; public ...
- RDIFramework.NET-.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理(MVC版)
RDIFramework.NET—.NET快速开发整合框架 [开发实例]之产品管理(MVC版) 接上篇:RDIFramework.NET (.NET快速信息化系统开发整合框架) [开发实例]之产品管理 ...
- lintcode bugfree and good codestyle note
2016.12.4, 366 http://www.lintcode.com/en/problem/fibonacci/ 一刷使用递归算法,超时.二刷使用九章算术的算法,就是滚动指针的思路,以前写py ...
- Andorid项目创建AVD时,OK按钮无法点亮
经上网查证,发现原因在于CPU/ABI选项无法选择,并显示“No system images installed for this target”,也就是没有适合的系统镜像,通过与安装好了的ADT-b ...