【head布局思路 _布局】 | IT修真院·坑乎

head布局思路

我也踩过这个坑( 4 )

已统计您的踩坑,无需重复点击

回答(6)

布局

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        body{
            background: #eff0f4;
        }

        .box1{
            font-family:"黑体";
            font-size: 16px;
            color: white;
            line-height: 45px;
            height: 45px;
            width: 20%;
            background-color: #66cccc;
            text-align: center;
            float: left;
        }
        .box2{
            font-family: "黑体";
            font-size: 16px;
            color: white;
            line-height: 45px;
            height: 45px;
            width: 60%;
            background-color: #66cccc;
            text-align: center;
            float: left;
        }
        .box3{
            font-family:"黑体";
            font-size: 16px;
            color: white;
            line-height: 45px;
            height: 45px;
            width: 20%;
            background-color: #66cccc;
            text-align: center;
            float: right;
        }
        .box4{
            height: 45px;
            width: 100%;
            margin: 8px 0 0 0;
            float: left;
            background-color: white;
        }
        .box5{
            height: 30px;
            width: 20%;
            border-right: 1px solid #66cccc;
            float: left;
            text-align: center;
            margin: 0.469em 0;
        }
        .box6{
            outline: none;
            height: 100%;
            border: white;
            width: 79%;
            float: right;
            margin: 3px 0 0 0;
        }
        .box7 {
            height: 45px;
            width: 100%;
            margin: 8px 0 0 0;
            float: left;
            background-color: white;
        }
        .box8{
            height: 30px;
            width: 20%;
            border-right: 1px solid #66cccc;
            float: left;
            text-align: center;
            margin: 0.469em 0;
        }
        .box9{
            outline: none;
            height: 100%;
            width: 79%;
            float: right;
            margin: 3px 0 0 0;
        }
        .box10{
            width: 65px;
            height: 20px;
            margin: 10px 10px;
            float: right;
        }
        input{
            width: 90%;
            height: 81%;
            font-size: 17px;
            outline: none;
            border: none;
            padding-left: 20px;
        }
        a:link{
            a{
                color: #66cccc;
            }
        }
    </style>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
<div class="box1">注册</div>
<div class="box2">登陆</div>
<div class="box3">关闭</div>
<div class="box4">
    <div class="box5"><img src="image/ipone.png" width="20px" height="30px"></div>
        <div class="box6"><input type="text" maxlength="8" style="height: 80%" placeholder="请输入手机号"></div>
</div>
<div class="box7">
    <div class="box8"><img src="image/suo.png"width="20px" height="30px"> </div>
    <div class="box9"><input type="text" maxlength="8" style="height: 80%" placeholder="请输入密码"></div>
</div>
<div class="box10"> <a href="http://htmlpreview.github.io/?https://github.com/1947324563/start-a-project/blob/9c4c050c56913cd7811e59b62eaf42e5ef73c043/%E4%B9%9D%E5%AE%AB%E6%A0%BC.html"><p><span id="#66cccc">忘记密码</span></p></a></div>
</body>
</html>

编辑于2024-04-26

时间排序

热门排序

[真传弟子]JS-关楠
1

这个。。class的起名，不要这种box1、box2...你想想以后你在看你的代码的时候，一眼都是box，想找一个要对半天，去看一下比较常用的命名规范；
还有就是不太懂你说的，任务4其实就是给人看的么，最多就是input输入些东西，a标签点点跳转什么的，前期只要把样子做好就是你的任务，至于交互什么的现在不用考虑

查看全部>

编辑于2018-04-10
[上海|荣耀师兄]JS-杨亚洲
1

看了半天我大概理解了你的意思，你说的点击效果是吧，主要指的是JS交互效果，现在还没有学到，别着急后面有的。
1、不得不佩服你的命名方式。学学css规范吧。
2、
官网从css任务一就开始，要求使用外联的css,你不仅有有内联的样式，居然还有行内样式。
maxlength:8，难道手机号只有8位，难道不是11位？这里的type可以使用number
下面的输入框要用，type=password.啊。
3、老铁，学习不能好高骛远啊，你看看你写的代码？还是脚踏实地学好基础吧

查看全部>

编辑于2018-04-10
[散修弟子]CSS-6542
1

header那里用float left的话有问题吧。
4扩展性：去掉header的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响。

查看全部>

编辑于2018-07-13
[武汉|结业弟子]JS-黄震
0

前期css实现是就是静态页面，写样式，从js开始才是交互

查看全部>

编辑于2018-04-10
[真传弟子]JS-火建强
0

只能一步一步来吧，都是从这样过来的，一步步摸索，然后越来越好，加油

查看全部>

编辑于2018-08-22
[北京|]JS-
0

用input完成主要练习定位

查看全部>

编辑于2019-11-04

去第页