html图片边框问题,html的基本介绍、css的简单介绍、图片间隙问题的解决、边框的简单介绍...

一、HTML

1、简单介绍

(1)HTML描述页面一种语言；

通过标记描述；

(2)标记：尖括号包围的关键字；

(3)语法：

​ 成对出现；

​ HTML元素：内容闭合标签>

1、div–搭结构

(1)div可以看作是一个容器

语法:

内容

(2)应用：

装东西----定义类

开始标签

空格隔开 class=“类名(自己起-字母和数字的组合)”

内容

2、img图片

二、css装修

1、找元素—通过class名

以点进行标识

​ .类名------》.box

2、定义样式(描述特征)

(1)语法：找到的元素{样式声明}

(2)一条声明：属性名：属性值；

多组声明：分号隔开

width:290px;

height:207px;

border:1px solid #e5e5e5;

}

(3)位置：

head内部；

(4)格式：

/* 找到元素 */

.box{

/* 宽度 */

width:290px;

/* 高度 */

height:207px;

/* 边框 */

border:1px solid #e5e5e5;

}

3、注释

作用：解释说明代码

【不会】被浏览器计息期显示到预览效果

快捷方式：

ctrl+/

4、文字的设置

font-size 文字大小的设置；

font-weight 文字粗细的设置；

color 文字颜色的设置；

text-align 文字水平居中；

line-height 单行文字的垂直居中可以设置行高和高一致可以实现；

font-size: 18px;

text-align: center;

font-weight: bold;

line-height: 70px;

background-color: cornflowerblue;

}

5、图片间隙问题的解决

vertical-align:bottom(取消图片与下方文字中间的间隙)

6、边框的设置—border

(1)边框的尺寸、边框的线条、边框的颜色-------border:width color solid;

(2)分别设置边框的四边：

border-top:width solid color;

border-right:width solid color;

border-bottom:width solid color;

border-left:width solid color;

7、案例操作步骤

准备：

1.搭结构，找body,写div

2.找head,写style;

3.起类名，规定具体的样式

HTML中

css中 .名字

Document

width:290px;

height:209px;

/*空格隔开， 边框宽度 边框样式 颜色*/

border:1px solid red;

}

这是一个div

三、拓展内容

1.鼠标滑过

要滑过的元素：hover{样式}

2、缩放

transform:scale(1.2)

小括号里表示要放大的倍数

3.溢出隐藏

内容发生超出的盒子{overflow:hidden;}

4.过渡

要产生过渡效果的元素{transtion:0.5s;}

0.5表示从一种状态到另一种状态过程持续的时间

四、ps(尝试)

(1)打开(文件-打开----直接拖拽)

(2)信息面板f8—窗口-信息

(3)放大缩小画布

ctrl+

ctrl-

(4)量取宽度

(5)移动选区

空格+鼠标左键拖动

(6) 移动画布

空格

(7)取色

前景色小方块—左键点击(拾色器)

快捷键

ctrl+s保存；

ctrl+shift+s另存；

本文地址：https://blog.csdn.net/yangyanqin2545/article/details/109273724