慕课网

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

初识HTML(5)+CSS(3)

最热最新

mo823256234

<body>标签，网页上显示的内容放在这里 <p>标签，添加段落 <hx>标签来制作文章的标题 <q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签,浏览器会对q标签自动添加双引号 <blockquote>的作用也是引用别人的文本。但它是对长文本的引用 <blockquote>引用文本</blockquote> 浏览器对<blockquote>标签的解析是缩进样式 <em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示 <span>标签是没有语义的，它的作用就是为了设置单独的样式用的 span{ } 在html代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br /> 在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入 <hr>标签，添加水平横线 <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。 <address>标签，为网页加入地址信息,在浏览器上显示的样式为斜体 <code>标签在网页上显示程序代码,注：如果是多行代码，可以使用<pre>标签。

查看全部

8 采集收起
2018-03-22
CrazyRyan

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，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浏览器下可查看元素盒模型，如下图：

查看全部

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

现在有一个问题，如果有想为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为盒子添加边框（二）
2014-12-27
似枫叶飞

<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签 <body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

查看全部

0 采集收起来源：听说有新版本了? - html5文档结构
2018-03-22
CrazyRyan

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。如下面代码为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为盒子添加边框（一）
2014-12-27
爱酷虎

Relative与Absolute组合使用子容器可以在父容器内进行绝对偏移 1、参照定位的元素(父元素)必须加入position:relative; 2、定位元素（子元素）加入position:absolute，使用top、bottom、left、right来进行偏移定位。 <div id="box1"> <div id="box2">相对参照元素进行定位</div> </div> 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 #box1{ width:200px; height:200px; position:relative; } #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

查看全部

1 采集收起来源：Relative与Absolute组合使用
2018-03-22
BunnySong

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

查看全部

0 采集收起来源：万事无绝对 -层模型之绝对定位
2014-12-27
爱酷虎

层模型--相对定位设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。偏移前的位置保留不动,仍然占据区域：也就是说，在【块外面】的元素，依旧按照块原来的位置进行排列，只不过块原来的位置【隐形了】如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; }

查看全部

0 采集收起来源：相对于自己的位置-层模型之相对定位
2014-12-27
爱酷虎

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

查看全部

0 采集收起来源：万事无绝对 -层模型之绝对定位
2014-12-27
爱酷虎

float:left 向左浮动

查看全部

0 采集收起来源：起飞咯 - 浮动模型
2014-12-27
MKeven

a标签语法: <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> title:鼠标停留在链接时显示的文字

查看全部

0 采集收起
2018-03-22
BunnySong

div{padding:20px 10px 15px 30px;}

查看全部

0 采集收起来源：宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）
2014-12-27
MKeven

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化) 语法:<table summary="表格简介文本"> 标题在表格头居中,为表格标题. 语法： <table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>

查看全部

0 采集收起
2018-03-22
BunnySong

1、盒子模型的边框就是围绕着内容及补白的线 2、这条线你可以设置它的【粗细width】、【样式style】和【颜色color】(边框三个属性) 3、设置形式如下 { border-width:2px; border-style:solid; border-color:red;} 或者简写：{border:2px solid red;} 4、边框样式常见样式有：dashed虚线 dotted点线 solid实线 5、边框颜色颜色为十六进制 6、宽度一般用像素表示，或者thin medium thick

查看全部

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2014-12-27
wyhsy001

给网页的独立的版块添加“标记”.<div id="版块名称">…</div>

查看全部

0 采集收起
2018-03-22

首页上一页 27160 27161 27162 27163 27164 27165 27166 下一页尾页

0/150

提交

取消

开始学习

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

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