博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
异说html初学实战邮箱页面布局
阅读量:6546 次
发布时间:2019-06-24

本文共 5166 字,大约阅读时间需要 17 分钟。

hot3.png

我们想做一个网页,首先该干什么呢?

当然是先想做个什么样的网页,比如邮箱,门户等等。

想好之后呢?

我们先布局,首先肯定来个登录页面。

登录页面从哪找呢?

一个由美工提供或者自己用搜索引擎将图片下载和右击图片点属性选中网上的图片链接过去

有了登录页面图,我们首先多建立几个.html文件进行编写

先做好登录页面,看到这个图片,我们用什么划分和进行页面布局呢?

172214_czyb_2663803.jpg

我们用学过的表格进行大致的定位,确定图片宽高多少,然后依据图片提供的参数对应的向表格里提供图片的宽高

有时第二行表格框架位置并不理想,因此我们需要使用faststone capture的软件测量一下像素比例。

173536_W5iX_2663803.png

                                                
        
   
        
                                      
            
                                   
                
              
                
                
            
 
 
 
                 
                                               
            
    
        
        
                     
         用户名:
      密   码:
                                                                                            
      
                        
找回密码
注册用户                                                         
    

成功后如图,还记得我在注释上写了什么吗?

181745_SpSf_2663803.png

再做好网页框架

    
              
        
                                
        
                             
        
                      
        
                     
                                                   
                                                   

我将我做框架的html文件复制到其他路径和按照默认边框显示方便大家观看

182604_uuRf_2663803.png

我们指定A边框里内容的页面也就是注释说的指定横向框架页面为top.html,我们放入几张图片到盘符相对路径

红箭头所指就是我们放入的图片

183429_z3aB_2663803.png

开始到top.html写入内容

    

我们然后到右边框写入内容,记住我到注释里写的是我们指定的是right.html

            
                
                
            
 
 
            
                
                
            
 
 
            
                
                
            
 
 
    
你成功登录了清辉在线邮箱系统
    

我们再到左边框left.html写入内容

    
               
        
            
                
                
            
 
 
        
         
                 
新邮件
                                                               < !--
为超链接指定页面为newmail.html,                                                               target="r1"还记得我在上面写了为框架命名吗?页面指定跳转到右框架-->                
收件箱
        
草稿箱
        
写邮件
        
地址本
                 
安全退出
                                                                  
                         
    

我们开始进入写好的登录页面看看,再点击进入邮箱,看到了如下图

185515_oWfB_2663803.png

185601_8QCM_2663803.png

我们在超链接新邮件这里指定页面为newemail.html写入内容

            

hello,Sily

    

我们在往收件箱指定的newinbox.html写入

            

未读邮件

        
                          
                                                                                                                    编号                标记                发件人                
标   题
                日   期                                                1、                未读                admin@hui.com                欢迎注册清辉在线邮箱                2005-02-01                                                2、                未读                lisdy@so.com                测试!!!                2005-04-09                                                    3、                未读                lis@so.com                测试!!!                2005-04-09                                                4、                未读                ls@s.com                测试!!!                2003-04-04                                                5、                未读                lsday@co.com                测试!!!                2006-04-09                                
        
                                                                                                                                                                                                                                                                                                      
             共有邮件5封  每页20封  共一页  第1页  
上一页  
下一页                                            

如图

190810_ETGu_2663803.png

我们再开始往写邮件指定的writemail.html写入

            
            
                                                                                                                                                                                                                                        
        
               
        
上传文件
        
匿名    
        
公开
        
                        <!--以图片定义按钮-->        
    

如图

191631_XVob_2663803.png

我们再到地址本指定的address.html写入

    
        
上海        
北京        
广州        
新疆                 
    

        

如图

191956_9rjT_2663803.png

我们一开始在安全退出的指定页面写了内容,不记得了吗?登录页面想起没有?点安全退出就开新窗口显示登录页面了

192538_vqKl_2663803.png

ps:

其实这个案例来自韩老师的视频,我尽量默写和模仿这个例子用了5个小时左右吧,毕竟自身基础也不是特别好,本来其实做这事不只这一种方法,前提要有效果:一、表格框架文本域按钮什么的,二、iframe,当他人或是自己完成后用iframe嵌套,相当于盗链了,三、图片映射map。

我写时的感受,的确很郁闷,表格实在太多了,好多冗余代码。目前刚入门知识有限,没做好,可以用丑形容,请大家见谅了。

转载于:https://my.oschina.net/hillsowl/blog/644729

你可能感兴趣的文章
如何批量修改文件后缀的方法
查看>>
Effective STL 笔记
查看>>
[LeetCode] 1. Two Sum
查看>>
超时时间已到。在操作完成之前超时时间已过或服务器未响应。 (.Net SqlClient Data Provider)(转)...
查看>>
POJ2538 ZOJ1884 UVA10082 WERTYU【输入输出】
查看>>
HDU5620 KK's Steel(C++语言版)
查看>>
旋转卡壳
查看>>
2016/10/09
查看>>
自定义HorizontalScrollView的scrollBar
查看>>
c++学习笔记和思考
查看>>
27.Docker集群部署
查看>>
DNS保存
查看>>
IOS 多线程02-pthread 、 NSThread 、GCD 、NSOperationQueue、NSRunLoop
查看>>
第一周冲刺第五天博客
查看>>
[LeetCode]Longest Increasing Path in a Matrix
查看>>
C++基础之适配器
查看>>
集合set-深入学习
查看>>
C#语言学习——面向对象的几大原则
查看>>
zk 常用资料整理(转)
查看>>
JavaScript 字符串操作
查看>>