H5 , Css基础练习
h5,css基础练习
1.内边距练习padding
<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>H5title>
<style>
div{
width:200px;
height: 200px;
border: 1px solid red; #边框线1像素红色
/* padding:10px 20px 30px 20px; */
/* 顺序顺时针上右下左 */
/* padding-top:10px;上边距 */
/* 左内边距 */
padding-top: 5px; #内边距上
padding-left: 20px; #左内边距
}
style>
head>
<body>
<div>这是div中的文字div>
body>
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>Documenttitle>
<style>
/* div{
width: 50px;
height: 60px;
border: 1px solid rgb(219, 209, 209);
text-align: center;# 字体居中
/* padding-bottom: ; */
/* font-size: 16px; */
/* padding会作用在元素的大小计算中,padding增大整个元素也会增大,无法实现居中 */
/* padding-top: 22px; */
/* 行高等于当前元素高度时 字体在当前元素垂直居中 */
/* line-height: 60px; */
/* } */
div{
width: 32px;
border: 1px solid red;
font-size: 16px;
/* 简化成上右下左 */
padding: 22px 9px 22px 9px; #内边距嫖
/* 再简化 */
padding: 22px 9px;
}
style>
head>
<body>
<div>首页div>
body>
html>
2.外边距margin
<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>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
/* border:1px solid red; */
background-color: pink;
/* 解决外边距溢出是为父边距添加一个盖子,让子元素的外边距能找到作用的点 */
/* 方法一为辅元素添加上透明框 */
/* 父元素上边距可能会和溢出的子元素外边距合并无法组织溢出 */
/* 方法二为父元素添加内边距 */
/* margin: 10px 20px 30px 40px; */
border-top:1px solid transparent;
}
#d1{
margin-bottom: 10px;
}
#d2{
margin-top:20px;
}
style>
head>
<body>
<div id="d1">
<p>这是pp>
div>
<div id="d2">div>
body>
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>inline-margintitle>
<style>
span{
border:1px solid red;
}
#s2{
margin-left: 20px;
}
#s1{
/* margin可以取负值 表示向相反方向移动 */
margin-left: -10px;
margin-right: 10px;
}
ul{
/* 取消列表样式 */
list-style: none
}
style>
head>
<body>
<span id="s1">中午吃啥?span><span id="s2">随便span>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
body>
html>
3.盒子box
<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>Documenttitle>
<style>
div{
/* contnt-box计算方式 */
/* width: 150px;
height:150px;
border: 5px solid red;
background-color: orange;
padding:10px;
margin: 10px; */
width: 180px;
height: 180px;
/* border-box 将内边距和边框一同计算在内容中 */
/* 同时根据内边距和边框大小调整内容大小 */
/* 计算方式width/height+margin */
box-sizing: border-box;
border: 5px solid red;
padding: 10px;
margin: 10px;
}
style>
head>
<body>
<div>div>
body>
html>
4.拓展练习
<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>Documenttitle>
<style>
#s1{
color: #666;
}
div{
width: 0px;
height: 0px;
border:8px solid transparent;
border-top-color:#444;
display: inline-block;
margin-bottom: -6px;
}
style>
head>
<body>
<span id="s1">
上海
span>
<div id="s2">div>
body>
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>Documenttitle>
<style>
div{
width:180px;
height: 62px;
background-color: black;
border-radius: 30px;
color: rgb(238, 223, 11);
font-size: 30px;
text-align: center;
line-height: 62px;
}
div:hover{
background-color: red;
color: aliceblue;
cursor: pointer;
transition: all 1s;
}
style>
head>
<body>
<div>
PLUS会员
div>
body>
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>Documenttitle>
<style>
.item{
width: 50px;
height: 25px;
margin:0 10px;
padding: 5px 10px;
font-size: 8px;
line-height: 40px;
}
.item:hover{
border-radius: 5px;
background-color: rgb(255, 0, 0);
color: aliceblue;
transition: all 0.5s;
cursor: pointer;
}
div{
width: 80%;
height: 40px;
border: 1px solid rgb(114, 109, 109);
}
#s1{
color: rgb(73, 75, 61);
}
style>
head>
<body>
<div>
<span id="s1" class="item">难度:span>
<span class="item">全部span>
<span class="item">初级span>
<span class="item">中级span>
<span class="item">高级span>
div>
body>
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>练习4title>
<style>
.banner{
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
/* 水平居中上下不调整左右自动 */
margin: 0 auto;
}
#d1{
margin-left: -166px;
background-color: red;
color: white;
}
.d2{
display: block;
margin-left: -75px;
font-size:20px;
}
#d3{
display: block;
margin-left:-37px;
color: rgb(121, 117, 117);
}
#img1{
margin-top:20px;
}
style>
head>
<body>
<div class="banner">
<span id="d1">低价span>
<span class="d2"><b>母婴馆b>span>
<span id="d3">秒杀低至一元span>
<img src="/home/tarena/桌面/1906/html/day04/exer/imgs/img01-2-3.png" alt="图片加载失败" id="img1">
div>
body>
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>练习5title>
<style>
#d{
width: 187px;
height: 242px;
border: 1px solid rgb(185, 172, 172);
margin: 0 auto;
text-align: center;
}
#d1{
font-size: 40 px;
margin-left:-150px;
}
#ig1{
margin-top: 20px;
}
#d2{
margin-top: 20px;
}
#d3{
margin-top: 20px;
color: rgb(117, 106, 106);
}
#d:hover{
width: 187px;
height: 242px;
border: 1px solid rgb(185, 172, 172);
margin: 0 auto;
margin-top: -5px;
text-align: center;
cursor: pointer;
box-shadow: 10px 10px 15px 0;
}
style>
head>
<body>
<div id="d">
<div id="d1"><b>众筹b>div>
<img src="/home/tarena/桌面/1906/html/day04/exer/imgs/img01.png" alt="图片加载失败" id="ig1">
<div id="d2"><b>苹果I-Watch呼吸表带b>div>
<div id="d3">一场手腕的呼吸div>
div>
body>
html>