慕课网

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

初识HTML(5)+CSS(3)

最热最新

慕娘6328945

要想输入空格，必须写入 。

查看全部

0 采集收起来源：再加点空格呢 - 使用特殊字符 实现空格标签
2020-11-09
BIT_W
CSS样式小技巧：
水平居中-行内：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码：
```
<style>
  .txtCenter{
    text-align:center;
  }
</style>
<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
```
水平居中-定宽块状元素：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
```
<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}
</style>
<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
```
也可以写成：
```
margin-left:auto;
margin-right:auto;
```
注意：
1、元素的“上下 margin” 是可以随意设置的。
2、这种水平居中的方法两个条件（定宽和块状）缺一不可
水平居中-已知宽高垂直居中：通常使用定位完成，例如想要实现以下效果：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
```
.box {
    border: 1px solid #00ee00;
    height: 300px;
    position:relative;
}
.box1 {
    width: 200px;
    height: 200px;;
    border: 1px solid red;
    
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
}
```
```
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
```
查看全部

0 采集收起来源：面试常考题之宽高不定实现盒子水平垂直居中
2020-11-09
慕娘6328945

文章的段落用<p>标签，那么文章的标题用什么标签呢？在本节我们将使用<hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)

查看全部

0 采集收起来源：做个标题党 - 使用<hx>标签为网页增加标题
2020-11-09

BIT_W

flex弹性盒模型：

技术点的解释：

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

.box {
    background: blue;
    display: flex;    
}
.box div{
    width: 200px;
    height: 200px;    
}
.box1{
    background: red;    
}
.box2{
    background: orange;   
}
.box3{
    background: green;
}

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

justify-content属性设置横轴排列方式：

我们来学习justify-content属性，本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解，属性值分别为：

 justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

实现效果：

flex-end：右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

实现效果：

center：居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

实现效果：

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

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

实现效果：

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

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

实现效果：

使用align-items属性设置纵轴排列方式

我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：

align-items: flex-start | flex-end | center | baseline | stretch;

结合右侧编辑器中的布局以及下面的样式设置进行理解：

flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

实现效果：

flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

实现效果：

center：交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

实现效果：

baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

实现效果：

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

    .box div {
        /*不设置高度，元素在垂直方向上铺满父容器*/
        width: 200px;
    }

实现效果：

子元素设置flex占比

技术点的解释：

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效

.box {
    background: blue;
    display: flex;
}
.box div{
    width: 200px;
    height: 200px;
}
.box1{
    flex: 1;
    background: red;
}
.box2{
    flex: 3;
    background: orange;
}
.box1{
    flex: 2;
    background: green;
}

<div class="box">
    <div class="box1">flex:1</div>
    <div class="box2">flex:2</div>
    <div class="box3">flex:3</div>
</div>

查看全部

0 采集收起来源：我想占大头 - 给子元素设置flex占比

2020-11-09

W2129057

由于浏览器具有容错机制，所以即使将代码卸载body与head标签之间也没有关系

查看全部

0 采集收起来源：开始我们的第一段对话吧- 段落标签
2020-11-08
菠萝吹雪666

ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

查看全部

0 采集收起来源：类和ID选择器的区别
2020-11-08
菠萝吹雪666

内联式嵌入式外联式
英文圆点开头

查看全部

0 采集收起来源：再选一个类 - 类选择器
2020-11-08
菠萝吹雪666

就近原则（离被设置元素越近优先级别越高）。
内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下

查看全部

0 采集收起来源：总有个先来后到吧 - 三种链接方式的优先级
2020-11-08
菠萝吹雪666

、rel="stylesheet" type="text/css" 是固定写法不可修改
<link>标签位置一般写在<head>标签之内

查看全部

0 采集收起来源：还是把html和css分开吧 - 外部式css样式
2020-11-08
菠萝吹雪666

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

查看全部

0 采集收起来源：换个地方吧,行内太挤了 - 嵌入式css样式
2020-11-08
qq_慕勒8112935

thead,tbody,tfoot的作用是让表格内容分段显示，当表格很大的时候很实用
tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示

查看全部

0 采集收起来源：使用thead、tbody、tfoot定义表格
2020-11-08
慕尼黑5371450

<select>
<option value="(服务器提交的值)" selected="selected"(默认显示)>显示的值</option>
</select>

查看全部

0 采集收起来源：使用select、option标签创建下拉菜单
2020-11-08
慕尼黑5371450

<input type="radio/checkbox" value=“值” name=“名称” checked=“checked” >
radio----单选框，同一组的单选，name必须一致
checkbox----复选框
value：提交数据到服务器的值（后台程序PHP使用
name：为控件命名，以备后台程序 ASP、PHP 使用
checked="checked" 时，该选项被默认选中

查看全部

0 采集收起来源：填填性别和兴趣爱好 - 单选框、复选框，让用户选择
2020-11-08
qq_慕勒8112935

有序列表 (<ol>)
<ol>
<li>...</li>
<li>...</li>
</ol>
无序列表 (<ul>)
<ul>
<li>...</li>
<li>...</li>
</ul>

查看全部

3 采集收起来源：我还想diy点样式- 使用<div>标签自定义块
2020-11-08
qq_慕勒8112935

<span>标签没有语义，所以将span替换成其他字符，都可以
也可以直接在段落里设置颜色，如：
<an1 >美国梦</an1>

查看全部

0 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2020-11-08

首页上一页 414 415 416 417 418 419 420 下一页尾页

0/150

提交

取消

开始学习

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

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