HTML+CSS 基础学习

最新推荐文章于 2024-03-09 16:57:10 发布

不知名社会人

最新推荐文章于 2024-03-09 16:57:10 发布

阅读量457

点赞数 1

文章标签： html css js

本文链接：https://blog.csdn.net/weixin_54236608/article/details/115539928

版权

HTML

一、HTML
二、CSS

一、HTML

W3C是万维网联盟，是一家制定标准的国际中立性标准机构
web的标准包括：

结构化标准语言（HTML,XML）
表现标准语言(CSS)
行为标准语言(DOM,ECMAScript现在已经到6了)

什么是网页？

通过浏览器阅读的HTML格式的文件，由文字，图片，链接，音频等元素组成，网页的集合是网站

什么是HTML？

HTML是超文本标记语言，不是编程语言，而是标记语言，由标签组成；
HTML是一门专门创建网页的语言

lang 与字符集 <!DOCTYPE>

1.文档类型声明标签<!DOCTYPE html>，告诉浏览器那种HTML版本显示网页，现在浏览器默认支持H5
2.<html lang="en">显示当前文档的语言，en表示英语，zh-CN表示中文
3.<meta charset="UTF-8">字符集，以便于计算机可以识别存储各种文字，防止乱码

target="_blank"表示链接打开的一个新的页面

<a href="xxx" target="_blank"/>

锚点链接：文章自动跳转

<a href="#test"></a>
<h2 id="test"></h2>

b是加粗标签，H5删除了big,center,font,strike,tt标签的使用，使用a标签链接网址时一定要写全，radio+checkbox

1.设置的name相同时就为一组，value是传递给后台的值
 <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
    <br>
    <input type="checkbox" name="food" value="周一">周一
    <input type="checkbox" name="food" value="周二">周二
    <input type="checkbox" name="food" value="周三">周三
    <br>
    <input type="range" /><br>
    <input type="file" />

1.1、单元格

表格的作用：显示数据

<table>
    <!-- thead头部 -->
    <thead>
        <!-- tr行 -->
        <tr>
            <!-- th单元格表头 -->
            <th></th>
            <th></th>
        </tr>
    </thead>
    <!-- tbody主体 -->
    <tbody>
      <!-- tr行 -->
        <tr>
            <!-- td单元格 -->
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

表格属性：

align：对齐方式
border：单元格是否有边框
cellpadding：单元格与文字之间的空白，默认1px
cellspacing：单元格间的空白，默认2px

合并单元格的方式

1.跨行合并：rowspan=“合并单元格的个数”, 最上侧的单元格为目标单元格
2.跨列合并：colspan=“合并单元格的个数”，最左侧的单元格为目标单元格
3.找到目标单元格:<td colspan="2"></td>

1.2、列表

列表是用来做布局的
无序列表:ul>li list-style:none;去掉无序列表前的小圆点；ul在火狐中有padding,ul在IE中默认有margin
有序列表:ol>li

1.3、表单

表单元素input：type属性，name属性，value属性，checked属性(input首次被加载时，被选中的值)，maxlength属性（输入字符的最大长度）

1 . type属性值：text 文本, password 密码, checkbox 复选框,radio 单选框,submit 提交,reset 重置, image 图像， hidden 隐藏，file 文件，button 按钮
2.name属性值：checkbox 与radio 的name要一致,才能实现多选一 <input type="radio" name="sex"/> 男 <input type="radio" name="sex"/> 女
3.value属性值：form表单提交的是value值，<input type="radio" name="sex" value="nv" />男
4 .checked属性值：<input type="radio" name="sex" value="nv" checked/>男

表单元素label：点击label标签的文本时，浏览器自动将光标转到对应的表单元素上，增加用户体验
label标签的for属性与input的Id属性相对应<label for="sex"/><input type="radio" id="sex" value="nv"/>女
select下拉菜单元素：selected表示默认选中状态

<select>
	<option selected>A</option>//selected表示默认选中状态
	<option>B</option>
</select>

综上可知，selected和checked都表示选中状态

二、CSS

css层叠样式表，也是标记语言。
css组成：选择器 {样式键值对}
选择器：选择标签用的，可以分为基础选择器和复合选择器

1…基础选择器：类选择器，id选择器，标签选择器，通配符选择器(所有元素，包括html和body)
2.类选择器可以有多个类名，类名可以重复（和封装很像，实现代码的复用性） <div class="red font35">小明</div> .red{color:red}; .font35{font:5px}
3.id选择器：唯一，不可重复，保证js调用
4.优先级：行内样式>id>class>标签>通配符选择器

复合选择器：
1.后代选择器：所有后代 div h1 p{}父集，子集，孙子集，最终改变的是孙子集
2.子选择器：只有下一代新儿子 div>h1{}
3.并集选择器：逗号表示和的意思 div,h1{}
3.兄弟选择器：只选择一个，对下不对上 div+h1{}
4.兄弟通用选择器：对下不对上，选择下面所有 div~h1{}
5.伪类选择器书写顺序lvha a:link 所有没被访问的链接 a:visited:所有已经被访问的链接 a:hover:鼠标位于其上的链接 a:active:鼠标点击的一瞬间
6.fouces伪类选择器，将获得光标的input表单选取出来：input:fouces{bacground-clor:red},失去光标就没有了

2.1、CSS的3种引入方式

行内样式：在标签中写style样式<h1 style="color:red"></h1>
内部样式：写在head的style里面
外部样式： <link rel="stylesheet" href="./xx">
优先级：就近原则；行内样式>内部样式>外部样式

2.2、字体与文本系列

字体复合属性body{font:font-style(倾斜还是正常normal),font-weight,font-size/line-height(行与行间的距离),font-family}，不设置的属性可以省略，但必须保留最后两个，font-size,font-family
font-size:14px; + font-weight:400px(不加粗)

1.body{font:12px/1.5,“宋体”}表示设置当前的行高为12px*1.5

文本对齐：水平对齐方式,默认值是左对齐 text-align:center,left,right
装饰文本：给文本添加下划线，删除线，上划线 ,默认是none text-decoration：none,underline,overline,line-through
文本缩进：文本第一行缩进 text-indent:10px
行高：行与行间距 line-height:10px

2.3、Emmet语法生成HTML

1.vscode已经默认集成了Emmet语法了
2.div*3可以快速生成3个div
3.ul>li可以生成有父子关系的标签
4.div+p可以生成兄弟标签
5. .banner+enter等价于 <div class="banner"></div>
6. #banner+enter等价于 <div id="banner"></div>
7.p.banner等价于 <p class="banner"></div>

2.4、CSS元素显示模式

2.4.0 块元素/行内元素水平垂直居中

行内元素水平居中：给父级元素text-align:center
行内元素垂直居中：给父级元素height和line-height为相同的值
块元素水平垂直居中（不知道子元素的大小时）

 .dad {
            position: relative;
        }
        
        .son {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

块元素水平垂直居中（知道子元素的大小时）

 .dad {
            position: relative;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

块元素水平垂直居中（知道子元素的大小或者不知道时）flex布局

 .dad {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

块元素水平垂直居中（知道子元素的大小或者不知道时）css3新增属性transform

 .dad {
            width: 500px;
            height: 500px;
            background-color: pink;
            position: relative;
        }
        
        .son {
            /*width: 200px;
            height: 200px;
            */
            background-color: skyblue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

2.4.1 HTML元素一般分为块元素和行内元素

块元素：<div> <li> <ul> <ol> <h1> <p> 等
块元素的特点：独占一行；宽度默认是父容器的100%；块元素可以放块元素和行内元素
注意：p标签和h1标签等文字类标签里不能放块级元素

行内元素(内联元素)：<span> <a> <em> <strong>等
行内元素的特点：一行可以显示多个；宽高直接设置是无效的；默认宽度是它内容的宽度；行内元素里不能放块元素
链接a里不能放a链接

行内块元素：<img/> <input/> <td> 同时有行内元素和块元素的特点
行内块元素的特点：一行可以显示多个（中间有空隙）；本身的宽度是内容的元素；但是可以指定宽高

2.4.2 元素显示模式转换

行内转块元素：display:block; (给a标签设置宽高,)
块元素转行内：display:inline; (无法再次设置宽高)
转为行内块元素：display:inline-block;

2.4.3 单行文字在盒子中垂直居中

解决方案： 使文字的行高等于盒子的高度 line-height
原理行高=上空隙+文字高度+下空隙==盒子高度
文字的水平居中：text-align:center
在这里插入图片描述

2.5、CSS背景图

背景颜色透明色：background-color: transparent
背景图片展示： background-image:url()
背景平铺： background-repeat:
背景图片位置： background-position: x y

1.xy用方位名词center,top,bottom,right,left表示，当只写一个方位名词时，另一个默认居中；
2. xy也可以使用精确值；
3.xy也可以一个使用方位名词，另一个使用精确值

图片的大小会撑开盒子<img irc="" alt=""/> 但是加上img{width:100%}就会非常完美，盒子大小固定 background-image:url()

 <style>
        .box img {
            width: 100%;
        }
    </style>
<div class="box">
    <img src="./img/logo.jpg" alt="图片">
</div>

超大图片一般习惯用： background-position: center top
背景图片滚动(视差滚动)： background-attachment: scroll(默认是滚动的，背景图片固定：fixed)
背景复合写法（和font一样）: background：没有顺序可言

2.6、CSS三大特性

层叠性

相同的选择器，设置相同的样式，会出现覆盖，遵循就近原则

继承性

1.子标签会继承父标签中的一些样式（text-，font-，line-，color跟文字有关的），子承父业

优先级

1 !important>行内样式>id选择器>类选择器>标签>通配符选择器
2.当 div{color:red!important;}时，是最高级别的
3.继承的权重是0；<div id="father"><p>嘿嘿</p></div> #father{color:red;} p{color:green;} 结果为绿色；虽然父亲的权重很高，但是由于继承的权重是0，所以依然会执行 color:green;

在这里插入图片描述

2.6.1、权重叠加

复合选择器会有权重叠加的问题
权重大的先执行
权重可以叠加，但是不会有进位
如下图所示：

  <style>
        /* 标签选择器 */
        /* 权重是0,0,0,1 */
        li {
            color: red;
        }
        /* 复合选择器中的后代选择器 */
        /* 权重是0,0,0,1+0,0,0,1 */
        ul li {
            color: green;
        }
        /* 权重是0,0,1,0+0,0,0,1+0,0,0,1 */
        .nav ul li {
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>第一天</li>
            <li>第二天</li>
        </ul>
    </div>
</body>

2.7、盒子模型

网页布局的三大核心：盒子模型，浮动，定位
盒子模型的组成：内容，边框，内边距（内容与盒子的距离），外边距（盒子与盒子的距离）
相邻单元格边框：border-collapse:collapse;表示相邻边框合并在一起，只针对table表格有用；使1+1=1。
padding会撑开盒子；margin则不会；记得width减去padding；border边框也会撑大盒子
当属性没有设置width和height时，则padding不会撑大盒子

1.padding:5px 10px;表示上下是5px，左右是10px
2.padding:5px 10px 20px;表示上是5px,左右是10px,下是20px
3.padding:5px 10px 20px 25px;表示上右下左（顺时针）

2.7.1、外边距经典应用

外边距可以使块级盒子水平居中：

1.给盒子设置了宽度
2.盒子左右的外边距margin设置为auto margin:0 auto;
3.以上的是块级元素水平居中，行内元素或行内块元素水平居中时给父元素增加 text-align:center;

2.7.2、外边距合并

外边距合并：上下两个块元素，上面的元素有下外边距，下面的元素有上外边距，则他们的间距不是取和，而是取两个值中的较大者； 解决方案：将两个盒子放到不同的BFC中：给两个盒子添加container,给父元素设置overflow:hidden触发BFC

2.7.3、嵌套块元素垂直外边距塌陷

盒子嵌套，给子元素设置margin-top时，父元素下来了，叫父元素的塌陷问题

 <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: coral;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: cyan;
            /* 以为子元素会到中间，结果是两个盒子一起下移 */
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>

解决方案(父元素塌陷问题)：
1.给父元素设置上边框
2.给父元素设置上内边距
3.给父元素设置 overflow:hidden;（经常使用）

2.7.4、清除内外边距

*{
	padding:0;
	margin:0;
}

浏览器都默认会有内外边距
行内元素为了照顾兼容性，一般只设置左右外边距，而转换为块元素和行内块元素就好了
如下图所示：（行内元素只有左右外边距）

 span {
      margin: 20px;
}
 <span>the first day</span>

在这里插入图片描述

2.8、网页布局

css提供了三种传统的布局方式：普通流，定位，浮动；一个页面基本包含了这三种布局

1.普通流：标签按照默认的方式排列

2.8.1、浮动

如何使多个块级元素水平排成一行？如何使两个盒子实现左右对齐？

1.使用 display:inline-block; 但是块级盒子间会有缝隙
2.浮动可以使多个块级元素水平排序 float:right/left; (不是块级元素的，不能实现浮动)

示例：

 .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        
        .left {
            width: 200px;
            height: 400px;
            background-color: pink;
            float: left;
        }

  <div class="right">1</div>
    <div class="left">2</div>

显示结果：
浮动元素的特性：

1.浮动元素会脱标
2.浮动的素会一行显示
3.浮动的元素会顶部对齐
4.浮动的元素具有行内块元素的特性（若行内元素有了浮动，不需要转换行内块元素就可以直接设置宽高；若块元素有了浮动，且没有设置宽度，它默认的宽度不在和父级一样宽，大小由内容决定）
5.浮动的盒子不再保留原来的位置
6.浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流

脱标展示

  .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            border: 1px solid black;
        }
        
        .left {
            width: 400px;
            height: 400px;
            background-color: green;
            /* float: left; */
            border: 1px solid black;
        }

 <div class="right">right</div>
    <div class="left">left</div>

在这里插入图片描述

2.8.2、清除浮动

清除浮动的原因：理想情况下，父级盒子不应该设置高度，而应该由子盒子撑开，但是给子盒子设置浮动后，父元素就塌了
清除浮动的四种方法

1.额外标签法：在浮动元素末尾加一个新的标签（必须是会块级元素） <div style="clear:both"></div>
2.父级元素添加 overflow:hidden;(父元素塌陷也用 overflow:hidden; )
3.给父元素添加 :after伪元素法 相当于额外标签法的升级版（在盒子的后面插入新的标签）

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { * zoom: 1; (为了兼容IE6,7) }
4.给父元素添加 双伪元素法 盒子的前后都添加标签
.clearfix:before,.clearfix:after { content: ""; display: table; } .clearfix :after{ clear:both; } .clearfix { * zoom: 1; (为了兼容IE6,7) }

2.9、PS切图

图层切图：选择移动工具->点击要选择的图片->右键转换为智能对象->双击打开->文件存储为PNG保存到桌面上
切片切图：（拉到最底下将背景前的眼睛关掉）选择切图工具->切好图之后->文件存储为web格式->选择PNG->存储为（切片改为选中的切片）

2.10、版心

整个页面的版心，都是居中对齐的，可以定义版心为公共类

.w{
	width:1200px;
	margin:auto;
}

在这里插入图片描述

2.11、定位

浮动可以使多个盒子一行排列，中间没有缝隙（将盒子转为行内块元素，但是中间有缝隙）
定位可以使盒子在某个盒子的任何位置
定位可以使某些盒子固定在屏幕中的某些位置

2.11.1、定位组成

定位=定位模式+边偏移
定位模式：静态定位static,relative,absolute,fixed；边偏移：元素的最终位置 top,bottom,left,right

1.static:静态定位，默认的定位方式，无定位的意思 {position:static}
2. relative:相对定位：相对自己定位，保留原来的位置 {position:relative}
3.absolute：绝对定位：相对父级元素定位 1：若没有祖先元素或祖先元素没有定位，则以浏览器为准 2:若父级元素有定位，会以最近一级有定位的元素为参考（可能是父亲，也可能是爷爷）； 不再占有原来的位置
子绝父相目的：使子盒子在父盒子的那个位置
4.fixed固定定位：在浏览器滚动时元素位置不变 1.以浏览器的可视窗口为参考点移动元素 2.固定定位不占有原来的位置
5.inherit：规定从父元素继承的position属性
固定定位，固定到版心右侧（算法）：1.先固定定位的盒子left:50% ,(会走到版心的一半) 2.让固定定位的盒子margin:left:版心宽度的一般 版心的div一定要在后面
6. sticky:粘贴定位，当鼠标滚动时会出现导航栏吸附到顶部的效果使用：position:sticky;top:0px

   position: fixed;
    top: 15px;
    left: 50%;
    margin-left: 600px;

使用定位布局时，会出现盒子重叠的情况，使用 z-index （z轴）控制盒子的先后顺序

1.选择器{z-index:数值 }，数值可以是正整数，负整数/0,默认是auto,数字越大，盒子越靠上
2.当没有设置 z-index 时，后来者居上
3.只有定位的盒子，才有 z-index 属性

2.11.2、定位拓展

设置了定位的盒子，水平居中？

设置了定位的盒子，不能通过 margin:0 auto; 实现水平居中（都可以实现响应式了）

   <style>
        .nav {
            position: absolute;
            /* 让盒子移动一半 */
            left: 50%;
            /* 自身的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
</body>

行内元素添加绝对/固定定位，可以直接设置宽高
块级元素添加绝对/固定定位，不过不给宽高，默认大小是内容大小
综上所述：不论行内元素还是块级元素，只要设置了定位，大小默认是内容大小，且可以设置宽高
浮动时，不会压住标准流里面的文字（浮动产生的最初目的是做文字环绕的）；而定位时，会压住标准流下的所有的东西

2.12、元素的显示与隐藏

display 显示隐藏
visibility显示隐藏
ovverflow溢出显示隐藏

2.12.1、display

display:none ;隐藏对象，并没有被删除（不在占有原来的位置）
display:block; 转换为块级元素；同时还有显示元素的意思

2.12.2、visibility

visibility:visible;元素可视
visibility :hidden; 元素隐藏
总上所述：

1.隐藏元素，不想要原来的位置：display:none; (用的多)

2.隐藏元素，想要原来的位置： visibility:hidden

2.12.3、overflow

类似于网站广告，点击关闭就不见了，当刷新页面时，就重新加载出来；溢出显示隐藏

overflow:hidden 隐藏超出的部分
overflow:auto 溢出显示滚动条，不溢出正常显示
overflow:scroll 溢出显示滚动条，不溢出也显示滚动条
案例：鼠标经过时，效果变换

 <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
        }
        
        .tudou img {
            width: 100%;
            height: 100%;
        }
        
        .tudou .topimg {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }
        /* 当鼠标经过盒子，让里面的遮罩层显示出来 */
        
        .tudou:hover .topimg {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="../img/logo.jpg" alt="图片">
        <div class="topimg"></div>
    </div>

2.13、精灵/雪碧图

网页中图片过多时，请求网页时，服务器会频繁的接收和发送请求图片，造成服务器压力过大，为了减少请求接收发送的次数，提高页面加载速度，出现了精灵技术
背景图用精灵技术的多，产品图不用精灵技术，因为产品会经常更换
精灵图的使用 background-position:x,y;
ps使用切片工具 PS中的F8+浏览器的F12也可以

2.14、文字图标

icomoon图标库
阿里图标库
将下载好的图标解压后生成的font文件放到项目的根目录下

<style>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?prap0b');
            src: url('fonts/icomoon.eot?prap0b#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?prap0b') format('truetype'), url('fonts/icomoon.woff?prap0b') format('woff'), url('fonts/icomoon.svg?prap0b#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        i {
            /* 一定要加font-family这个样式 */
            font-family: 'icomoon';
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- i里面的在demo.html中复制的 -->
    <i></i>
</body>

2.15、css三角

 <style>
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
        }
        
        .box2 {
        	/*子绝父相*/
            position: absolute;
            top: -19px;
            left: 48%;
            /*宽高一定设置为0*/
            width: 0;
            height: 0;
            /*为了照顾低版本的兼容性*/
            line-height:0;
            font-size:0;
            /*transparent透明*/
            border: 10px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
</body>

在这里插入图片描述

2.16、用户界面

2.16.1、鼠标样式

cursor:pointer

2.16.2、取消表单轮廓和防拖拽文本域

input{
	/*取消表单轮廓*/
	outline:none;
}
textarea{
	/*防止拖拽文本域*/
	resize:none;
}

2.17、图片与文字垂直对齐

vertical-align: middle 实现文字与图片垂直对齐；只针对行内元素和行内块元素

2.18、图片底侧空白缝隙

在这里插入图片描述

原因是：图片与文字默认是基线对齐的；所以给图片样式设置 vertical-align:bottom

2.19、文字溢出省略号显示

2.19.1、单行文字溢出省略号显示

1.先强制一行显示文本 white-space:nowrap

2.超出的部分隐藏 overflow:hidden

3.超出部分用省略号代替 text-overflow:ellipsis

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box1">
        打南边来了个喇嘛，手里提拉着五斤鳎目，此处省略一万字
    </div>
</body>

2.19.2、多行文字溢出省略号显示

多行溢出有浏览器兼容性问题

 			overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在盒子中显示文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置伸缩盒子的子元素的排列方式 */
            -webkit-box-orient: vertical;

2.20、盒子margin

在这里插入图片描述
变成

 <style>
        li {
            width: 100px;
            height: 100px;
            border: 4px solid red;
            text-decoration: none;
            float: left;
            /* 变化就是加了如下的一段代码 */
            margin-left: -4px;
        }
    </style>

对于table来说，可以设置border-collapse:collapse，可以使得边框合并，如果相邻，则就公用一个边框

2.21、鼠标移动上去盒子变色

在这里插入图片描述

 <style>
        li {
            position: relative;
            width: 100px;
            height: 100px;
            border: 4px solid red;
            text-decoration: none;
            float: left;
            /* 变化就是加了如下的一段代码 */
            margin-left: -4px;
        }
        
        li:hover {
        	/*使用z-index提高层级*/
            z-index: 1;
            border: 4px solid green;
        }
    </style>

2.22、

在这里插入图片描述

给左边的img图片添加浮动，不需要给文字添加浮动，而且文字也不会在图片的下面；浮动出现的目的就是做文字环绕效果

 <style>
        .box1 {
            width: 500px;
            height: 200px;
            background-color: pink;
        }
        
        .box1 img {
            float: left;
            width: 300px;
            height: 100%;
        }
        
        .box2 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="box1">
        <img src="../img/logo.jpg" alt="图片">
        <div class="box2">
            [集锦] 热身赛-阿根廷 4-0 墨西哥 劳塔罗22分钟上演帽子戏法
        </div>
    </div>
</body>

效果如下图所示：
在这里插入图片描述

给父元素添加 text-align:center ; 里面的子元素会水平居中

2.23、css初始化

不同的浏览器标签的默认值不同，为了消除这种差异，需要对css初始化

不知名社会人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 基础学习

HTML一、简单介绍一、简单介绍W3C是万维网联盟，是一家制定标准的国际中立性标准机构web的标准包括：结构化标准语言（HTML,XML）表现标准语言(CSS)行为标准语言(DOM,ECMAScript现在已经到6了)什么是网页？通过浏览器阅读的HTML格式的文件，由文字，图片，链接，音频等元素组成，网页的集合是网站什么是HTML？HTML是超文本标记语言，不是编程语言，而是标记语言，由标签组成；HTML是一门专门创建网页的语言lang 与字符集 <!
复制链接

扫一扫