html and css advanced 1
Relative and absolute paths
相对地址./ 当前文件所在目录
../ 当前目录的上一级目录
绝对位置
相对于磁盘位置去定位
<!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 list
Applied to: List menu of news headlines Article headlines
Created : ul tags li tags
<!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 form
The form used to collect different types of user input consists of different types of tags
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 selector
id selector
<!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>group selector
<!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>Pseudo-class selector
<!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>box model
盒子模型就是使用现实中盒子来做比喻 帮助设置元素对应的样式
盒子与盒子之间的间距
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>Small Homework – Form Layout Cross-Origin Request
<!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>Center the block element horizontally
Tips
for Set the margin values on the left and right of the block element to 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 properties
- The display property sets the type and hiding of the element
-
none element is hidden and does not occupy position
inline element is displayed as inline element
block element is displayed as block element
<!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 element overflow display feature
- When the size of the child element exceeds the size of the parent element, it is necessary to set the parent element to display the overflowed child element. The way to set the setting method is to set the overflow attribute.
-
Visible defaults beyond the unchanged
hidden hides the excess part
scroll Regardless of whether it exceeds the scroll bar will be displayed to display the excess part
auto Display the scroll bar to display the content according to the actual situation
<!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>