html和css进阶1
相对路径和绝对路径
相对地址./ 当前文件所在目录
../ 当前目录的上一级目录
绝对位置
相对于磁盘位置去定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 定义相对地址 -->
<img src="./images/programmer.jpg" alt="程序员">
<img src="./images/img/banner.jpg" alt="banner">
<img src="images/img/banner.jpg" alt="banner">
<!-- 定义绝对地址 -->
<img src="C:\Users\Administrator\Desktop\BS前端开发\day2\images\programmer.jpg" alt="programmer">
</body>
</html>html列表
应用于:新闻标题的列表 菜单 文章标题
创建: ul标签 li标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <style>
.list{
/* 去掉列表的小圆点 */
list-style: none;
/* 去掉列表的内边距和外边距 */
margin:0px;
padding:0px;
}
.list li{
line-height: 40px;
border-bottom: 1px solid gray;
text-indent: 10px;
}
.list li a{
text-decoration: none;
color: black;
}
</style> -->
<link rel="stylesheet" href="./css/03列表标签.css">
</head>
<body>
<!-- 创建列表标签 -->
<ul class='list'>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<!-- 创建列表 ul>(li>a{列表文字})*8 -->
<ul class='list'>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
<li><a href="#">列表文字</a></li>
</ul>
</body>
</html>html表单
用于搜集不同类型的用户输入 表单由不同类型的标签组成
input 输入内容 type=text用户名 type=password 密码
type=radio + name=gender 单选
type=checkbox多选
type=file 上传文件
select + option 下拉框
textarea 输入文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>注册表单</h1>
<!-- 创建表单 form 表单 -->
<!-- action 表单数据接收地址 空为当前地址 -->
<!-- method 提交数据的方法 -->
<form action="" method="post">
<p>
<label for="">用户名：</label>
<input type="text", name='username'>
</p>
<p>
<label for="">密 码：</label>
<input type="password" name="password" id="">
</p>
<p>
<label for="">性 别：</label>
<input type="radio" name="gender" id="" value="0">男
<input type="radio" name="gender" id="" value="1">女
</p>
<p>
<label for="">爱 好：</label>
<input type="checkbox" name="hobby" id="" value="study">学习
<input type="checkbox" name="hobby" id="" value="zixi">自习
<input type="checkbox" name="hobby" id="" value="coding">敲代码
<input type="checkbox" name="hobby" id="" value="practice">练习
<input type="checkbox" name="hobby" id="" value="review">复习
<input type="checkbox" name="hobby" id="" value="preview">预习
</p>
<p>
<label for="">玉 照：</label>
<input type="file" name="pic">
</p>
<p>
<label for="">籍 贯：</label>
<select name="site" id="">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="guangzhou">广州</option>
</select>
</p>
<p>
<label for="">简 介：</label>
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>
<!-- get方式 键值对方式提交 设置name属性 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</p>
</form>
</body>
</html>css选择器
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 第四种选择器: id选择器 只能用在一个标签上 */
#div01{
width: 200px;
height: 200px;
background: gold;
font-weight: normal;
font-size: 18px;
font-family: 'Trebuchet MS';
}
</style>
</head>
<body>
<!-- id名称是不允许同名的 -->
<p id="div01">这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>
</body>
</html>组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* .box01{
width: 200px;
height: 200px;
background: gold
}
.box02{
width: 200px;
height: 200px;
background: red
}
.box03{
width: 200px;
height: 200px;
background: orange
} */
/* 精简样式为组选择器 */
/* 第五种选择器: 组选择器 */
.box01,.box02,.box03{
width: 200px;
height: 200px;
}
.box01{
background: gold
}
.box02{
background: red
}
.box03{
background: orange;
}
</style>
</head>
<body>
<!-- .box*3 -->
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</body>伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background: gold;
}
/* 第六种选择器: 伪类选择器 */
.box:hover{
width: 500px;
background: red;
height: 1000px;
}
.link01{
text-decoration: none;
color: black;
}
.link01:hover{
color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<a href="#" class="link01">链接</a>
</body>
</html>盒子模型
盒子模型就是使用现实中盒子来做比喻 帮助设置元素对应的样式
盒子与盒子之间的间距
margin border padding content
外边距 边界 内边距
chrome 查看盒子模型
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
/* 清除掉body默认的外边距 */
margin: 0px;
}
.box{
width: 300px;
height: 300px;
background:gold;
/* 设置顶部边框 */
/* 边框的线型:
solid 实线
dashed 虚线
dotted 点线 */
/* border-top: 10px solid black;
border-left: 10px dashed black;
border-right: 10px dotted black;
border-bottom: 10px solid black; */
/* 设置四个边的边框 */
border:10px solid black;
/* 设置内边距 */
/* padding-top: 20px;
padding-left: 40px;
padding-right: 80px;
padding-bottom: 160px; */
/* 设置四边 顺时针设置padding值 */
/* padding: 20px 80px 160px 40px; */
/* 设置三边 设置上 左右 下的padding值 */
/* padding: 20px 80px 160px */
/* 设置两边 设置上下 左右的padding值 */
/* padding:20px 80px; */
/* 设置一个 上下左右 */
padding: 20px;
/* 设置外边距 */
/* margin-top: 20px;
margin-left: 40px;
margin-right: 80px;
margin-bottom: 160px; */
/* 设置四边 顺时针设置padding值 */
/* margin: 20px 80px 160px 40px; */
/* 设置三边 设置上 左右 下的padding值 */
/* margin: 20px 80px 160px */
/* 设置两边 设置上下 左右的padding值 */
/* margin:20px 80px; */
/* 设置一个 上下左右 */
margin: 20px;
}
</style>
</head>
<body>
<div class="box">HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
</div>
</body>
</html>小作业–表单布局 跨域请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.search_from{
width:602px;
height: 42px;
background: gold;
}
.input_text{
width: 500px;
height: 40px;
border: 1px solid #0fad10;
/* 清除掉默认的padding */
padding: 0px;
/* 首行缩进 */
text-indent: 10px;
/* 去掉蓝色高亮框 */
outline: none;
float: left;
}
.input_sub{
width: 100px;
height: 42px;
background: #0fad10;
/* 去掉默认边框 */
border: 0px;
/* 浮动解决错位的问题 */
float: right;
color: white;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/s" class="search_from" method="get">
<!-- 设置input框的默认提示文字 -->
<input type="text" class="input_text" placeholder="请输入搜索内容" name="wd" id="" value="">
<input type="submit" value="搜索" class="input_sub">
</form>
</body>
</html>设置块元素水平居中
设置块元素相对于父级别水平居中的技巧
将块元素左右的margin值设置为auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background: gold;
/* 只有水平居中 margin-top bottom 上下都不能居中--使用auto*/
/* margin-left: auto;
margin-right: auto; */
margin:0px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>css显示特性
- display属性设置元素的类型及隐藏
-
none元素隐藏且不占位置
inline元素以行内元素显示
block元素以块元素显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 设置display 将块元素转化为内联元素 */
div{
display: inline;
}
/* 设置display 将内联元素转化为块元素 */
a{
display: block;
}
/* 设置display 隐藏元素 */
.p01{
width: 20px;
height: 100px;
background: gold;
display: none;
}
</style>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<a href="#">第一个链接</a>
<a href="#">第二个链接</a>
<p class="p01">标签</p>
<div>下面的div标签</div>
</body>
</html>css元素溢出显示特性
- 当子元素的尺寸超过父元素的尺寸时需要设置父元素显示溢出的子元素的方式设置的方法是通过overflow属性来设置
-
visible 默认超出 不变化
hidden 将超出部分隐藏
scroll 不管是否超出 都会显示滚动条来显示超出的部分
auto 根据实际情况 显示滚动条来显示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0px auto;
/* 父元素设置overflow属性 */
/* visible 默认超出 不变化 */
/* overflow:visible; */
/* hidden 将超出部分隐藏 */
/* overflow:hidden; */
/* scroll 不管是否超出 都会显示滚动条来显示超出的部分 */
/* overflow:scroll; */
/* auto 根据实际情况 显示滚动条来显示内容*/
overflow:scroll;
}
.box{
width:200px;
height: 500px;
background: gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box">
文字内容
<br>
<br>
<br>
文字内容
<br>
<br>
<br>
文字内容
<br>
<br>
<br>
文字内容
<br>
<br>
<br>
</div>
</div>
</body>
</html>