html快捷键
!+ tab | 自动补全html信息 |
---|---|
ctrl + / | 形成多行注释 |
ctrl + 回车键 | 自动切换到下一行 |
shift + 回车 | 将当前一行往下移动,原有位置空行 |
div*5+回车 | 生成五个div的标签 |
(tr>tdX3)X3 | 生成3哥tr,每个tr有三个td,其中x表示*法 |
alt + 数字 | 表示切换到某个编写界面 |
css课堂练习
行内标签:再每个标签内定义样式,重复,繁琐
/*css行内标签*/
<body>
<img width="300px" src="/static/images/logo.png" alt="">
<img src="/static/images/mountain.jpg" alt="" style="width:300px">
<div>yxc</div>
<div style="width: 300px;height: 300px; background-color: aqua;">css样式风格</div>
</body>
内部样式标签:定义一个标签的样式,可用到相同标签名的标签上–>局限性:只能在某一个表定义样式,而不是多个表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="acwing,web,html">
<title>Web应用课作业</title>
<link rel="icon" href="images/logo.png">
<!-- 再head中定义标签的样式,或者类选择器的样式 -->
<style>
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
<style type="text/css">
/* 标签的样式->标签名{}
* class类名选择器->.类名{}
*/
p {
width: 50px;
height: 50px;
background-color: lawngreen;
}
.blue-p {
background-color: brown;
}
.blue {
background-color: blue;
}
.big {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<img class="big" src="/static/images/logo.png" alt="">
<img src="/static/images/mountain.jpg" alt="">
<p class="blue-p">1</p>
<p class="big">2</p>
<!-- 多个类名用空格隔开 -->
<p class="blue-p big">3</p>
<p class="blue big">4</p>
<p>5</p>
<p>6</p>
</body>
</html>
外部样式表:将某个样式应用到多个表中
/*定义一个style.css文件,样标签的样式存入其中,但是需要将该文件再head中引入过来,引入方式为*/
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
标签选择器
/* 标签选择器 */
div{
width: 100px;
height:100px;
background-color: aqua;
/* div默认不带第边距,就是div标签的边缘不会预留位置,而p标签有 */
/* 通过margin设置就好了 */
margin-bottom: 10px;
}
p{
width: 50px;
height: 70px;
background-color: aqua;
}
<body>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<p>p 1</p>
<p>p 2</p>
<p>p 3 </p>
<p>p 4</p>
</body>
id选择器
#mydiv{
background-color: blueviolet;
}
#myp{
background-color: brown;
}
<div id="mydiv">div 1</div>
<p id="myp">p 1</p>
类选择器
.red-tag{
background-color: pink;
}
.big-tag{
width: 150px;
height: 150px;
}
<!-- 多个类标签,可用空格隔开-->
<div class="red-tag big-tag">div 2</div>
伪类选择器
常用于链接标签、按钮标签
:link:链接访问前的样式
:visited:链接访问后的样式
:hover:鼠标悬停时的样式
:active:鼠标点击后长按时的样式
:focus:聚焦后的样式
.effect:hover{
/* :hover表示鼠标放上该标签定义的位置,而产生的变化 */
transform: scale(1.2); /* 表示方法1.2倍*/
transition: 2000ms; /* 表示产生变化的时间*/
}
#myp:hover{
background-color: royalblue;
transition: 2000ms;
}
<div class="effect">div 4</div>
<p id="myp">p 1</p>
.effect:hover{
/* :hover表示鼠标放上该标签定义的位置,而产生的变化 */
transform: scale(1.2); /* 表示方法1.2倍*/
transition: 2000ms; /* 表示产生变化的时间*/
}
#myp:hover{
background-color: royalblue;
transition: 2000ms;
}
a:link{
/* 没点击链接之前 */
background-color: aqua;
}
a:hover{
/* 鼠标悬浮在按钮上 */
background-color: brown;
}
a:active{
/* 点击时 */
background-color: chartreuse;
}
/* 链接可用link,visited,hover,active */
/* 按钮可用于hover,active */
button:hover{
/* 鼠标悬浮在按钮上 */
background-color: brown;
}
button:active{
/* 点击时 */
background-color: chartreuse;
}
/* 聚焦常用于输入框,就是你光标进入输入框的那种转态,就叫聚焦 */
input:focus{
background-color: aqua;
border-radius: 30% ;
}
input:hover{
background-color: darkorange;
}
<button>按钮4</button>
<input type="text">
位置伪类选择器:选择是其父标签第n个子元素的所有元素。
以p:nth-child(2){height=40px;}
表示从body标签开始依次往下遍历,判断每个标签是不是p标签的父标签的第二个儿子是不是标签p,是得话应用样式,不是的话,则不应用。
p{
width: 50px;
height: 70px;
background-color: aqua;
}
p:nth-child(4){
width: 200px;
height: 200px;
background-color: cadetblue;
}
<body>
<div>div 1</div>
<div>div 2</div> <!--是父节标签的第2个儿子,且不是p标签,应用样式-->
<p>p 1</p>
<p>p 2</p> <!--是父节标签的第4个儿子,且是p标签,应用样式-->
<p>p 3</p>
<p>p 4</p>
</body>
nth-child(n) n可以为关于n的函数,还可以为odd,even
p:nth-child(even){
width: 200px;
height: 200px;
background-color: cadetblue;
}
p:nth-child(odd){
width: 200px;
height: 200px;
background-color: cadetblue;
}
p:nth-child(2n){
width: 200px;
height: 200px;
background-color: cadetblue;
}
p:nth-child(2n + 1){
width: 200px;
height: 200px;
background-color: cadetblue;
}
目标伪类选择器:
:target:当url指向该元素时生效。
p:target{
width: 300px;
height: 400px;
background-color: yellow;
}
<body>
<a href="#myp">我的标签</a>
<p>p </p>
<p id="myp">p </p>
</body>
符合选择器
由两个及以上基础选择器组合而成的选择器。
element1, element2:同时选择元素element1和元素element2。
element.class:选则包含某类的element元素。
element1 + element2:选择紧跟element1的element2元素。
element1 element2:选择element1内的所有element2元素。
element1 > element2:选择父标签是element1的所有element2元素。
div,p{
/* 同时将div和p标签应用样式 */
width: 50px;
height: 50px;
background-color: aqua;
margin-bottom: 5px
}
div.big.read.good{
/* 将同时具有big类read类和good类的div标签应用改样式 */
width: 80px;
height: 90px;
background-color: gray;
}
div.good{
/* 将具有good的类的div的选择器应用样式 */
background-color: red;
}
div + p{
/* 紧跟在div标签元素后面的p应用改样式 */
background-color: green;
}
ul li{
/* li的祖先节点是ul的li应用改样式 */
background-color: purple;
}
li > ul {
/* ul的父标签是ul则应用此样式 */
background-color: aqua;
}
<body>
<div class="big read good">div</div>
<div class="big">div</div>
<div class="read">div</div>
<div class="good">div</div>
<p>p </p>
<p class="good">p </p>
<p>p </p>
<p class="big read good">p </p>
<ul>
<li>
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
</ul>
</body>
通配符选择器
*:选择所有标签
[attribute]:选择具有某个属性的所有标签
[attribute=value]:选择attribute值为value的所有标签
*{
/* 所有标签应用样式 */
width: 40px;
height: 80px;
}
div[class]{
/* 将具有class的div标签应用改样式 */
background-color: red;
}
div[class=good]{
/* 将具有class的标签且class的属性值为good的div标签应用改样式 */
background-color: red;
}
伪元素选择器
将特定内容当做一个元素,选择这些元素的选择器被称为伪元素选择器。
::first-letter:选择第一个字母
::first-line:选择第一行
::selection:选择已被选中的内容
::after:可以在元素后插入内容
::before:可以在元素前插入内容
p::first-letter{
/* 将p标签内容的第一个字应用样式 */
background-color: red;
}
p::first-line{
/* 将p标签内容的第一个行应用样式 */
background-color: red;
}
p::selection{
/* 将p标签的内容选中的部分应该该样式 */
color: yellow;
background-color: red;
}
h1::before{
/* 将h1标签内容的开头用改样式 */
content: "<<";
background-color: red;
}
h1::after{
/* 将h1标签内容的结尾用改样式 */
content: ">>";
background-color: red;
}
文本样式
text-align(对齐)的选项:center(居中), left, right, justify(左右对齐)
line-height(行高)可以用来竖直居中
letter-spaceing 字间距 单位同行高
text-indent(缩进) 单位em
text-decoration 选项很多自己搜
text-shadow(文字阴影): 举例 text-shadow: 5px -5px 2px color
div{
text-align: center;
/* % 相对于父元素的百分比 */
width: 100%;
/* px 设备上的像素点 */
line-height: 50px;
background-color: red;
}
p{
text-align: center;
/* 行高设置成父元素同高度的像素,可达到竖直居中 */
line-height: 50px;
}
<body>
<div>
<p>锄禾日当午</p>
</div>
</body>
<body>
<!-- div在body的子标签默认像素为16px,这样我们改页面的大小只需要更改最外层的像素大小即可 -->
<div style="font-size: 1em;">
<!--相当于16px * 2-->
第一层
<div style="font-size: 2em;">
<!--16px*4-->
第二层
<div style="font-size: 2em;">
<!--16px*8-->
第三层
</div>
</div>
</div>
</body>
<body>
<!-- rem这样的样式就不相当于每个标签父元素的大小了,而是凡是以rem为单位的字体大小,都是相对于html的字体大小的, -->
<div style="font-size: 2rem;">
<!--相当于16px * 2-->
第一层
<div style="font-size: 2rem;">
<!--16px*4-->
第二层
<div style="font-size: 2rem;">
<!--16px*8-->
第三层
</div>
</div>
</div>
</body>
div{
/* vw,vh就是相当于当前窗口的大小而显示的百分比 */
width: 50vw;
height: 40vh;
background-color: aqua;
}
div{
/* 设置文本字符的间距。 */
letter-spacing: 10px;
text-align: center;
height: 140px;
background-color: red;
}
显示一个超链接取出下滑线的功能
<body>
<a href="/about.html" style="text-decoration: none;">About</a>
</body>
div{
/* 设置文本在开头的缩进量。 */
text-indent: 2em;
}
div{
/* 喂蚊子添加阴影效果。默认参数,下->x轴,右->y轴,阴影模糊的半径,颜色 ,可多次设置,每次用逗号隔开*/
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
font-weight:表示的是字体的粗细
font-style: 表示字体是否是倾斜的 italic(斜体)
font-family:表示的是字体,例如英文里面的带衬线字体,中文里面的草书这些。
font-color:字体颜色
div{
/* 这样式的,可以让字体上下对齐 */
font-family:serif;
font-size:xx-small;
font-weight: 100px;
font-style: italic;
/* 是指div中内容的字体的颜色 */
color: red;
}
background-image: url(图片地址)
background-image的图层在background-color的上面
background-size cover选项可以让图占满div
cover是一定用图片覆盖div
contain 是图片不能超div
background-position:选项也是和字体阴影差不多的x、y偏移量。
比如 background-position: 50px 100px;
background-position:left/right top/bottom;
background-position:x y, x y; 如果有两张图片
background-attachment:选项 fixed
p{
background-image: url('/static/images/mountain.jpg');
/* 一个值:这个值指定图片的宽度,图片的高度隐式的为 auto */
background-size: 50%;
/* 两个值 */
/* 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto;
}
div{
width: 300px;
height: 300px;
background-color: aqua;
margin-top: 100px; /*距离上边距多少*/
margin-left: 100px;/*距离左边距多少*/
/* 逗号分隔的多个值:设置多重背景 */
background-image:url('/static/images/logo.png'),url('/static/images/mountain.jpg');
/* 逗号分隔的多个值:设置多重背景的大小 */
/* 设置背景图片的大小 */
background-size: 150px 300px, cover;
/* 多个背景图片的位置,不同图片逗号隔开 */
background-position: left,150px;
/* 让背景图片在当前div中不重复 */
background-repeat:no-repeat;
/* 决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。 */
background-attachment:scroll,scroll;
}
渐变色
div{
/* 设置渐变色 */
/* rgba其中第一个数表示红色,第二个数表示绿色,第三个数表示蓝色,第四个数表示透明度。 */
width: 50vw;
height: 50vh;
background-color: rgba(173, 216, 230, 0.5);
}
.mydiv:nth-child(1){
width: 150px;
height: 150px;
background-image: url('/static/images/mountain.jpg');
opacity: 0.5;
/* opacity设置透明度 */
}
边框
border-style:顺序上右下左,写两项:对应上下 左右 写三项,上右下,没写的那项(左)取对边值
border-radius:50%表示图片半径一半,相当于变成圆
div{
width: 200px;
height: 200px;
background-color: aqua;
margin-left: 100px;/*距离左边距多少*/
margin-bottom: 10px;
/* 设置边框的样式 */
border-style: dashed groove inset dotted;
/* 设置盒子模型的边框宽度。 */
border-width: 0 4px 8px 12px;
/* 设置元素四个边框颜色 */
border-color: red cyan black gold;
/* 设置元素的外边框圆角 */
border-radius: 50%;
/* 当有多个div表格式,决定表格的边框是分开的还是合并的 */
/* border-collapse: collapse; */
border-collapse:collapse ;
}
三种display标签代表:
div: block类型
span: inline类型
img: inline-block类型
div,span,img啦,他们的占用格式可以互相借用
div{
/* 独占一行 ,width、height、margin、padding均可控制*/
display: block;
}
span{
/* 可以g共占一行,width与height无效,水平方向的margin与padding有效,竖直方向的margin与padding无效 */
display: inline;
}
img{
/* 可以共占一行width、height、margin、padding均可控制 */
display: inline-block;
}
处理元素中的 空白
div{
/* 独占一行 ,width、height、margin、padding均可控制*/
display: block;
width: 400px;
height: 200px;
background-color: aqua;
/* 自动换行,连续的空白符会被合并 */
/* white-space: normal; */
/* 连续的空白符会被合并。但文本内的换行无效。 */
/* white-space: nowrap; */
}
没有滚动+省略号(一般用法)
overflow:hidden
text-overflow:ellipsis;
有滚动+省略号(sb用法)
overflow:auto
text-overflow:ellipsis;
div{
width: 100px;
height: 100px;
background-color: aqua;
/* 没有滚动+省略号(一般用法) */
/* white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
/* 有滚动+省略号(sb用法) */
white-space: nowrap;
overflow:auto;
text-overflow:ellipsis;
}
外边距
练习一
<!-- 消除默认内边距 -->
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner"></div>
</div>
</body>
</html>
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
/* 解决内边框贴着外边框一起向下的问题:对外边框做修改 四种方式 */
/* border-top: 1px solid; */
/* padding-top: 1px; */
/* overflow: hidden; */
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
/* margin: 10px 20px 30px 40px; */
/* 百分比是针对于父元素的百分比 */
margin: 10% 20% 30% 40%;
}
练习二:
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner"></div>
<div class="div-inner2"></div>
</div>
</body>
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
margin-bottom: 20px;
}
.div-inner2 {
width: 100px;
height: 100px;
background-color: darkGreen;
/* 当上下的div都去外边距时,取最大值 */
margin-top: 30px;
}
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
float: left;
margin-right: 20px;
}
.div-inner2 {
width: 100px;
height: 100px;
background-color: darkGreen;
/* 当所有的div都去外边距时,求和 */
float: left;
margin-left: 30px;
}
内边距
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
padding-left: 20px;
padding-top: 20px;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
}
一个div真正的大小=content + padding + border
增加三者任意大小,都会让div这个元素变大
解决方法box-sizing
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
padding-left: 20px;
padding-top: 20px;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
/* 挤占内容区 */
box-sizing: border-box;
/* 累加 */
/* box-sizing: content-box; */
padding: 10px;
border: 10px solid black;
}
position
relative
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
margin: 10px;
padding: 20px 0 0 30px;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
/* 该行放不下放第二行 ->就是static的position的放法*/
display: inline-block;
}
.div-inner-2 {
width: 100px;
height: 100px;
background-color: darkgreen;
color: white;
margin: 10px;
display: inline-block;
/* 相对位置:子标签在父标签的基础之上的移动,不管父标签位置何在,子标签的位置都是相对于父标签的位置进行的移动 */
position: relative;
top: 30px;
left: 100px;
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="acwing,web,html">
<title>Web应用课作业</title>
<link rel="icon" href="/static/images/logo.png">
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>
<!-- 消除默认内边距 -->
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner-1">1</div>
<div class="div-inner-2">2</div>
<div class="div-inner-3">3</div>
</div>
</body>
</html>
z-index:数值;数值越大,可以将压着的元素放在上边,但是只对position为非static的管用
将1div放在上边
.div-outer {
width: 300px;
height: 300px;
background-color: lightblue;
margin: 10px;
padding: 20px 0 0 30px;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
/* 该行放不下放第二行 ->就是static的position的放法*/
display: inline-block;
position: relative;
z-index: 3;
}
.div-inner-2 {
width: 100px;
height: 100px;
background-color: darkgreen;
color: white;
margin: 10px;
display: inline-block;
/* 相对位置:子标签在父标签的基础之上的移动,不管父标签位置何在,子标签的位置都是相对于父标签的位置进行的移动 */
position: relative;
top: 30px;
left: -100px;
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
display: inline-block;
}
absoulte
.div-outer {
width: 300px;
height: 3000px;
background-color: lightblue;
margin: 100px;
padding: 20px 0 0 30px;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
/* 该行放不下放第二行 ->就是static的position的放法*/
display: inline-block;
}
.div-inner-2 {
width: 100px;
height: 100px;
background-color: darkgreen;
color: white;
margin: 10px;
display: inline-block;
/* 绝对位置:1.从该标签网上找,找到第一个非static定位的标签,如果没有以body为点,2. 会把自己原有的位置抛出去,留给自己以后的兄弟标签用 3.在文档的位置已经固定 */
position: absolute;
top: 100px;
left: 20px;
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
display: inline-block;
}
fixed
.div-outer {
width: 300px;
height: 3000px;
background-color: lightblue;
margin: 100px;
padding: 20px 0 0 30px;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
/* 该行放不下放第二行 ->就是static的position的放法*/
display: inline-block;
}
.div-inner-2 {
width: 30px;
height: 100px;
background-color: darkgreen;
color: white;
margin: 10px;
display: inline-block;
/* 固定位置:1.从该标签网上找,找到第一个非static定位的标签,如果没有以body为点,2. 会把自己原有的位置抛出去,留给自己以后的兄弟标签用 3相当于这个视窗页面位置不变
*/
position: fixed;
top: 200px;
right: 0px;
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
display: inline-block;
}
sticky
.div-outer {
width: 300px;
height: 3000px;
background-color: lightblue;
margin: 100px;
padding: 20px 0 0 30px;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
/* 该行放不下放第二行 ->就是static的position的放法*/
display: block;
position: sticky;
top: 0;
}
.div-inner-2 {
width: 100px;
height: 1000px;
background-color: darkgreen;
color: white;
margin: 10px;
display: block;
/* 粘性位置:自行体会
*/
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
margin: 10px;
display: block;
position: sticky;
bottom: 10px;
}
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner-2">2</div>
<div class="div-inner-1">1</div>
<div class="div-inner-2">2</div>
<div class="div-inner-3">3</div>
<div class="div-inner-2">2</div>
<div class="div-inner-1">1</div>
<div class="div-inner-2">2</div>
<div class="div-inner-3">3</div>
</div>
</body>
浮动
.div-outer {
width: 100%;
height: 3000px;
background-color: lightblue;
}
/* 方式四 */
.div-outer::before {
content: "";
display: table;
}
.div-inner-1 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
/* 一行能放下,放一行,放不下就另起一行 ->浮动,但是这样的会有间隙 */
display: inline-block;
/* 用正规的float,会使不同的div放到同一行且没有间隙,这是浮动的作用 */
float: left;
}
.div-inner-2 {
width: 100px;
height: 100px;
background-color: darkgreen;
color: white;
display: inline-block;
float: left;
}
.div-inner-3 {
width: 100px;
height: 100px;
background-color: rgb(166, 48, 48);
color: white;
display: inline-block;
float: left;
}
.div-inner-4 {
width: 300px;
height: 200px;
background-color: lightgreen;
color: white;
display: inline-block;
/* 让这个标签在浮动元素区的下方,且不受浮动元素影响 */
clear:both;
}
<body style="margin: 0;">
<div class="div-outer">
<div class="div-inner-2">2</div>
<div class="div-inner-1">1</div>
<div class="div-inner-2">2</div>
<div class="div-inner-3">3</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-2">2</div>
<div class="div-inner-4">4</div>
</div>
</body>
实战样例1
.user-card {
width: 200px;
height: 67.69px;
background-color: #D9EAF7;
margin: 100px auto;
padding: 5px 6px 7px 7px;
box-sizing: border-box;
}
.user-card-head {
font-size: 12px;
color: #6a737c;
margin: 1px 0 4px 0;
}
.user-card-body-photo > img {
width: 32px;
height: 32px;
border-radius: 3px;
}
.user-card-body-photo {
float: left;
}
.user-card-body-info {
float: left;
margin: 0 0 0 8px;
}
.user-card-body-info-username {
height: 16px;
/* 实现字体居中 */
line-height: 16px;
}
.user-card-body-info-username > a{
font-size: 13px;
color: #0074cc;
text-decoration: none;
}
.user-card-body-info-reputation {
font-size: 12px;
line-height: 16px;
}
.user-card-body-info-reputation-item {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
margin: 0 3px 0 2px;
position: relative;
top: -2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="acwing,web,html">
<title>Web应用课作业</title>
<link rel="icon" href="/static/images/logo.png">
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>
<body>
<div class="user-card">
<div class="user-card-head">
asked Feb 9, 2019 at 18:18
</div>
<div class="user-card-body">
<div class="user-card-body-photo">
<img src="/static/images/mountain.jpg" alt="">
</div>
<div class="user-card-body-info">
<div class="user-card-body-info-username">
<a href="#">yxc</a>
</div>
<div class="user-card-body-info-reputation">
<span style="color:#6a737c; font-size:bold;">1,024</span>
<div class="user-card-body-info-reputation-item" style="background-color: gold;"></div>
3
<div class="user-card-body-info-reputation-item" style="background-color: #b4b8bc;"></div>
14
<div class="user-card-body-info-reputation-item" style="background-color: #d1a684;"></div>
25
</div>
</div>
</div>
</div>
</body>
</html>
实战样例2
flex练习
flex布局:flex-direction
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
/* 从左往右摆 */
/* flex-direction: row-reverse; */
/* 案列从上往下摆 */
/* flex-direction: column; */
/* 按列从下往上摆 */
flex-direction: column-reverse;
}
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<!-- flex布局时用来更好的布局页面的各个模块的 -->
<link rel="stylesheet" href="/static/css/flex.css">
</head>
<body>
<div class="div-flex">
<div class="div-flex-item">1</div>
<div class="div-flex-item">2</div>
<div class="div-flex-item">3</div>
<div class="div-flex-item">4</div>
<div class="div-flex-item">5</div>
<div class="div-flex-item">6</div>
<div class="div-flex-item">7</div>
<div class="div-flex-item">8</div>
<div class="div-flex-item">9</div>
<div class="div-flex-item">10</div>
</div>
</body>
</html>
flex-wrap
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
/* 自动往下换行 */
/* flex-wrap: wrap; */
/* 自动从下往上换行 */
flex-wrap: wrap-reverse;
}
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
}
justify-content
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
flex-wrap: wrap-reverse;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: space-between; */
/* justify-content:space-around ; */
justify-content: space-evenly;
}
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
}
align-items和align-content
align-items 与 align-content的区别
1. align-items 会将所有的盒子按照均匀排布 align-content会挤在一起
2. 当在flex-wrap:nowrap模式的时候,align-items 仍然会居中,而algn-content 居中效果会消失
将div里边的div标签居中的方法
居中方法:
text-align:center+lineheigh=width
margin:0 auto+position:relative; top:50%;transition:translateY(-50%)
display:flex;+justify-content: center;+align-items: center;
justify-content:center可以实现水平居中
align-items:center 可以实现竖直居中
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-evenly;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* 竖直居中 */
align-items: center;
/* align-items: stretch; */
}
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
}
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-evenly;
/* align-content: flex-start; */
/* align-content: flex-end; */
align-content: center;
/* align-content: stretch; */
}
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
}
order
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
/* 默认让其换行 */
flex-wrap: wrap;
justify-content: space-evenly;
}
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
/* order值越大,对flex布局的odd块排在even的前面 */
order: 1;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
order: 2;
}
flex-grow、flex-shrink、flex-basis
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
/* 默认让其换行 */
/* flex-wrap: wrap; */
justify-content: center;
}
.div-flex-item {
width: 100px;
height: 100px;
/* 指定div块的初始大小 */
flex-basis: 30px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
/* 当odd放大的时候的倍数是原来初始大小的几倍 */
flex-grow: 3;
/* 当odd缩小的时候的倍数是原来初始大小的几倍 */
flex-shrink : 2;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
/* 当even放大的时候的倍数是原来初始大小的几倍 */
flex-grow: 2;
/* 当even缩小的时候的倍数是原来初始大小的几倍 */
flex-shrink : 3;
}
flex 等价于flex-grow、flex-shrink、flex-basis混合项
.div-flex {
background-color: lightgrey;
width: 50%;
height: 500px;
display: flex;
/* 默认让其换行 */
/* flex-wrap: wrap; */
justify-content: center;
}
.div-flex-item {
width: 100px;
height: 100px;
}
.div-flex-item:nth-child(odd) {
background-color: lightpink;
flex: 3 2 auto;
}
.div-flex-item:nth-child(even) {
background-color: lightgreen;
flex: 2 3 auto;
}
响应式布局
应用一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/responsive.css">
<title>响应式布局</title>
</head>
<body>
<div class="container">
<div class="card"></div>
</div>
</body>
</html>
.container {
background-color: lightgrey;
width: 80%;
margin: 0 auto;
padding: 10px;
}
.card {
width: 80%;
height: 100vh;
background-color: blueviolet;
margin: 0 auto;
}
/* 响应式布局,相应不同宽度所做的事情 */
@media (min-width: 768px) {
.card {
background-color: aqua;
}
}
@media (min-width: 992px) {
.card {
background-color: blue;
}
}
@media (min-width: 1200px) {
.card {
background-color: red;
}
}
@media (min-width: 1920px) {
.card {
background-color: yellow;
}
}
应用二
.container {
background-color: lightgrey;
width: 80%;
margin: 0 auto;
padding: 10px;
height: 100vh;
}
.col {
width: 33.33%;
float: left;
height: 50px;
background-color: orange;
border: 1px solid greenyellow;
box-sizing: border-box;
font-size: 30px;
color: white;
text-align: center;
line-height: 50px;
}
@media (min-width:768px) {
/* 设置一下不同长度所占的比列 */
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width:33.33333333%
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-12 {
width: 100%;
}
}
@media (max-width:767px) {
/* 设置一下不同长度所占的比列 */
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width:33.33333333%
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-12 {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/responsive.css">
<title>响应式布局</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-md-2 col-sm-6">1</div>
<div class="col col-md-4 col-sm-4">2</div>
<div class="col col-md-6 col-sm-2">3</div>
<div class="col col-md-4 col-sm-2">4</div>
<div class="col col-md-4 col-sm-4">5</div>
<div class="col col-md-4 col-sm-6">6</div>
</div>
</div>
</body>
</html>
应用三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/responsive.css">
<title>响应式布局</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-md-6 col-sm-12">用户名</div>
<div class="col col-md-6 col-sm-12">密码</div>
<div class="col col-md-12 col-sm-12">个人简介</div>
</div>
</div>
</body>
</html>
.container {
background-color: lightgrey;
width: 80%;
margin: 0 auto;
padding: 10px;
height: 100vh;
}
.col {
width: 33.33%;
float: left;
height: 50px;
background-color: orange;
border: 1px solid greenyellow;
box-sizing: border-box;
font-size: 30px;
color: white;
text-align: center;
line-height: 50px;
}
@media (min-width:768px) {
/* 设置一下不同长度所占的比列 */
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width:33.33333333%
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-12 {
width: 100%;
}
}
@media (max-width:767px) {
/* 设置一下不同长度所占的比列 */
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width:33.33333333%
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-6 {
width: calc((100% / 12) * 6);
}
.col-sm-7 {
width: calc((100% / 12) * 7);
}
.col-sm-8 {
width: calc((100% / 12) * 8);
}
.col-sm-9 {
width: calc((100% / 12) * 9);
}
.col-sm-10 {
width: calc((100% / 12) * 10);
}
.col-sm-11 {
width: calc((100% / 12) * 11);
}
.col-sm-12 {
width: calc((100% / 12) * 12);
}
}
boostrap使用
上述案列用boostrap实现
.container {
background-color: lightgrey;
width: 80%;
margin: 0 auto;
padding: 10px;
height: 100vh;
}
.col {
width: 33.33%;
float: left;
height: 50px;
background-color: orange;
border: 1px solid greenyellow;
box-sizing: border-box;
font-size: 30px;
color: white;
text-align: center;
line-height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/responsive.css">
<link rel="stylesheet" href="/static/third_party/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
<script src="/static/third_party/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<title>响应式布局</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-md-6 col-sm-12">用户名</div>
<div class="col col-md-6 col-sm-12">密码</div>
<div class="col col-md-12 col-sm-12">个人简介</div>
</div>
</div>
</body>
</html>
boostrap入门样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/third_party/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
<script src="/static/third_party/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<title>响应式布局</title>
</head>
<body>
<div class="container">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
样例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/third_party/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
<script src="/static/third_party/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<title>响应式布局</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="input-group flex-nowrap">
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="addon-wrapping">
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="input-group flex-nowrap">
<input type="password" class="form-control" placeholder="Password" aria-label="Username"
aria-describedby="addon-wrapping">
</div>
</div>
<div class="col-xs-12">
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">个人简介</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="个人简介"></textarea>
</div>
</div>
<div class="col-md-6 col-xs-12">
<button type="button" class="btn btn-success" style="width:100%; margin-top: 10px;">提交</button>
</div>
<div class="col-md-6 col-xs-12">
<button type="button" class="btn btn-danger" style="width:100%; margin-top: 10px;">取消</button>
</div>
</div>
</div>
</body>
</html>