html常用标签+css布局+flex布局(Springboot+vue项目)

最新推荐文章于 2025-03-29 20:26:01 发布

码农大师

最新推荐文章于 2025-03-29 20:26:01 发布

阅读量343

点赞数

文章标签： html css vue.js

本文链接：https://blog.youkuaiyun.com/zc917619462/article/details/134902128

版权

1.网页布局

html

div 属于块状元素独占一行
span属于行内元素是在行内添加元素**

<body>

    <div>块状元素</div>
    <div>块状元素</div>

    <span>行内元素</span>
    <span>行内元素</span>

</body>

在这里插入图片描述
3.h1-h6 块壮标签字体是从大变小

<body>  
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>

在这里插入图片描述
4.icon 图标例:搜索框里面的放大镜图标 i标签

块内元素

div 盒子标签
h1-h6 标题标签

行内元素

span
Strong 加粗
a 标签超链接
img 标签图片
video 标签视频
input 标签例如:账号密码出现的输入框就是这个标签的作用
textarea 标签可以输入多行的数据内容
button 标签按钮发送就是账号和密码输入完之后点击登录的意思用的是这个标签

    <a href="需要跳转的链接">小春</a>
    <img src="放的是图片的路径" alt="图片在无法正确显示的时候起到文本替代的作用">
    img分为当前路径和绝对路径
    当前路径是:是从代码所在的这个文件出发,去寻找目标文件的
    绝对路径是:是指目录下的绝对位置,直接到达目标位置，通常是从盘符开始的路径。

 <video src="放的是视频文件" "想要视频播放需要加 controls 这个控制键"></video>
 
 <div>表单</div>
    账号<input type="text">
    密码<input type="password">
    <textarea>表示可以录用多行数据,可以拉伸输入框</textarea>
    <button>按钮发送</button>

在这里插入图片描述

2.css布局

把网页的任何一个能看到的布局想象成都是盒子的堆积
在这里插入图片描述
1.盒子模型

 <!-- 
   边框      border: 1px:边框大小 (solid实线/dashed虚线):边框样式 black:边框颜色
   外边距    margin: 10px(外边距大小)  把内容缩小
   内边距    padding:30px(内边距大小)  把内容撑大
   背景颜色  background-color : aqua(颜色)
   阴影      box-shadow: 0 0 10px -2px rgba(0, 0,0, 5)
   边角圆润  border-radius: 10px(边角圆润大小)
   告诉浏览器：你想要设置的边框和内边距的值是包含在宽内的  box-sizing: border-box
   超出的隐藏 overflow: hidden
   数据过多的话 可以在盒子的样式中不设置宽和高
   换行     word-wrap: break-word
   行高段落   line-height:70%
    -->

    <div style="width: 100px; height: 100px; border: 1px dashed black;">

    </div>

    <div style="width: 100px; height: 100px; background-color: aqua; 
    margin: 10px;padding: 30px;
    box-shadow: 0 0 10px -2px rgba(0, 0,0, 5);
    border-radius: 10px;">

    </div>

在这里插入图片描述

新创建一个css文件
引入html文件中

<head>
<link rel="stylesheet" href="创建css的文件">
</head>

用绝对定位,一个元素可以放在页面上的任何位置

    position:absolute;
	left:100px;
	top:150px;

在这里插入图片描述

3.flex布局

style=“(引入flex布局)display: flex; (设置元素竖向摆放)flex-direction: column;”

1.flex-direction属性决定主轴的方向（即项目的排列方向）: flex-direction: row(横向)/column(纵向)
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性定义，如果一条轴线排不下，如何换行: flex-wrap: wrap
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3.justify-content属性定义了项目在主轴上的对齐方式。: justify-content: center
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4.align-items属性定义项目在交叉轴上如何对齐。align-items:center
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex化为3等分

把一个宽设置  style="flex: 1;" 几个 就是设计几个块区域 这里有三个 也就是划分三块元素
width: 70%;margin: 0 auto; 设置宽度 并进行居中
outline: none;   取消input便签 点击出现的黑框
<input type="text" placeholder="请输入电影名" 
placeholder:是在input框内填写内容提示的

<h2>flex布局</h2>
    <div style="display: flex;width: 70%;margin: 0 auto;">
        <div style="flex: 1;">花瓣网</div>
        <div style="flex: 1;"><input type="text"></div>
        <div style="flex: 1;">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </div>



 <h2>flex布局</h2>
    <div style="display: flex;width: 70%;margin: 30px auto; ">
        <div style="flex: 1; display: flex;align-items: flex-end;">

            <div style="width: 100px; font-size: 30px; color: aquamarine;">花瓣网</div>
            <div style=" flex: 1;padding-left: 20px;"><input type="text" placeholder="请输入电影名"
                    style="border: 1px solid #ccc; padding: 10px;outline: none; border-radius:5px;width: 230px;"></div>
        </div>


        <div style="flex: 1; display: flex; font-size: 30px;justify-content: flex-end;">
            <div style="padding: 0 10px; color: blue;">1</div>
            <div style="padding: 0 10px; color: blueviolet;">2</div>
            <div style="padding: 0 10px; color: brown;">3</div>
            <div style="padding: 0 10px; color: brown;">3</div>
            <div style="padding: 0 10px; color: brown;">3</div>
            <div style="padding: 0 10px; color: brown;">3</div>
        </div>