《2018年10月26日》【连续387天】
标题:盒子模型复习,新闻列表实例练习;
内容:
<div class="nav"> <div class="cen"></div> </div> * { margin: 0; padding: 0; } /*padding : x y z d; (顺时针) padding: x y z; (上 左右 下) padding: x y; (上下 左右)*/ .nav { padding: 100px; height: 100px; width: 100px; color: green; background-color: green; } .cen { height: 100px; width: 100px; background-color: red; } .nav { padding-left: 100px; padding-top: 100px; height: 200px; width: 200px; color: green; background-color: green; }例子:
<div class="article"> <h1>New Aritcles</h1> <ul> <li><a href="#">javascript的魅力</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">平面设计</a></li> <li><a href="#">链式编程</a></li> <li><a href="#">DOM</a></li> </ul> </div>* { margin: 0; padding: 0; } .article { position: absolute; top: 50%; left: 50%; margin-left: -205px; margin-top: -142px; border: 1px solid #ccc; width: 380px; height: 263px; padding: 20px 15px 0; } .article h1 { color: #202026; font-size: 20px; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 12px; } li { list-style: none; } .article ul li { height: 38px; line-height: 38px; border-bottom: 1px dashed #ccc; text-indent: 2em; } .article a { font-size: 12px; color: #333; text-decoration: none; } .article a:hover { text-decoration: underline; }
