20170608学习笔记整理

来源：互联网发布：淘宝弹弓皮筋专卖编辑：程序博客网时间：2024/05/29 16:27

一．精通CSS第四章

1.固定宽度的圆角框

HTML:

<div class="box"><h2>yyc change the world</h2><p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p></div>

CSS：

/*将顶部图像应用于标题元素，将底部图像应用于div框的底部。因为两个背景图像是单色的，所以可在div框上添加同色背景，形成框的主体*/.box{width: 418px;background: #effce7 url(../images/bottom.gif) no-repeat leftbottom;}.box h2{color:teal;background: url(../images/top.gif) no-repeat left top;}/*为了内容不碰到框的边界，所以在div中的元素上添加一点内边距*/.box{padding-bottom: 1px;}.box h2{margin-top: 0;padding:20px 20px 0 20px;}.box p{padding:0 20px;} /*重新设置内容、上、下背景，为了设置圆角框，再来点左右边距（上左下右）*/.box{width:424px;background: url(../images/tile2.gif) repeat-y;}.box h2{background: url(../images/top2.gif) no-repeat left top;padding-top: 20px;}.box .last{background: url(../images/bottom2.gif) no-repeat left bottom;padding-bottom: 20px;}.box h2,.box p{padding:0 20px 0 20px;}/*BUG*/p{margin-bottom: -10px;}

Result:

阅读全文

0 0