10.png
虽说简易，但对于啥也不会的小白的我一点也不简易。但经过学习和借鉴其他大佬的制作方法后勉强做出一个像样的网页,但做完以后还小有成就感
它的模型来源于QQ邮箱登录页面：
11.png
1.先下载好网页制作的软件(我用的是sublime)，利用时间学习html和css的基本语法，基本可以把大框架搭好
登录qq邮箱主体
2.我首先制作的是最难的部分：表单。虽然在书中学了不少表单的知识，但确实实在不够用，有时做到一半的时候要借助搜索引擎或者寻求其他同学的帮助，我加了许多 【表示空格】来把“忘了密码？”和“注册新账号”隔开(我后来才知道可以用float语法来制作)
登录qq邮箱  
  
下次自动登录
扫码快捷登录
忘了密码?                                         注册新账号
12.png
3.用float【左右浮动】把页面分成左右两个框架，再在两个框架的上下各加一段文字，上面的我又用了大量的 (实在迫不得已，不然会出现颜色断层)，接着对框架高度宽度进行严格修改(保证不出现滚动条)，文字大小颜色、背景颜色也套用css中的style语法进行修饰，颜色的话，可以利用颜色代码表来寻找相应的颜色(可能我找的颜色稍有误差。。)，在要加超链接的地方套用相应语法，就可以做出超链接的效果
需超链接的部分
13.png
4.最后加上那个图片，适当调整下图片的大小，它所在的位置可能挺难调的，最后变成这样，也算大功告成了
10.png
网页制作的代码如下：
.content .login{
float:left;
border:1px solid #1d5494;
}
.content .login2{
float:right;
text-align:center;
border:1px solid #1d5494;
}
h1 {background-color: #C4E1FF}
table{border:1px solid silver;}
#p1{font-size:20px;}
登录qq邮箱 MAil QQ邮箱                                                                                                                                                                                          基本版 | English | 手机版 | 企业邮箱
QQ邮箱，常联系！
2500年前，人们飞鸽传书
184年前，莫尔斯发明了电报
51年前，第一封电子邮件发出
今天，QQ邮箱联系你、我、他
  
  
下次自动登录
扫码快捷登录
忘了密码?                                         注册新账号
关于腾讯 | 服务条款 | 隐私政策 | 客服中心 | 联系我们 | 帮助中心 | ©1998 - 2020 Tencent Inc. All Rights Reserved.
发布评论