CSS实战栗子

最新推荐文章于 2025-04-30 14:09:09 发布

不会写代码的菜

最新推荐文章于 2025-04-30 14:09:09 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125376378

css 专栏收录该内容

20 篇文章

订阅专栏

本文通过实例展示了如何运用CSS和HTML创建登录盒子、注册表单和京东导航，涉及背景设置、布局、表单元素和导航菜单的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前的代码我们已经简单介绍了CSS的基本语法,接下来我们来综合使用这些语法进行一些小程序的实例.

1.登录盒子示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             /* 设置背景 */
            .d1{
               /* 设置图片大小 */
               width: 100%;
               height: 100%;
               /* 设置图片 */
               background-image: url(../img/login_bg.jpg);
               /* 设置图片的尺寸 */
               background-size: cover;
               /* 设置图片的位置 */
               position: absolute;
               left: 0;
               top: 0;
               /* 设置图片的外边距 */
               padding: 0;
            }
            /* 设置主标签 */
            .d2{
                /* 设置标签的大小 */
                width: 500px;
                height: 400px;
                /* 设置标签的颜色 */
                background-color: #ffffff;
                /* 设置标签的位置 */
                margin: 175px auto;
                padding-top: 35px;
            }
            /* 设置功能性标签 */
            .d3{
                /* 设置大小 */
                width: 80%;
                height: 50px;
                /* 设置标签颜色 */
                background-color: #27a9e3;
                /* 设置标签的位置 */
                margin-left: auto;
                margin-right: auto;
                padding-top: 25px;
            }
            span{
                /* 设置字体的颜色及大小 */
                color: #FFFFFF;
                font-size: 18px;
                padding-left: 155px;
                padding-right: 150px;
            }
        </style>
    </head>
    <body>
        <!-- 背景图片 -->
        <div class="d1">
            <!-- 主标签 -->
            <div class="d2">
                <!-- 功能标签 -->
                <div class="d3">
                    <span>欢迎登录</span>
                </div>
                <div class="d4"></div>
                <div class="d4"></div>
                <div class="d4"></div>
            </div>  
        </div>
    </body>
</html>

运行结果如下:

2.注册表单示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{  /* 清除浏览器的默认样式*/
                margin: 0;
                padding: 0;
            }
            .c1{
                
                background-color: #2692ff;
                color: #fff3ff;
                text-align: center;
                line-height: 35px;
                ;
            }
        
            .c3{
                width: 500px;
                height: 400px;
                background-color: #b4daff;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <form class="c3">
            <table width="500px">
                <tr class="c1">
                    <td >欢迎注册</td>
                </tr>
                <tr class="c2">
                    <td >用户名:<input type="text" ></td>
                </tr>
                <tr class="c2">
                    <td>密码:<input type="text" ></td>
                </tr>
                <tr class="c2">
                    <td>性别:<input type="radio" name="gender" value="男">男
                            <input type="radio" name="gender" value="女">女
                    </td>
                </tr>
                <tr class="c2">
                    <td>电话:<input type="text" ></td>
                </tr>
                <tr class="c2">
                    <td>职业:<select name="zhiye">
                                <option value="01">程序员</option>
                                <option value="02">教师</option>
                                <option value="03">公务员</option>
                            </select>
                    </td>
                </tr>
                <tr class="c2">
                    <td>爱好:<input type="checkbox" name="favorite" value="敲代码">敲代码
                            <input type="checkbox" name="favorite" value="打游戏">打游戏
                            <input type="checkbox" name="favorite" value="唱歌">唱歌
                            <input type="checkbox" name="favorite" value="运动">运动
                    </td>
                </tr>
                <tr class="c2">
                    <td>地址:<textarea rows="3" cols="25" name="address"></textarea></td>
                </tr>
                <tr class="c1">
                    <td>填写完成后点击下面提交按钮提交表单</td>
                </tr>
                <tr class="c2">
                    <td><input type="submit">
                        <input type="reset" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

运行结果如下:

3.京东导航示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           .d2{
               width: 180px;
               height: 350px;
               background-color: #6e6568;
               color: #F0F8FF;
               line-height: 30px;
           }
           .t1:hover{
               background-color: aquamarine;
           }
           .a1:hover{
               color: #B4DAFF;
           }
        </style>
    </head>
    <body>
        <div class="d1">
            <img src="../img/jd.JPG"/>
        </div>
        <div class="d2">
            <table width="180px";>
                <tr class="t1">
                    <td ><a href="" class="a1">家用电器</a></td>
                </tr>
                <tr class="t1">
                    <td><a href="" class="a1">手机/</a><a href="" class="a1">运营商/</a><a href="" class="a1" >数码</a></td>
                </tr>
                <tr class="t1">
                    <td><a href="" class="a1">电脑/</a><a href="" class="a1" >办公</td>
                </tr>
                <tr class="t1">
                    <td><a href="" class="a1">家具/</a><a href="" class="a1">家居/</a><a href="" class="a1">家装/</a><a href="" class="a1">厨具</td>
                </tr>
                <tr class="t1">
                    <td><a href="" class="a1">男装/</a><a href="" class="a1">女装/</a><a href="" class="a1" >童装</td>
                </tr>
                <tr>
                    <td>男鞋/运动歇/户外</td>
                </tr>
                <tr>
                    <td>汽车/汽车用品</td>
                </tr>
                <tr>
                    <td>母婴/玩具乐器</td>
                </tr>
                <tr>
                    <td>图书/电子书</td>
                </tr>
                <tr>
                    <td>理财/众筹/白条/保险</td>
                </tr>
            </table>
        </div>
    </body>
</html>