请老师指教，哪里需要优化的？
来源：2-17 自由编程
阿山123
2021-02-08 10:38:26
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
.content {
width: 1600px;
margin: 0 auto;
}
.content .col {
width: 400px;
height: 380px;
float: left;
}
.content .aa,.content .bb {
width: 360px;
height: 340px;
padding: 20px;
background-color: rgb(62, 206, 250);
/* css 文本超出换行并且行高自适应 */
text-align: justify;
text-justify: newspaper;
word-break: break-all;
position: relative;
}
.content .aa::before{
content: '';
height: 0px;
width: 0px;
border: 30px solid transparent;
border-right-color: rgb(62, 206, 250);
position: absolute;
top: 50%;
left: 0;
margin-left: -60px;
margin-top: -30px;
}
.content .bb::after{
content: '';
height: 0px;
width: 0px;
border: 30px solid transparent;
border-left-color:rgb(62, 206, 250) ;
position: absolute;
right: 0;
top: 50%;
margin-right: -60px;
margin-top: -30px;
}
.content .aa h3,.content .bb h3 {
font-size: 24px;
color: white;
margin-bottom: 30px;
}
.content .aa .p1,.content .bb .p1 {
font-size: 16px;
color: white;
margin-bottom: 20px;
}
.content .aa .p2,.content .bb p2 {
font-size: 14px;
color: gray
}
.content .aa button,.content .bb button {
width: 138px;
height: 40px;
background-color: black;
color: blanchedalmond;
display: block;
margin: 0 auto;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="content">
<img class="col" src="http://127.0.0.1:5500/images_stars/111.jpg" alt="">
<div class="col aa ">
<h3>Library</h3>
<p class="p1">Lorem ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem ipsum has been the industry standard dummy text ever since the 1500s,when
an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<img class="col" src="http://127.0.0.1:5500/images_stars/11.jpg" alt="">
<div class="col aa">
<h3>Library</h3>
<p class="p1">Lorem ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p2">Lorem ipsum has been the industry standard dummy text ever since the 1500s,when
an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<button>EXPLORE</button>
</div>
<div class="col bb">
<h3>Library</h3>
<p class="p1">Lorem ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p2">Lorem ipsum has been the industry standard dummy text ever since the 1500s,when
an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<button>EXPLORE</button>
</div>
<img class="col" src="http://127.0.0.1:5500/images_stars/222.jpg" alt="">
<div class="col bb">
<h3>Library</h3>
<p class="p1">Lorem ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p2">Lorem ipsum has been the industry standard dummy text ever since the 1500s,when
an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<button>EXPLORE</button>
</div>
<img class="col" src="http://127.0.0.1:5500/images_stars/444.jpg" alt="">
</div>
</body>
</html>
1回答
-
同学你好，代码中有如下问题可优化：
1、整体最好全屏显示，这样页面效果更好看。如下：
2、按钮的默认边框没有去除，不太好看：
调整如下：
3、.aa、.bb上都有h3、.p1等元素，可以使用“ .content .aa h3, .content .bb h3”这样的并集选择器，但是还能再简化一下。h3、.p1等元素，也在.col这个元素内，因此选择器可以调整成如下形式：
同学将其他选择器，也尝试这样简化一下。
4、三角形所在的伪元素，相同的样式可以统一书写，如下：
5、另外，要注意路径问题，可参考如下回复：
http://class.imooc.com/course/qadetail/276638
祝学习愉快！
0
相似问题
回答 1
回答 1