PHP第三次3

大标 2022年3月16日22:13:43
评论
17

设计下面导航页面。鼠标置于文字部分,文字能变大。

div样式:宽980px,高150px,背景图在image文件夹里。

li样式:宽84px,字体加粗,margin上距100px,字体10px,line-height24px

其它样式按照图片自设。

 

 

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>文字变大</title>
    <style type=\"text/css\"> 
    .main{
        background: url(E:/大二/PHP/作业/h_bg.jpg) no-repeat;
        width: 980px;
        height: 150px;
    }
    li{
        width: 84px;
        font-weight:bold;
        margin-top: 100px;
        font-size: 10px;
        line-height: 24px;
        float:left;
        text-decoration: underline;
    }
    li:hover{
        font-size: 18px;
    }
    </style>
</head>
<body>
    <div class=\"main\">
        <ul>
            <li>首页</li>
            <li>家用电器</li>
            <li>手机数码</li>
            <li>日用百货</li>
            <li>书籍</li>
            <li>帮助中心</li>
            <li>免费开点</li>
            <li>全球咨询</li>
        </ul>
    </div>
</body>
</html>

 

  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
大标
  • 本文由 发表于 2022年3月16日22:13:43
  • 转载请务必保留本文链接:https://www.tanhuibiao.com/script/php/5257.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: