WEB前端开始学习 7.15

最新推荐文章于 2024-10-31 20:06:00 发布

LiangKJZ

最新推荐文章于 2024-10-31 20:06:00 发布

阅读量375

点赞数 2

文章标签： HTML CSS 网页设计网易邮箱前端开发

本文链接：https://blog.csdn.net/LiangKJZ/article/details/125808973

版权

1.费了九牛二虎之力写完了作业，真不容易啊，遇到了很多之前没遇到的问题，到底还是赶在5点半之前写完了，写太慢了，写完还有点挫败感TzT。

2.希望能在后两天内写完那个小项目，不然越拖越多，后面写起来很烦吧。哎，现在自己还太嫩了，继续努力吧。

3.今天最没写明白的作业

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./网易邮箱.css">
    <title>网易邮箱</title>
</head>

<body>
    <div>


        <header class="width">
            <div class="head-left">
                <a href="#">
                    <img src="./网易邮箱图片素材/163logo.gif" alt="1" width="120%" style="margin:5px 0">
                </a>
            </div>
            <ul>
                <li>
                    <a href="#">免费邮</a>
                </li>
                <li>
                    <a href="#">企业邮</a>
                </li>
                <li>
                    <a href="#">VIP邮箱</a>
                </li>
                <li>
                    <a href="">帮助</a>
                </li>
            </ul>
        </header>
        <main class="width">
            <div class="main-left">
                <img src="./网易邮箱图片素材/imap.jpg" alt="1" width="120%">
                <ul>
                    <li>
                        163/126/yeah三大免费邮箱均默认开放
                    </li>
                    <li>
                        全面支持iphone/ipad及Android等系统
                    </li>
                    <li>
                        客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录
                    </li>
                </ul>
            </div>
            <div class="main-right">
                <div>
                    <img src="./网易邮箱图片素材/loginIcon.gif" alt=""
                        style="vertical-align: middle; margin: 0 5px;"><span>普通登录</span>
                </div>
                <form action="">
                    <ul>
                        <li class="jianju">
                            <span>用户名</span>
                            <input type="text">
                            <span>@163.com</span>
                        </li>
                        <li class="jianju">
                            <span>
                                <span>密</span>
                                <span>码</span>
                            </span>

                            <input type="text">
                        </li>
                        <li class="jianju">
                            <span>
                                <span>版</span>
                                <span>本</span>
                            </span>
                            <select name="版本">
                                <option value="1">1</option>
                                <option value="moren" selected>默认</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </li>
                        <li class="denglu">
                            <input type="checkbox" name="hobby" value="zq" /><span>自动登录</span>
                            <input type="checkbox" name="hobby" value="lq" /><span>SSL</span>
                        </li>
                        <li class="denglu">
                            <button type="submit">登陆</button>
                            <button type="reset">注册</button>
                        </li>
                    </ul>
                </form>
            </div>
        </main>
        <footer>
            <div>
                <img src="./网易邮箱图片素材/netease_logo.gif" alt="">

                <ul>
                    <li>
                        <a href="">关于网易</a>
                    </li>
                    <li>
                        <a href="">免费邮</a>
                    </li>
                    <li>
                        <a href="">官方博客</a>
                    </li>
                    <li>
                        <a href="">客户服务</a>
                    </li>
                    <li>
                        <a href="">隐私政策</a>
                    </li>
                    <span>|</span>
                    <span>网易公司所有权&copy;2015-2018</span>
                </ul>
            </div>
        </footer>
    </div>
</body>

</html>

4.然后是样式

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

body>div {
    width: 900px;
    margin: 0 auto 20px;
}

.width {
    width: 900px;
    height: 90px;

}

.head-left {
    float: left;
}

.width>ul {
    line-height: 90px;
    width: 240px;
    float: right;
}

.width>ul>li {
    margin: 0 5px;
    float: left;
}

.main-left {
    float: left;
}

.main-left img {
    margin-bottom: 10px;
}

.main-left li {
    font-size: 14px;
    width: 310px;
    margin: 5px 0;
    list-style: disc;
    font-weight: 200;
    position: relative;
    left: 50px;
}

.main-right {
    float: right;
    width: 400px;
    height: 350px;
    border: 2px solid black;
}

.main-right>div {
    margin: 20px 10px;
}

.main-right>form {
    margin: 50px;
}

.main-right>form li {
    margin: 25px 0;
}

.main-right>form .jianju>span {
    display: inline-block;
    width: 3em;
}

.jianju>span>span:first-of-type {
    float: left;
}

.jianju>span>span:last-of-type {
    float: right;
}

.denglu {
    position: relative;
    left: 60px;
}

.denglu>span {
    margin: 0 5px;
}

footer {
    width: 900px;
    height: 50px;
    float: left;
    background-color: rgb(240, 240, 240);
    margin: 0 auto;
    
    
}

footer ul {
    width: 600px;
    float: right;
    line-height: 50px;
}

footer ul>li {
    float: left;
    margin: 0 5px;
}