商城网站建设4262,最好的做网站公司有哪些,网站设计扁平化,公司网站制作找哪家使用float: left将格子左浮动。
设置格子背景颜色#xff0c;字体颜色#xff0c;鼠标放上去后的字体颜色和背景颜色
style.title {width: 100%;overflow: hidden;}.title-topic a { /*以下元素应用于topic*/float: left; /*左浮动#xff0c;让12个格子在…
使用float: left将格子左浮动。
设置格子背景颜色字体颜色鼠标放上去后的字体颜色和背景颜色
style.title {width: 100%;overflow: hidden;}.title-topic a { /*以下元素应用于topic*/float: left; /*左浮动让12个格子在一行*/width: 8.33%; /* 每个格子宽度为总宽度的 1/12 */box-sizing: border-box;text-align: center; /*居中对齐*/background-color:blue; /*背景颜色*/padding: 20px;display: block; /*将元素显示为块级元素*/color:blueviolet; /*文本颜色*/}.title-figure a { /*以下元素应用于figure*/float: left;width: 8.33%; box-sizing: border-box;text-align: center;background-color: #fe722171;padding: 20px;display: block;color: rgb(15, 12, 13);}.title-figure a:hover{ /*悬停鼠标移到格子时改变字体和背景颜色*/color: red;background-color:bisque;}.title-topic a:hover{color: red;background-color: aqua;}/stylediv classtitle /*#--#表示该链接的目标URL为当前页面本身不会跳转到其他页面div classtitle-topica href#人物简介/a/divdiv classtitle-figurea href#梅西/a/divdiv classtitle-figurea href#C罗/a/divdiv classtitle-figurea href#姆巴佩/a/divdiv classtitle-figurea href#武磊/a/divdiv classtitle-figurea href#内马尔/a/divdiv classtitle-figurea href#赵忠祥/a/divdiv classtitle-figurea href#李光洙/a/divdiv classtitle-figurea href#迭戈·阿方索/a/divdiv classtitle-figurea href#阿图罗·比达尔/a/divdiv classtitle-figurea href#金秀炫/a/divdiv classtitle-figurea href#巴黎斯/a/div/div
效果图
