现在定义的图片高度只有100px,肯定是显示不全的,我们已经知道了 div 的高度是由其文档流的高度总和决定,但导航栏后面都是空白,其高度不足以放下整个背景图,怎么办呢,只能迫不得已给其指定一个特定高度(迫不得已使用,最好不要使用,否则必定会出现bug)
先将导航栏的左右外边距删掉,并赋予给"inner"
刷新之后发现又出现bug了
我的浮动呢???
由于新添加了一个div,原来的浮动已经失效了,需要重新整理标签
将clearfix移到新的父系标签"inner"中,再将所有css属性中的".topnavbar>div"指向符号删掉即可,重新刷新
可喜可贺,恢复了正常
接下来继续
观察原图可以看出,它是一个黑色半透明的样式
所以需要以下几步
①
②.banner .mask{height: 515px;background-color: rgba(0, 0, 0, 0.5);}(意为半透明遮挡)
可以看出明显的半透明黑色遮挡
这个时候还是不一样,因为原图中的图片是居中显示,现在明显没有把图片展示完整,于是
.banner{ background-position: center center;}
接下来再给图片加一个自适应大小
.banner{ background-size: cover;}
意思就是会展示所有的图片并按照网页比例缩放
ok,导航栏这一大部分就算是完成了,接下来做这一部分
第二步:
但目前我的页面是这样的
先给其加一个边框(所谓的调试大法)
.usercard{ border: 1px solid red;}
经测量,原网站中的卡片宽度为940px,于是这里设置一个宽度值
.usercard{ max-width: 940px;}
有人会问了,为什么不直接设置width呢?
也就是max-width和width有什么区别呢?
当网页的宽度拖动到小于940px时,max-width会自适应宽度,而width只能向右滑动才可以看全页面,而当网页宽度大于940px时,两者表现相同
然后给其设置一个水平居中
.usercard{ margin-left: auto;margin-right: auto;}
于是整个卡片在页面水平居中
接着将头像链接过来(同样存放在img文件夹中,这里我用的是最近超爱的战斗天使)保持与原图大小相同,指定一个宽高
于是就引用成功啦,接下来完成hello部分
首先取色,测量卡片框的宽高,这时候需要注意的一点是,由于是标签,设一个宽高的固定值并不可取,于是先将其转变为块级元素,在设置其内边距
.usercard .welcome{color: white;background-color: #e8676b;display: inline-block;padding: 4px 14.5px;line-height: 21px; /* 在不同浏览器里表现不同,尽量写一下 */
}
这时候发现原图卡片左下角还有一个小三角形,可以参考以下链接
无情老油条:css-画一个三角形zhuanlan.zhihu.com
做好三角形之后,先再写一个标签放进hello里
然后将小三角形的css属性添加
.usercard .welcome .triangle{display: block;border: 8px solid transparent;width: 0;border-left-color: #e6686a;border-top-width: 0;
}
运行后发现,怎么和说好的不一样呢,不仅没有看到小三角,卡片仿佛还变大了一点
是因为标签默认会包住标签
现在需要让小三角形脱离文档流
那么这里就要用的另一个定位方式:绝对定位
令三角形的标签相对于hello的标签进行绝对定位
只需要做两步
①子元素上写position: absolute;
②父元素上写position: relative;
然后调整一下三角形的位置
top: 100%;/* 即三角形的上边缘距卡片的上边缘高度100% */
left: 5px;/* 向右挪动5px */
完成
然后继续调整,如何将头像和内容横向排列呢
没错 “浮动”
①子元素 float: left;
②父元素 class=" clearfix"
③伪元素.clearfix::after {content: '';display: block;clear: both;}
观察到两侧有空白部分,则给
标签加一个外边距.usercard .pictureandtext{padding: 50px;}
再给中间加一个边距
margin-left: 65px;
发现那条分隔线好像不够长
没有办法只能指定一个宽度
width: 471px;
由于每一个标签都有其默认样式,此时写入
*{margin: 0;padding: 0;}
将所有样式的默认内外边距删掉,对照着原网站慢慢调整
调整字体间的间距
改变
的样式hr{height: 0;border: none;border-top: 1px solid #dedede;}
增加
边距.usercard .text hr{margin: 22px 0;}
现在来做下面的效果
怎么分两行显示呢
试着用一下“浮动”
结果发现它们都同行显示,所以利用它们可以自动换行的特性来做一下调整
.usercard dl dt,
.usercard dl dd {float: left;padding: 8px 0;
}.usercard dl dt {width: 30%;font-weight: bold;
}.usercard dl dd {width: 70%;color: #9da0a7;
}
ok 卡片的上半部分算是完成了
再来看下半部分
首先要掌握怎样去引用图标
推荐下面这个链接
无情老油条:阿里巴巴矢量图标库的使用zhuanlan.zhihu.com
按照步骤做完后 即引用成功
现在继续调整样式
.usercard svg{width: 30px;height: 30px;fill: white;/* js中的颜色设置方式 */vertical-align: top; /* 设置垂直对齐方式 */
}
对图标的样式做一个调整
.usercard>footer.media{
background-color: #e8676b;
text-align: center;
}
对内容进行一个居中设置
原网站中鼠标悬停时有一个深色的圆浮现
来试着做一下这个效果
先给
凯发k8官方网为你收集整理的css 背景图怎么设置自动填充满_css-布局与定位的全部内容,希望文章能够帮你解决所遇到的问题。
如果觉得凯发k8官方网网站内容还不错,欢迎将凯发k8官方网推荐给好友。