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)打开(⽂件-打开----直接拖拽)css设置文字垂直居中
(2)信息⾯板f8—窗⼝-信息
(3)放⼤缩⼩画布
ctrl+
ctrl-
(4)量取宽度
(5)移动选区
空格+⿏标左键拖动
(6) 移动画布
空格
(7)取⾊
前景⾊⼩⽅块—左键点击(拾⾊器)快捷键
ctrl+s保存；
ctrl+shift+s另存；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。