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.大名片

给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;

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;

.userCard .welcome{background: #e6686a;color: white;display: inline-block;padding: 4px 16px;line-height: 22px;position: relative;
}
.userCard .welcome .triangle{display: block;border: 10px solid transparent;width: 0px;border-left-color:  black;border-top-width: 0px;
position: absolute;
}

把三角形挪到左下角，给它一个left 4像素，top 100% ,颜色改为一样。

.userCard .welcome .triangle{display: block;border: 10px solid transparent;width: 0px;border-left-color:  #e6686a;border-top-width: 0px;position: absolute;left: 4px;top: 100%;
}

如果想知道更多形状谷歌The Shapes of CSS

让hello改变位置到右边，给子元素添加一个float：left；父元素添加clearfix

子元素.userCard .picture{float: left;
}
子元素.userCard .text{float: left;
}父元素<div class="pictureAndText clearfix">

然后它们头像和hello与介绍就左右并排了。调整头像与介绍和边框的距离。

给里面多余的div加padding

.userCard .pictureAndText{padding: 50px;
}

把原网页图片和介绍中间的距离量出来，加到我的页面，margin-left可以给text也可以给picture。

.userCard .text{float: left;margin-rleft: 65px;
}

给名字下面的横线加长，

.userCard .text{float: left;margin-left: 65px;width: 470px;
}

把名字和hello距离调出来

.userCard .welcome{background: #e6686a;color: white;display: inline-block;padding: 4px 16px;line-height: 22px;position: relative;margin-bottom: 10px;
}

新加一个*{}把所有默认样式干掉，这样就好调整距离了。

*{margin: 0;padding: 0;
}

hello与名字

.userCard .text h1{margin-top: 18px;
}

名字下横线重写，新建hr{}高度是零，宽度不用写默认自适应，去掉所有border，然后给它一个高度和默认颜色。

hr{height: 0;border: none;border-top: 1px solid #dedede;
}

简介与横线距离，给text的hr{}上下20左右0

.userCard .text hr{margin: 20px 0;
}

调整介绍，给dt和dd加float: left;，这样它们会合并一行

.userCard dl dt,
.userCard dl dd{float: left;
}

利用它们会自动换行的特性，给它们加宽度。

.userCard dl dt{width: 30%;
}
.userCard dl dd{width: 70%;
}

调一下垂直方向的距离，上下各5像素，左右0，这样间距就差不多了

.userCard dl dt,
.userCard dl dd{float: left;padding: 5px 0;
}

字体颜色，前边字体加粗，后边字体改色。

卡片下面的红色div

.userCard>footer.media{background:#e6686a；
}

做里面的图标，要用这个网站阿里巴巴矢量图标库找到以后把里面的图标引入页面

第一步：拷贝项目下面生成的symbol代码：

  <head><title>蒋卫彬的个人简历</title><link rel="stylesheet" href="./a.css"><script src="//at.alicdn.com/t/font_1127697_u1hshrmw1to.js"></script></head>

点击图标库的使用帮助，找到symbol引用，跟着里面写的做。

第二步：加入通用css代码（引入一次就行）：

  <head><title>蒋卫彬的个人简历</title><link rel="stylesheet" href="./a.css"><script src="//at.alicdn.com/t/font_1127697_u1hshrmw1to.js"></script><style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head>

第三步：挑选相应图标并获取类名，应用于页面：用svg代替img以此类推

        <footer class="media"><a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jianshu"></use></svg></a>

5个logo都有了，批量改下大小颜色。

.userCard svg{width: 30px;height: 30px;fill: white;
}

调一下图标居中和间距，

.userCard>footer.media{background:#e6686a;text-align: center;
}
.userCard svg{width: 30px;height: 30px;fill: white;margin: 0 16px;
}

调一下上下间距

.userCard svg{width: 30px;height: 30px;fill: white;margin: 0 16px;vertical-align: top;
}

给图标一个效果，先做一个边框把图标包住。

.userCard>footer.media>a{
border: 1px solid black;
display: inline-block;
}

把margin去掉，

.userCard svg{width: 30px;height: 30px;fill: white;vertical-align: top;
}

把边框做成圆的，

.userCard>footer.media>a{
border: 1px solid black;
display: inline-block;
border-radius: 50%
}

圆不够大加宽高，

.userCard>footer.media>a{
border: 1px solid black;
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%
}

图标和圆不居中，

.userCard>footer.media>a{
border: 1px solid black;
display: inline-block;
width: 40px;
line-height: 30px;
padding: 5px 0;
border-radius: 50%
}

去掉边框背景色

.userCard>footer.media>a{
display: inline-block;
width: 40px;
line-height: 30px;
padding: 5px 0;
border-radius: 50%
}

添加图标背景色，

.userCard>footer.media>a:hover{background: #cf5d5f;
}

把宽度高度调一下。

.userCard>footer.media>a{
display: inline-block;
width: 40px;
line-height: 30px;
padding: 5px 0;
border-radius: 50%;
margin: 16px;
}

最后把大名片

.userCard{max-width: 940px;margin-left: auto;margin-right: auto;background-color: #ffffff
}

div块级元素高度由其内部文档流元素的高度的总和决定。

文档流：文档内元素的流动方向。
span内联元素从左往右流动，如果遇到宽度不够，它就会另起一行继续流动。
div块级元素：每一个块都占一行，如果还有块就另起一行，从上往下流动。
word-break(打断单词）: break-all（单词散开）break-word(在单词分开的地方打断）
如果内联元素是一个很长的单词，浏览器默认不会分开。
display: inline-block; 让块级元素并列一行，x
body就是一个高度为零的一个块。因为它里面没有文档流元素。

以上