分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

HTML+CSS页面练习——legend第三部分

发布时间:2023-09-06 01:13责任编辑:胡小海关键词:CSSHTML

第三部分——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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved