需求描述,如图:
1.三张图片显示一列,每列占据屏幕的三分之一。
2.下面的文字居中显示。
3.上面有分割线,同时中间有两条分割线隔开三张图片。
css代码如下:
.question-area { background-color: #ffffff; padding-bottom: 20px; border-top: 1px solid #e3e3e3; } .question-area a{ display:inline-block; /*让a标签有宽度*/ 内联标签的padding,margin和块级标签有所不同:https://www.cnblogs.com/enmeen/p/5286564.html width:32.3%; /*占屏幕的1/3*/ } .question-area a:not(:first-child) { border-left: 1px solid #e3e3e3; } .question-area a img{ width:100%; /*继承父元素的宽度*/ height: 75px; } .question-area a div { font-weight: normal; font-size: 14px; text-align: center; }
html代码如下:
<div> <h1 class="question-title">问题分类</h1> <div class="question-area"> <a href="more/icbc_guide.html"> <img src="/m/img/zhenxinbaogao.png"> <div>征信报告</div> </a> <a href="more/icbc_guide.html"> <img src="/m/img/nashuizhenming.png"> <div>纳税证明</div> </a> <a href="more/icbc_guide.html"> <img src="/m/img/huankuanzhiyin.png"> <div>还款指引</div> </a> <div> </div>
这里涉及到伪类的概念,伪类包括静态伪类和动态伪类:
静态伪类,
a:visited {color:red;}:link(静态的伪类);first-child(选择第一个子元素)
动态伪类,:focus,:hover,:active