慕课网

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

初识HTML(5)+CSS(3)

最热最新

慕用2449304
浮动模型
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
```
div{
    width:200px;
    height:200px;
    border:2px red solid;    float:left;}
<div id="div1"></div>
<div id="div2"></div>
```
查看全部

0 采集收起来源：起飞咯 - 浮动模型
2020-12-21
慕用2449304

流动模型（二）
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

查看全部

0 采集收起来源：排队显示-流动模型（二）
2020-12-21
慕斯1095740

嵌入式css样式
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

查看全部

0 采集收起来源：换个地方吧,行内太挤了 - 嵌入式css样式
2020-12-21
慕用2449304

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

查看全部

0 采集收起来源：排队显示-流动模型（一）
2020-12-21
慕用2449304

css布局模型
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2020-12-21
慕斯1095740
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
```
<p >这里文字是红色。</p>
```
查看全部

0 采集收起来源：既然那么好,那就引入css吧 - 内联式css样式
2020-12-21
慕用2449304
使用margin为盒子设置外边距（边界）
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
```
div{margin:20px 10px 15px 30px;}
```
如果上右下左的边界都为10px;可以这么写：
```
div{ margin:10px;}
```
如果上下边界一样为10px，左右一样为20px，可以这么写：
```
div{ margin:10px 20px;}
```
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
查看全部

0 采集收起来源：距离产生美 - 使用margin为盒子设置外边距（边界）
2020-12-21
慕用2449304
使用padding为盒子设置内边距（填充）
元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。如下代码：
```
div{padding:20px 10px 15px 30px;}
```
如果上、右、下、左的填充都为10px;可以这么写
```
div{padding:10px;}
```
如果上下填充一样为10px，左右一样为20px，可以这么写：
```
div{padding:10px 20px;}
```
查看全部

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

CSS注释代码
在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。

查看全部

0 采集收起来源：听我再解释解释 - CSS注释代码
2020-12-21
慕用2449304
使用border-radius设置圆角
元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。如下代码：
```
 div{border-radius: 20px 10px 15px 30px;}
```
如果四个圆角都为10px;可以这么写：
```
div{ border-radius:10px;}
```
如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：
```
div{ border-radius:10px 20px;}
```
需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。
查看全部

0 采集收起来源：加个圆角 - 使用border-radius设置圆角
2020-12-21
慕斯1095740



<!--声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分。如：p{font-size:12px;colo

查看全部

0 采集收起来源：瞧瞧css的庐山真面目吧 - CSS代码语法
2020-12-21
慕用2449304
使用border为盒子添加边框（二）
只为一个方向设置边框样式：
```
div{border-bottom:1px solid red;}
```
查看全部

0 采集收起来源：我想脚下踩条线 - 使用border为盒子添加边框（二）
2020-12-21
慕用2449304
使用border为盒子添加边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
```
border-color:#888;//前面的井号不要忘掉。
```
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
查看全部

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2020-12-21
慕斯1095740

<span>...</span><!....语义化，可用来设置格式...>
span
{
}
<!..设置格式的时候不用</span>>

查看全部

0 采集收起来源：为什么是css呢? - CSS样式的优势
2020-12-21
慕用2449304
背景色
网页中的标签不论是行内元素还是块状元素都可以给它设置一个背景色。
为标签设置背景颜色可以使background-color:颜色值来实现。
例子如下：
```
div{background-color:red;}//为块状元素设置
a{background-color:green;}//为行内元素设置
```
查看全部

0 采集收起来源：设置个美美哒的颜色-背景色
2020-12-21

首页上一页 355 356 357 358 359 360 361 下一页尾页

0/150

提交

取消

开始学习

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

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

初识HTML(5)+CSS(3)

浮动模型

流动模型（二）

嵌入式css样式

流动模型（一）

css布局模型

使用margin为盒子设置外边距（边界）

使用padding为盒子设置内边距（填充）

CSS注释代码

使用border-radius设置圆角

使用border为盒子添加边框（二）

使用border为盒子添加边框

背景色