慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

sjlovesxh

伪元素：p:first-letterp的第一个 p:first-linep的第一行 h1:after之后 h2:before某个元素的之前伪类：p:lang p:first-child某个元素内的第一个元素 a:link a:active a:hover a:visited

查看全部

0 采集收起来源：先来填用户名和密码 - 文本输入框、密码输入框
2015-01-02
杂果绘

常用的块状元素有： <div> <p> <h1> <ol> <ul> <dl> <table> <address> <blockquote> <form> 常用的内联元素有： <div> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code> 常用的内联块状元素有： <img> <input>

查看全部

0 采集收起来源：给元素分个类 - 元素分类
2018-03-22
我的其他QQ帐号

任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。 div{ width:200px; float:上下左右 height:200px; border:2px red solid; float:left; } <div id="div1"></div> <div id="div2"></div> 效果图当然你也可以同时设置两个元素右浮动也可以实现一行显示。 div{ width:200px; height:200px; border:2px red solid; float:right; } 又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以： div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;}

查看全部

0 采集收起来源：起飞咯 - 浮动模型
2018-03-22
我的其他QQ帐号

内联元素标签a、span、em、strong都是内联元素。 <em>代表斜体</em> <strong>代表粗体</strong> <a href="http://www.imooc.com">www.imooc.com</a>代表跳转链接

查看全部

0 采集收起来源：排队显示-流动模型（二）
2018-03-22
我的其他QQ帐号

流动模型（一）先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

查看全部

0 采集收起来源：排队显示-流动模型（一）
2015-01-02
我的其他QQ帐号

布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2015-01-02
我的其他QQ帐号

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码： div{margin:20px 10px 15px 30px;} 也可以分开写： div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; } 如果上右下左的边界都为10px;可以这么写： div{ margin:10px;} 如果上下边界一样为10px，左右一样为20px，可以这么写： div{ margin:10px 20px;} 总结一下：padding和margin的区别，padding在边框里，margin在边框外。

查看全部

0 采集收起来源：距离产生美 - 使用margin为盒子设置外边距（边界）
2015-01-02
我的其他QQ帐号

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码： div{padding:20px 10px 15px 30px;} 顺序一定不要搞混。可以分开写上面代码： div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; } 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;} 如果上下填充一样为10px，左右一样为20px，可以这么写： div{padding:10px 20px;}

查看全部

0 采集收起来源：宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）
2015-01-02
我的其他QQ帐号

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是同理。比如： css代码： div{ width:200px; padding:20px; border:1px solid red; margin:10px; } html代码： <body> <div>文本内容</div> </body> 元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，

查看全部

0 采集收起来源：长胖长高点--宽度和高度
2018-03-22
sjlovesxh

<map name="Map" id="Map">map用给一个去一个热点包括这个区域的形状和可以自己的定义什么样子的形 <area shape="rect矩形" coords坐标="226,60,368,227" href链接到哪里="http://www.baidu.com" /> <area shape="poly自定义" coords="144,240,145,240,321,145,234,162,108,97" href="#" />

查看全部

0 采集收起来源：使用表单标签，与用户交互 - 使用<form>创建表单
2018-03-22
我的其他QQ帐号

如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式： div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三边上、右、左边框的设置： border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;

查看全部

0 采集收起来源：我想脚下踩条线 - 使用border为盒子添加边框（二）
2015-01-02
我的其他QQ帐号

如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是border代码的缩写形式，可以分开写： div{ border-width:2px; border-style:solid; border-color:red; } 注意： 1、border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid（实线）。 2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如: border-color:#888;//前面的井号不要忘掉。 3、border-width（边框宽度）中的宽度也可以设置为： thin | medium | thick（但不是很常用），最常还是用象素（px）。

查看全部

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2015-01-02
sjlovesxh

form：网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 <form method="传送方式" action="服务器文件"> <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> 1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3.method ：数据传送的方式（get/post）。 <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form> 当点击<label for="username">时，光标焦点会定位到id="username"为的输入框上。这样方便用户操作！ label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。实例带有两个输入字段和相关标记的简单 HTML 表单：

查看全部

0 采集收起来源：使用表单标签，与用户交互 - 使用<form>创建表单
2018-03-22
我的其他QQ帐号

盒子模型：月饼盒：页面元素（例：<div>）月饼（内容）：文字、图片、另一个标签元素月饼盒到月饼的距离：内填充（padding）两个月饼盒之间的距离：外边距（margin）盒子的边框（border）块级标签都具备盒子模型特征。如：<div><ul><ol><p><h><table> 1、元素实际高度（盒子的高度）是：自己高度+上下内填充+上下边界+上下边框 2、同理，元素实际宽度（盒子的宽度）是：自己宽度+左右内填充+左右边界+左右边框内填充、外边距和边框都有4个方向

查看全部

5 采集收起来源：变个盒子-什么是盒模型（视频）
2018-03-22
我的其他QQ帐号

元素分类--内联块状元素内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。 inline-block元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置加上display:inline-block;即可将内联元素转为块元素

查看全部

0 采集收起来源：我还要站个大位置 - 内联块状元素
2018-03-22

首页上一页 27104 27105 27106 27107 27108 27109 27110 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。