css修改span位置_简历完善，CSS布局与定位，笔记
1.⼤背景图
⽤⼯具到原⽹页的⼤背景图，
到图⽚下载到桌⾯，再简历⽬录⾥新建⼀个img⽬录放到⾥⾯，也可以在wall haven.⾃⼰喜欢的壁纸。
css⾥写上⾼度和图⽚地址，不到必要是不要写⾼度容易bug
.banner{
height: 515px;
background-image: url(./img/rs-cover.jpg);
border:1px solid red;
}
但是现在图⽚和导航栏不是层叠的，让banner相对于屏幕固定，不占⽂档流的⾼度，脱离⽂档流。 在topNavBar⾥加position: fixed;
.topNavBar {
padding: 20px 16px 20px 16px;
position: fixed;
top: 0;
left: 0;
}
但是这样导航栏就不受控制了，我们在加个宽度100%（这样也容易bug，能不加就不加）然后把左右的16px换成0
.topNavBar {
padding: 20px 0 20px 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
然后我们需要左右都有16像素的空隙，我们在html新建⼀个<div class="topNavBar-inner"> 把a标签和nav标签移进来这样css⾥边之前的标签都不能⽤了，修改⼀下。把topNavBar和nav⾥的>删掉，把之前"topNavBar clearfix"⾥的clearfix移到"topNavBar-inner clearfix"
再在新加的元素上写上左右宽度就可以了，
.topNavBar-inner{
padding: 0 16px 0 16px
}
让背景图变模糊⿊⾊
在div banner⾥加div等于mask
<div class="banner">
<div class="mask"></div>
</div>
在css⾥给它⼀个半透明⿊⾊
.banner .mask{
height: 515px;
background-color: rgba(0, 0, 0,0.8);
}
然后把背景图的红⾊边框去掉，然后让背景图⽔平和垂直居中，
.banner{
height: 515px;
background-image: url(./img/rs-cover.jpg);
background-position: center center;
}
再让背景图按⽐例缩放。
.banner{
height: 515px;
background-image: url(./img/rs-cover.jpg);
background-position: center center;
background-size: cover;
}
2.⼤名⽚
<div class="card">改为<div class="userCard">
给userCard⼀个边框看它在什么位置，
.
userCard{
border: 1px solid red
}
给它⼀个最⼤宽度，
.userCard{
border: 1px solid red;
max-width: 940px;
}
让它⽔平居中
.userCard{
border: 1px solid red;
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
取⼀下原⽹页背景⾊
然后把整个页⾯的背景改为#EFEFEF
body{
background:#efefef;
color: white;
margin: 0;
}
取原⽹页卡⽚⾊改为相同⾊，
.userCard{
border: 1px solid red;
max-width: 940px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff
}
然后把body⾥的字体删掉，删掉以后字体就会变⿊⾊，
body{
background:#efefef;
margin: 0;
}
把你的头像放到img⽬录⾥然后引⽤
<div class="picture">
<img src="./img/timg.jpg" alt="头像">
</div>
然后编辑⼀下宽⾼
<div class="picture">
<img src="./img/timg.jpg" width="299" height="347" alt="头像"> </div>
给hello⼀个样式，给它⼀个颜⾊和背景颜⾊
.userCard .welcome{
background: #e6686a;
color: white;
}
span不接受宽⾼，把它改成display: inline-block；元素，它就接受宽⾼了。
.userCard .welcome{
background: #e6686a;
color: white;
display: inline-block;
width: 70px;
height: 29px;
}
让它垂直居中，让它它和⾼度⼀样，给它⼀个line-height: 29px;
.userCard .welcome{
background: #e6686a;
color: white;
display: inline-block;
width: 70px;
height: 29px;
line-height: 29px;
}
再⽔平居中
.userCard .welcome{
background: #e6686a;
color: white;
display: inline-block;
width: 70px;
height: 29px;
line-height: 29px;
text-align: center;
}
这样写⽐较⿇烦容易bug换个写法给它各加⼀定的宽⾼，这样再多字体都没有bug
.userCard .welcome{
background: #e6686a;
color: white;
display: inline-block;
padding: 4px 16px;
}
确定⼀下它是22像素
.userCard .welcome{
background: #e6686a;
color: white;
display: inline-block;
padding: 4px 16px;
line-height: 22px;
}
然后把hello下⾯的三⾓形做出来。
border: 10px solid transparent;
width: 0px;
border-left-color: #e6686a;
border-top-width: 0;
css固定定位hello是span在⾥⾯再加⼀个span triangle（三⾓形）
<span class="triangle"></span>
把三⾓形的四句话放到.userCard .welcome .triangle{}⾥⾯
.userCard .welcome .triangle{
border: 10px solid transparent;
width: 0px;
border-left-color: #e6686a;
border-top-width: 0;
}
由于它默认是个span，把它改成div
.userCard .welcome .triangle{
display: block;
border: 10px solid transparent;
width: 0px;
border-left-color: #e6686a;
border-top-width: 0;
}
这样看不见，先把三⾓形改成⿊⾊。
.userCard .welcome .triangle{
display: block;
border: 10px solid transparent;
width: 0px;
border-left-color: black;
border-top-width: 0;
}
这样hello的span会默认包住三⾓形的span，给它⼀个绝对定位，脱离⽂档流再⼦元素写position: absolute；在⽗元素写position: relative;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论