海同科技，欢迎您！
就业
培训
资料
职坐标
IT知识库

WEB前端

站
热门城市 全国站>
    其他省市
      搜索
      快速购买 快速购买  >
      icon 400-636-0069

      热门课程

      IT学院

      职坐标首页 IT知识库 WEB前端 HTML/CSS
      选择在海同培训： 30 天 1320 名， 今日申请 31 人 IT培训咨询 >>
      HTML+CSS入门之一个CSS效果
      沉沙 2018-11-23 来源 ： 阅读 1090 评论 0

      摘要：本篇教程介绍了HTML+CSS入门之一个CSS效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

      本篇教程介绍了HTML+CSS入门之一个CSS效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

      <

       

       程序代码
      <style>*{ margin:0; padding:0; list-style:none; border:none;}body{ font-size:12px; font-family: Verdana; line-height:1.8; padding:30px;}.c{ clear:both;}a:link,a:visited{color:#FFF;text-decoration:none;}a:hover,a:active{color:#FFCC00;text-decoration:underline;} /*list box*/.info{background:#06518A; width:500px; padding:25px 10px 10px 10px;}.info div{border:2px solid #B48E47; background:url(bg.gif) right top repeat-y #01395C; padding:10px;}.info h2{ background:url(faq.gif) top center no-repeat; margin-top:-30px; position:absolute; width:480px; height:50px;}.info span{ text-align:right; display:block}.info li{ background:url(ic.gif) no-repeat center left; padding-left:10px; float:left; width:225px;}</style>

       程序代码
      <div class="info">  <div>    <h2>&nbsp;</h2>    <span><a href=""><img src="more.jpg" alt="more" /></a></span>    <ul>      <li><a href="">css test 001.</a></li>      <li><a href="">css test 002.</a></li>      <li><a href="">css test 003.</a></li>      <li><a href="">css test 004.</a></li>      <li><a href="">css test 005.</a></li>      <li><a href="">css test 006.</a></li>      <li><a href="">css test 001.</a></li>      <li><a href="">css test 002.</a></li>      <li><a href="">css test 003.</a></li>      <li><a href="">css test 004.</a></li>      <li><a href="">css test 005.</a></li>      <li><a href="">css test 006.</a></li>    </ul>    <p class="c"></p>  </div></div>

       HTML代码
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="//www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>css test .</title>
      <style>
      *{ margin:0; padding:0; list-style:none; border:none;}
      body{ font-size:12px; font-family: Verdana; line-height:1.8; padding:30px;}
      .c{ clear:both;}
      a:link,a:visited{color:#FFF;text-decoration:none;}
      a:hover,a:active{color:#FFCC00;text-decoration:underline;} 
      /*list box*/
      .info{background:#06518A; width:500px; padding:25px 10px 10px 10px;}
      .info div{border:2px solid #B48E47; background:url([url]//www.zishu.cn/attachments/month_0801/h20081222242.gif[/url]) right top repeat-y #01395C; padding:10px;}
      .info h2{ background:url([url]//www.zishu.cn/attachments/month_0801/120081222150.gif[/url]) top center no-repeat; margin-top:-30px; position:absolute; width:480px; height:50px;}
      .info span{ text-align:right; display:block}
      .info li{ background:url([url]//www.zishu.cn/attachments/month_0801/n20081222216.gif[/url]) no-repeat center left; padding-left:10px; float:left; width:225px;}
      </style>
      </head>
      <body>
      <div class="info">
        <div>
          <h2> </h2>
          <span><a href=""><img src="//www.zishu.cn/attachments/month_0801/p20081222114.jpg" alt="more" /></a></span>
          <ul>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
          </ul>
          <p class="c"></p>
        </div>
      </div>
      <div class="info">
        <div>
          <h2> </h2>
          <span><a href=""><img src="//www.zishu.cn/attachments/month_0801/p20081222114.jpg" alt="more" /></a></span>
          <ul>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
          </ul>
          <p class="c"></p>
        </div>
      </div>
      <div class="info">
        <div>
          <h2> </h2>
          <span><a href=""><img src="//www.zishu.cn/attachments/month_0801/p20081222114.jpg" alt="more" /></a></span>
          <ul>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
          </ul>
          <p class="c"></p>
        </div>
      </div>
      <div class="info">
        <div>
          <h2> </h2>
          <span><a href=""><img src="//www.zishu.cn/attachments/month_0801/p20081222114.jpg" alt="more" /></a></span>
          <ul>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
            <li><a href="">css test 001.</a></li>
            <li><a href="">css test 002.</a></li>
            <li><a href="">css test 003.</a></li>
            <li><a href="">css test 004.</a></li>
            <li><a href="">css test 005.</a></li>
            <li><a href="">css test 006.</a></li>
          </ul>
          <p class="c"></p>
        </div>
      </div>
      </body>
      </html>
        [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]    

      本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！

      web前端开发软件 如何做网页制作 网页制作
      本文由 @沉沙 发布于职坐标。未经许可，禁止转载。
      喜欢 | 0 不喜欢 | 0
      看完这篇文章有何感觉？已经有0人表态，0%的人喜欢 快给朋友分享吧~
      评论（0）
      后参与评论
      加入IT交流圈
      JAVA工程师交流群 +加入
      大数据架构师交流群 +加入
      人工智能Python交流群 +加入
      WEB/H5前端交流群 +加入
      职坐标公众号
      WEB前端 直通车
      • 索取资料 索取资料 索取资料
      • 答疑解惑 答疑解惑 答疑解惑
      • 技术交流 技术交流 技术交流
      • 职业测评 职业测评 职业测评
      • 面试技巧 面试技巧 面试技巧
      • 高薪秘笈 高薪秘笈 高薪秘笈
      海同师资推荐 更多>>
      黄骈
      黄骈 联系TA
      认证System Analyst，System Architect
      程光淼
      程光淼 联系TA
      精通C、C++等语言、智能芯片开发
      热门就业培训班 更多>>
      【零基础】人工智能+Python全栈开发课程
      【零基础】人工智能+Python全栈开发课程
      人工智能+Python技术风口浪潮
      【零基础】JavaEE高级开发工程师课程
      【零基础】JavaEE高级开发工程师课程
      0基础入学Java课程
      【零基础】大数据与分布式架构师课程
      【零基础】大数据与分布式架构师课程
      培训大数据分布式架构
      HTML/CSS30天热搜词 更多>>
      htmlcss教程按时 htmlcss入门教程 html与css入门经典 htmlcss入门基础版 div+css布局大全 html与css入门经典pdf htmlcss基础入门 html和css html教程入门 html css js html css javascript css基础教程 div+css入门教程 css+html divcss布局大全 html/css入门书籍 divcss自适应布局 html静态页面制作 div+css布局优点 div+css布局入门教程

      您输入的评论内容中包含违禁敏感词

      我知道了

      助您圆梦职场 匹配合适岗位
      验证码手机号，获得海同独家IT培训资料
      选择就业方向：
      人工智能物联网
      大数据开发/分析
      人工智能Python
      Java全栈开发
      WEB前端+H5

      请输入正确的手机号码

      请输入正确的验证码

      获取验证码

      您今天的短信下发次数太多了，明天再试试吧！

      提交

      我们会在第一时间安排职业规划师联系您！

      您也可以联系我们的职业规划师咨询：

      小职老师的微信号：z_zhizuobiao
      小职老师的微信号：z_zhizuobiao

      版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
      上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
       沪公网安备 31011502005948号    

      关于我们 │ 法律声明 │ 联系我们

      ©2015 www.zhizuobiao.com All Rights Reserved

      208小时内训课程
      在线客服