慕课网

初识HTML(5)+CSS(3)-升级版

最热最新

馬駿朱

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

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2023-02-28
馬駿朱

层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

查看全部

0 采集收起来源：什么是层模型？
2023-02-28
馬駿朱

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

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2023-02-28
慕尼黑0061395

权限最高选择器 !important
p{color:red!important}

查看全部

0 采集收起来源：为所欲为 - 选择器最高层级!important
2023-02-28
馬駿朱

常用的块状元素有：
<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 采集收起来源：给元素分个类 - 元素分类
2023-02-28
馬駿朱

技术点的解释：
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

查看全部

0 采集收起来源：给文本装饰一下 - 使用text-decoration添加文本修饰
2023-02-28
慕尼黑0061395

.tx{
color:red;}
<span class="tx">xx</span>

查看全部

0 采集收起来源：再选一个类 - 类选择器
2023-02-27
慕无忌1420190

<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>

查看全部

0 采集收起来源：给点提示呗 - placeholder属性的使用
2023-02-25
慕尼黑0061395

selected="selected"

查看全部

0 采集收起来源：使用select、option标签创建下拉菜单
2023-02-24
慕尼黑0061395

placeholder 设置输入类型

查看全部

0 采集收起来源：在家呆多少天啦? - 数字输入框
2023-02-24
慕无忌1420190

无序列表:<p>重点标题</p>
<ul>
<li>.......</li>
<li>.......</li>不只一个
</ul>
有序列表：<ol>
<li>...</li>
......
<li>...</li>
<ol/>
reversed。表示列表的顺序为降序，属性值为reversed。
start。表示列表的起始值，属性值为数值
type。表示列表序号的类型，属性值有1，A,a,I,i
dise(实心圆）circle(空心圆）square(实心方块）
自定义标签：<dl>
<dt>列表标题1</dt>
<dd>列表内容1.1</dd>
<dd>列表内容1.2</dd>
<dt>列表标题2</dt>
<dd>列表内容2</dd>
</dl>
嵌套列表：<ol>里面可以加<li>,<li>里面可以加<ol>

查看全部

0 采集收起来源：我还想diy点样式- 使用<div>标签自定义块
2023-02-24
慕无忌1420190

<span>文本</span>

查看全部

0 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2023-02-24
weixin_慕仰0195594

<!DOCTYPE html>

<
!
D
O
C
T
Y
P
E
h
t
m
l
>

<html>

<
h
t
m
l
>

<head>

<
h
e
a
d
>

<meta charset="UTF-8">

<
m
e
t
a
c
h
a
r
s
e
t
=
“
U
T
F
-
8
”
>

<style>

<
s
t
y
l
e
>

.abc {

.
a
b
c
gé
格
shì
式
{

height:100px;

gāo
高
dù
度
：
1
0
0
p
x
；

width:100px;

kuān
宽
dù
度
：
1
0
0
p
x
；

background-color:red;

bèi
背
jǐng
景
sè
色
：
hóng
红
sè
色
；

}

}

.abc1{

.
a
b
c
1
{

height:100px;

gāo
高
dù
度
：
1
0
0
p
x
；

width:100%;

kuān
宽
dù
度
：
1
0
0
%
；

background-color:blue;

bèi
背
jǐng
景
sè
色
：
lán
蓝
sè
色
；

}

}

.nb{

.
n
b
wén
文
jiàn
件
{

display:flex;

xiǎn
显
shì
示
：
róu
柔
xìng
性
；

flex-direction: row;

wān
弯
qū
曲
fāng
方
xiàng
向
：
xíng
行
；

}

}

.abc2{

.
a
b
c
2
{

height:100px;

gāo
高
dù
度
：
1
0
0
p
x
；

width:100px;

kuān
宽
dù
度
：
1
0
0
p
x
；

background-color:orange;

bèi
背
jǐng
景
sè
色
：
chéng
橙
sè
色
；

}

}

.abc3{

.
a
b
c
3
{

height:100px;

gāo
高
dù
度
：
1
0
0
p
x
；

width:100%;

kuān
宽
dù
度
：
1
0
0
%
；

background-color:green;

bèi
背
jǐng
景
sè
色
：
lǜ
绿
sè
色
；

}

}

.abc4{

.
a
b
c
4
{

height:100px;

gāo
高
dù
度
：
1
0
0
p
x
；

width:100%;

kuān
宽
dù
度
：
1
0
0
%
；

background-color:pink;

bèi
背
jǐng
景
sè
色
：
fěn
粉
sè
色
；

}

}

.abc6{

.
a
b
c
6
{

height:300px;

gāo
高
dù
度
：
3
0
0
p
x
；

width:100%;

kuān
宽
dù
度
：
1
0
0
%
；

background-color:aliceblue;

bèi
背
jǐng
景
sè
色
：
a
l
i
c
e
b
l
u
e
；

}

}

.abc6{

.
a
b
c
6
{

padding-top:20px;

tián
填
chōng
充
dǐng
顶
bù
部
：
2
0
p
x
；

}

}

.abp{

.
a
b
p
wén
文
jiàn
件
{

width: 100%;

kuān
宽
dù
度
：
1
0
0
%
；

display:flex;

xiǎn
显
shì
示
：
róu
柔
xìng
性
；

flex-direction: row;

wān
弯
qū
曲
fāng
方
xiàng
向
：
xíng
行
；

}

}

.abcp{

.
a
b
c
p
wén
文
jiàn
件
{

width:65%;

kuān
宽
dù
度
：
6
5
%
；

}

}

.bacp{

.
b
a
c
p
wén
文
jiàn
件
{

width:35%;

kuān
宽
dù
度
：
3
5
%
；

}

}

.de1{

.
d
e
1
bǎn
版
běn
本
{

width:100%;

kuān
宽
dù
度
：
1
0
0
%
；

display:flex;

xiǎn
显
shì
示
：
róu
柔
xìng
性
；

flex-direction:row;

wān
弯
qū
曲
fāng
方
xiàng
向
：
xíng
行
；

}

}

.er{

.
e
呃
{

width:100%;

kuān
宽
dù
度
：
1
0
0
%
；

}

}

p{

p
xíng
型
{

font-weight:bold;

zì
字
hào
号
：
cū
粗
tǐ
体
；

}

}

p{

p
xíng
型
{

font-size:17px;

zì
字
tǐ
体
dà
大
xiǎo
小
：
1
7
p
x
；

}

}

h2{

qīng
氢
qì
气
{

font-size:25px;

zì
字
tǐ
体
dà
大
xiǎo
小
：
2
5
p
x
；

}

}

h3{

dì
第
sān
三
dài
代
{

font-size:21px;

zì
字
tǐ
体
dà
大
xiǎo
小
：
2
1
p
x
；

}

}

.abp{

.
a
b
p
wén
文
jiàn
件
{

border:1px solid aqua;

biān
边
kuàng
框
：
1
p
x
chún
纯
sè
色
；

background-color:aqua;

bèi
背
jǐng
景
sè
色
：
qiǎn
浅
lǜ
绿
sè
色
；

height:420px;

gāo
高
dù
度
：
4
2
0
p
x
；

width:100%;

kuān
宽
dù
度
：
1
0
0
%
；

background-color:aqua;

bèi
背
jǐng
景
sè
色
：
qiǎn
浅
lǜ
绿
sè
色
；

}

}

div.abc7{

fēn
分
qū
区
b
c
7
{

background-color:blueviolet;

bèi
背
jǐng
景
sè
色
：
lán
蓝
zǐ
紫
sè
色
；

width:57px;

kuān
宽
dù
度
：
5
7
p
x
；

height:300px;

gāo
高
dù
度
：
3
0
0
p
x
；

left:300px;

zuǒ
左
：
3
0
0
p
x
；

top:100px;

dǐng
顶
bù
部
：
1
0
0
p
x
；

position: absolute;

wèi
位
zhi
置
：
jué
绝
duì
对
；

border-radius:50%;

biān
边
jiè
界
bàn
半
jìng
径
：
5
0
%
；

box-sizing: border-box;

kuàng
框
dà
大
xiǎo
小
tiáo
调
zhěng
整
：
biān
边
kuàng
框
kuàng
框
；

}

}

</style>

<
/
s
t
y
l
e
>

</head>

<
/
h
e
a
d
>

<body>

<
b
o
d
y
>

<div class="de1">

<
d
i
v
c
l
a
s
s
=
“
d
e
1
”
>

<img class="er" src="微信图片_20230221091855.png"/>

<
i
m
g
c
l
a
s
s
=
“
e
r
”
s
r
c
=
“
wēi
微
xìn
信
tú
图
piàn
片
_
2
0
2
3
0
2
2
1
0
9
1
8
5
5
.
p
n
g
“
/
>

</div>

<
/
d
i
v
>

<div class="nb">

<
d
i
v
c
l
a
s
s
=
“
n
b
”
>

<div class="abc"></div>

<
d
i
v
c
l
a
s
s
=
“
a
b
c
”
>
<
/
d
i
v
>

<div class="abc1"></div>

<
d
i
v
c
l
a
s
s
=
“
a
b
c
1
”
>
<
/
d
i
v
>

<div class="abc2"></div>

<
d
i
v
c
l
a
s
s
=
“
a
b
c
2
”
>
<
/
d
i
v
>

</div>

<
/
d
i
v
>

<div>

＜
d
i
v
＞

<div class="abc3"></div>

<
d
i
v
c
l
a
s
s
=
“
a
b
c
3
”
>
<
/
d
i
v
>

</div>

<
/
d
i
v
>

<div class="abc7"></div>

<
d
i
v
c
l
a
s
s
=
“
a
b
c
7
”
>
<
/
d
i
v
>

<div>

＜
d
i
v
＞

<div class="abc4"></div>

<
d
i
v
c
l
a
s
s
=
“
a
b
c
4
”
>
<
/
d
i
v
>

</div>

<
/
d
i
v
>

<div class="abp ">

<
d
i
v
c
l
a
s
s
=
“
a
b
p
”
>

<img class="abcp" src="！1.png"/>

<
i
m
g
c
l
a
s
s
=
“
a
b
c
p
”
s
r
c
=
“
！
1
.
p
n
g
”
/
>

<img class="bacp" src="微信图片png.png"/>

<
i
m
g
c
l
a
s
s
=
“
b
a
c
p
”
s
r
c
=
“
wēi
微
xìn
信
tú
图
piàn
片
p
n
g
.
p
n
g
“
/
>

</div>

<
/
d
i
v
>

<div class="abc6">

<
d
i
v
c
l
a
s
s
=
“
a
b
c
6
”
>

<h1>十五从军征</h1>

<
h
1
>
shí
十
wǔ
五
cóng
从
jūn
军
zhēng
征
<
/
h
1
>

<h2>八十始得归</h2>

<
h
2
>
bā
八
shí
十
shǐ
始
dé
得
guī
归
<
/
qīng
氢
qì
气
>

<h3>道逢乡里人</h3>

<
h
3
>
dào
道
féng
逢
xiāng
乡
lǐ
里
rén
人
<
/
h
3
>

<p>家中有阿谁</p>

<
p
>
jiā
家
zhōng
中
yǒu
有
ā
阿
shuí
谁
<
/
p
＞

<p>遥看是君家</p>

<
p
>
yáo
遥
kàn
看
shì
是
jūn
君
jiā
家
<
/
p
＞

<p>松柏冢累累</p>

<
p
>
sōng
松
bǎi
柏
zhǒng
冢
léi
累
léi
累
<
/
p
＞

</div>

<
/
d
i
v
>

</body>

<
/
b
o
d
y
>

</html>

<
/
h
t
m
l
>

查看全部

0 采集收起来源：开始我们的第一段对话吧- 段落标签
2023-02-24
weixin_慕哥1480406

但是前面不是说了块元素的宽度除非设定，不然是其父元素的100%吗？

查看全部

0 采集收起来源：Relative与Absolute组合使用
2023-02-24
weixin_慕仰0195594

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.abc {
height:100px;
width:100px;
background-color:red;
}
.abc1{
height:100px;
width:100%;
background-color:blue;
}
.nb{
display:flex;
flex-direction: row;
}
.abc2{
height:100px;
width:100px;
background-color:orange;
}
.abc3{
height:100px;
width:100%;
background-color:green;
}
.abc4{
height:100px;
width:100%;
background-color:pink;
}
.abc6{
height:300px;
width:100%;
background-color:aliceblue;
}
.abc6{
padding-top:20px;
}
.abp{
width: 100%;
display:flex;
flex-direction: row;
}
.abcp{
width:65%;
}
.bacp{
width:35%;
}
p{
font-weight:bold;
}
p{
font-size:17px;
}
h2{
font-size:25px;
}
h3{
font-size:21px;
}
.abp{
border:1px solid aqua;
background-color:aqua;
height:420px;
width:100%;
background-color:aqua;
}
</style>
</head>
<body>
<div class="nb">
<div class="abc"></div>
<div class="abc1"></div>
<div class="abc2"></div>
</div>
<div>
<div class="abc3"></div>
</div>
<div>
<div class="abc4"></div>
</div>
<div>
</div>
<div class="abp ">
<img class="abcp" src="！1.png"/>
<img class="bacp" src="微信图片png.png"/>
</div>
<div class="abc6">
<h1>十五从军征</h1>
<h2>八十始得归</h2>
<h3>道逢乡里人</h3>
<p>家中有阿谁</p>
<p>遥看是君家</p>
<p>松柏冢累累</p>
</div>
</body>
</html>

查看全部

0 采集收起来源：语义化，让你的网页更好的被搜索引擎理解
2023-02-23

首页上一页 55 56 57 58 59 60 61 下一页尾页

0/150

提交

取消

开始学习

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

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