第三部分——feature
简要介绍:
这部分比较简单。主要用<p>元素写了两句话。用一张图片设置背景。
页面效果:
HTML代码:
???<div > ???????<section id="feature"> ??????????<article> ???????????<p>We work to make web a beautiful place.</p> ???????????<p>We craft beautiful designs and convert them into</p> ???????????<p>fully functional and user-friendy web app.</p> ??????????</article> ???????</section> ???</div>
CSS代码:
??????#feature { ???????????background: url(img/yellow.png) repeat-x 0 0 ; ???????????/*背景是一张照片,在(0,0)处放置,在X轴重复*/ ???????????height: 406px; ???????????z-index: 500; ?????/*Z轴方向上的堆叠顺序,值越大,就显示在上面*/ ???????????margin: 0; ???????????padding: 0; ???????????box-shadow: 0 5px 16px rgba(0,0,0,0.3); ???????} ???????#feature ?article{ ??????????????padding-top:85px; ???????} ???????#feature p{ ???????????font-family:‘Patua One‘,cursive; ???????????font-size:40px; ???????????text-align:center; ???????????margin-bottom:0; ???????????line-height:0.6em; ?/*两行文字之间的间距*/ ???????????color:#fff; ???????}HTML+CSS页面练习——legend第三部分
原文地址:http://www.cnblogs.com/209yin/p/7588244.html