网页制作实践步骤三登录界面

最新推荐文章于 2024-03-12 21:35:17 发布

Elson_tju

最新推荐文章于 2024-03-12 21:35:17 发布

阅读量1.9k

点赞数

文章标签： CSS+HTML html 界面

本文链接：https://blog.csdn.net/Elson_tju/article/details/47306877

版权

在网页制作中，作者在科二失败后专注于创建登录界面，编写了近300行CSS代码，分享了两个关键技巧：1) 子元素需设置position:absolute;以配合父级position:absolute;改变高度；2) 使用padding扩大a标签hover效果的区域。

摘要由CSDN通过智能技术生成

科二挂了。。。怒刷登录界面，也是新写近300行css代码，酸爽无比

效果：

html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>

<!--导航栏-->
<div class="nav">
    <div class="header">
        <div class="header_left">
            <a href="../index.html"><h2 style="font-family:logo">校园生活</h2></a>
            <ul>
                <li><a href="../index.html" style="font-family: MyFont-light">主页</a></li>
            </ul>
        </div>
        <div class="header_right">
            <ul>
                <li><a href="#" style="font-family: MyFont-light">登录</a></li>
                <li><a href="#" style="font-family: MyFont-light">注册</a></li>
            </ul>
        </div>
    </div>
</div>

<!--登录窗口-->
<div class="row">
    <div class="row_top"><span style="font-family: MyFont-light;&#