前端基础选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1{background-color: #cccccc;padding: 30px 15px;width: 240px;height: 360px;box-sizing: border-box;/*新盒膜類型*/color:white;margin: 0 auto;/**/}.box2{width:210px;height: 60px;padding: 15px;box-sizing:border-box;font-size: 20px;}span{float: right;/*行內元素的本質是文本但塊內元素的本質不是文本 */}</style>
</head>
<body>
<div class="box1" align="conter"><div class="box2"><img src="img/1.png" alt="" >菜譜大全<span> > </span></div><div class="box2"><img src="img/2.png" alt="" >食材大全<span> > </span></div><div class="box2"><img src="img/3.png" alt="" >品質珍選<span> > </span></div><div class="box2"><img src="img/4.png" alt="" >專題專區<span> > </span></div><div class="box2"><img src="img/5.png" alt="" >一起紅<span> > </span></div>
</div>
</body>
</html>
Title
G o o g l e
總結
- 上一篇: 前端基础知识点
- 下一篇: 前端HTML5CSS3基础知识点