Web前端实战案例

最新推荐文章于 2024-06-10 22:03:36 发布

-和敬-

最新推荐文章于 2024-06-10 22:03:36 发布

阅读量6.1k

点赞数 6

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/weixin_43410827/article/details/104138075

版权

制作404页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        /*通配选择器*/
        *{
   
            margin: 0;
            padding: 0;
        }
        .box{
   
            font-family: "Microsoft YaHei UI";
            font-size: 80px;
            color: #f1ebe5;
            /*字体阴影*/
            text-shadow: 0 8px 9px #c4b59d,0px -2px 1px rgba(255,46,108,0.73);
            /*设置字体加粗*/
            font-weight: bold;
            text-align: center;
            padding: 20px 100px;
            /*设置颜色渐变*/
            background: linear-gradient(to bottom,#0dc418 0%,#5dc4a3 100%);
        }
        h1{
   
            border-bottom: 1px solid #fff;
        }
        h2{
   
            font-size:20px ;
        }
        input{
   
            background-color: #20a7ff;
            border-radius: 10px;
            border:0;
            height: 30px;
            width: 80px;
            padding: 5px;
            color: white;
        }
    </style>
</head>
<body>
<div class="box">
    <h1>404</h1>
    <h2>抱歉...你找的页面不存在了</h2>
    <input type="button" value="返回首页"/>
    <input type="button" value="联系管理"/>
</div>
</body>
</html>

注释：linear-gradient(direction, color-stop1, color-stop2, ...)：颜色渐变函数

计算借贷支出金额

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动计算借贷支出金额</title>
    <style>

    </style>
</head>
<body bgcolor="white">
    <!--表单取名-->
    <form name="loandata">
        <table>
            <!--第一行的的文本占三列-->
            <tr><td colspan="3"><b>输入贷款信息:</b></td> </tr>
            <tr>
                <td>(1)</td>
                <td>贷款总额:</td>
                <!--onchange事件会在域的内容改变时发生，也可用于单选框或复选框改变后触发的事件-->
                <td><input type="text" name="principal" size="12" onchange="calculate()"/></td>
            </tr>

            <tr>
                <td>(2)</td>
                <td>年利率(%):</td>
                <td><input type="text" name="interest" size="12" onchange="calculate()"/></td>
            </tr>

            <tr>
                <td>(3)</td>
                <td>借款期限(年):</td>
                <td><input type="text" name=

最低0.47元/天解锁文章

-和敬-

关注

6
点赞
踩
89

收藏

觉得还不错? 一键收藏
0
评论
Web前端实战案例

制作404页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录和注册页面设计</title> <style> /*通配选择器*/ *{ m...
复制链接

扫一扫