慕课网

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

初识HTML(5)+CSS(3)

最热最新

新月3992293

justify-content: (主轴上的对齐方式)
flex-start | flex-end | center | space-between | space-around;
flex-start：交叉轴的起点对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

查看全部

0 采集收起来源：操作一下横轴- 使用justify-content属性设置横轴排列方式
2021-07-21
新月3992293

三个块元素设置大小以及背景色，在父容器中添加flex。
技术点的解释：
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2021-07-21
新月3992293
用于实现浮动窗口
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
```
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
```
查看全部

0 采集收起来源：我就在那不动了-层模型之固定定位
2021-07-21
啊扎西

结构<html>
<head>抬头
<title>...</title>现在网页上方的标题
</head>
<body>显示网页的内容
<h1>...</h1>网页显示的标题，字体自动放大
<p>...</p>显示的段落
</body>
</html>

查看全部

0 采集收起来源：你就是馋人家的身子 - 认识body标签
2021-07-21
小兔吃豆腐

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

查看全部

0 采集收起来源：给元素分个类 - 元素分类
2021-07-21
新月3992293

CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

查看全部

0 采集收起来源：什么是层模型？
2021-07-21

新月3992293

任何元素在默认情况下是不能浮动的，但可以用 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>

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 采集收起来源：起飞咯 - 浮动模型

2021-07-21

新月3992293

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

查看全部

0 采集收起来源：排队显示-流动模型（二）
2021-07-21
新月3992293

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

查看全部

0 采集收起来源：排队显示-流动模型（一）
2021-07-21
新月3992293
如果四个圆角都为10px;可以这么写：
```
div{ border-radius:10px;}
```
如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：
```
div{ border-radius:10px 20px;}
```
需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：
```
div {
      width: 200px;
       height: 200px;
          border: 5px solid red;
        border-radius: 100px;  
          }
```
查看全部

0 采集收起来源：加个圆角 - 使用border-radius设置圆角
2021-07-21
新月3992293
元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。如下代码：
```
div{border-radius: 20px 10px 15px 30px;}
```
```
div{
    border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}
```
查看全部

0 采集收起来源：加个圆角 - 使用border-radius设置圆角
2021-07-21
新月3992293
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

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

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2021-07-21
慕哥0586763

文段中间要用<body></body>
标签用<hx></hx>

查看全部

0 采集收起来源：做个标题党 - 使用<hx>标签为网页增加标题
2021-07-20
新月3992293

display:none

查看全部

0 采集收起来源：隐身术 - none不占据位置
2021-07-20
新月3992293

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

查看全部

0 采集收起来源：我还要站个大位置 - 内联块状元素
2021-07-20

首页上一页 221 222 223 224 225 226 227 下一页尾页

0/150

提交

取消

开始学习

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

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