2021.7.21今日小结

2021-07-21 19:01:15 阅读：168 来源： 互联网

标签：窗口 21 2021.7 样式小结 app 边框 border 255

今天完成了这个网页的后续。主要是一下css样式的基本。

然后在做小米商城的主页，目前做了这些，新学到的内容是利用hover鼠标触碰弹出窗口，和隐藏。

.app{ position: relative; 给弹出窗口的父类设置相对定位，为了后面弹出窗口的绝对定位的对象。 } li:hover>.app::after{ 给.app就是一个a标签添加一个伪元素，为了给弹出框上面添加一个三角形 content: ''; position: absolute; 绝对定位修改它位置 bottom: 0px; left: 0; right: 0; margin: auto; width: 0; 固定死避宽度免被前面的样式影响 height: 0; 固定死避高度免被前面的样式影响 border: 8px solid transparent; 三角形边框8像素样式是透明颜色 border-top: none; 清除边框上面的样式 border-bottom-color: rgb(255, 255, 255); 设置下面边框的颜色 }


/* 小米商城APP弹出窗 */
.app .qrc{
    display: none; /*先隐藏窗口，为了后面给这个元素添加鼠标伪类*/
    position: absolute; 
    left: -38px;
    width: 134px;
    height: 148px;
    line-height: 10px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    box-shadow:0 0 10px rgba(0,0,0,.3); 边框阴影
}
li:hover>.app .qrc{
    display: block; 添加鼠标伪类修改元素的显示
}

还了解了一个border边框的用法，制作出一个三角形

　 border: 10px solid transparent; 　　先设置一个四边框的，颜色都是透明色。 border-top: none; 如果想要的三角形反向是那边的就清除边框那一个方向的样式。我这里清除的是上面的。 border-bottom-color: rgb(255, 255, 255); 然后给对应的一边添加样式，三角形就出来了。我觉得挺实用的。还有一个如果不想让窗口变小时，里面的样式会到处跑，就利用min-width最小宽度固定窗口。目前的效果图如下了。

标签：窗口,21,2021.7,样式,小结,app,边框,border,255
来源： https://www.cnblogs.com/Privatexaio/p/15040978.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021.7.21今日小结