网页编程自学历程一:编写一个静态网页框架

本文涉及到的转载内容:http://blog.csdn.net/ljl157011/article/details/16842669

                                            http://blog.csdn.net/jumtre/article/details/50783735

特别提示:本文涉及到的内容是基于html基础而编写的,对于毫无头绪的网友建议先通过w3school学习一下HTML的基础知识,然后推荐一个免费的HTML5教程视频:http://study.163.com/course/courseMain.htm?courseId=267002  再之就是,本文中涉及到的网页其中的每个块的属性设置主要都是放置在





     你的名字:虽不知道你的名字,但我们终究会再次相遇


         动画 剧情 爱情    2016-12-2


         播放:20万  弹幕:1万  |  硬币 3258  |  追番 11万

观看视频如有卡顿、无法缓冲等问题,请点击测试并返回结果哦

 发送弹幕 


呵呵哒

请先后发表评论(・ω・)

发表
评论





垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复




呵呵哒

请先后发表评论(・ω・)

发表
评论


bilibili
关于我们 友情链接 哔哩哔哩周边
联系我们 加入我们 官方认证
传送门
帮助中心 高级弹幕 活动专题页
侵权申诉 分院帽计划 活动中心
用户反馈论坛 壁纸站 名人堂
 
     
手机端下载 新浪微博 官方微信
     




合作机构

上海东方传媒集团有限公司

广播电视节目制作经营许可证:(沪)字第1248号

网络文化经营许可证:沪网文[2013]0480-056号

信息网络传播视听节目许可证:0910417

互联网ICP备案:沪ICP备13002172号-3

沪ICP证:沪B2-20100043

违法不良信息举报邮箱:[email protected]

违法不良信息举报电话:4000233233 转 3

上海互联网举报中心

以下是效果图:

图一:

网页编程自学历程一:编写一个静态网页框架_第1张图片
图二:
图三: 网页编程自学历程一:编写一个静态网页框架_第2张图片
图四: 网页编程自学历程一:编写一个静态网页框架_第3张图片
废话不多说,现在然我们来分析一下这整个框架:(我的框架布局是固定布局,关于网页布局可以阅读以下这篇文章:http://blog.csdn.net/ljl157011/article/details/16842669)
首先,一个网页需要一个头部,我们用来定义,我是这样做的:
1.明确我们的主题——新海诚的“你的名字”视频播放网站;
2.在网上找一张图片作为我们网页头部的背景(图片事先裁剪好),以上的代码中我在网上找到的方法是添加属性:background:url(你的名字4.jpg) no-repeat center center,其中的“你的名字4.jpg”为图片的路径;
3.用
4.对于网页头部的导航链接,我们将其放置于一个块中,并将其设置为白色,这里主要要提的一个效果是,对这个块的背景颜色进行透明处理,和HTML5中可以实现的方法是background:rgba(255,255,255,0.5),rgba中的前三项用来表示其背景颜色,最后一项是指透明度,这里是半透明;(其它的设置背景色透明的方法可阅读以下一篇文章:http://blog.csdn.net/jumtre/article/details/50783735)
   

然后,头部之下,我们另添加了一个块
,其用来放置一些视频内容的一些基本信息,例如标题,视频类型之类的,这里我们通过简单的

标签,换行标签
等来进行调整,详见我提供的源代码。

   




     你的名字:虽不知道你的名字,但我们终究会再次相遇


         动画 剧情 爱情    2016-12-2


         播放:20万  弹幕:1万  |  硬币 3258  |  追番 11万

现在,来进入我们框架的主要部分——视频播放
首先,设置一个块 
其基础设置为 div.main{width: 1270px;height:550px;background:#f6f9fa;},在里面我们设置了两个块
    	
观看视频如有卡顿、无法缓冲等问题,请点击测试并返回结果哦

 发送弹幕 

其次呢,我们还需要设置一个块用来存放用户的弹幕记录。
对于这一块,我们的设定是一个表格,其中包含发送弹幕在视频播放中的时间点、发送的内容、发送的日期时间等这几项。(这里需要掌握一些HTML表格的基本知识,详见:http://www.w3school.com.cn/html/html_tables.asp)
对于这一块,我们将设置三个部分:标题、表格项、表格内容,以下是比较详细的设置:
1.标题   对于标题,在表格标签中我们直接用标签来进行定义,而其默认的的排布是居中排布,如果你想让其靠左排布或者是靠右排布,直接在标签中添加属性align(其值可以为left、right、center氛围),另外,为了美观,我们另外在标签中添加属性,即frame="below"(即在表格的下方田间一条分割线);
2.表格项  我们这里的表格项有三项:时间、弹幕内容、发送时间,由于美观性的缘故,我们想将这几项由分割线来分隔(表格边框的效果没那么好),所以我分别用三个表格来放置这三项,由于表格是块级元素(块级元素独占一行),故我们还会用到浮动(均采用左浮动),与标题类似,我们在
标签中添加属性,即frame="vsides";
3.表格内容  这里我们直接放置一个三列的表格(即在
标签中放置三个
标签),这里我们就直接设置表格内容了
对于表格这一块呢,我们要想合理布局,设置表格的单位框大小是有必要的,即设置长宽(属性width和height的值),或是设置内容物的水平排布(靠左排布、居中排布、靠右排布);
    	
接下来,我们进入第四块,即论坛部分:
首先,我们先放置一个评论输入框,注意各部分的对称布局(可以参照现有的网站和个人的感官);
接着就可以放置别人的评论了,很简单,就是放置几个块,然后在里面设置内容即可,具体背景颜色,具体布局有个人设计想法而不同;
    

呵呵哒

请先后发表评论(・ω・)

发表
评论





垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复



垚的彼岸

我们好像在哪见过

#5 12015-10-28 11:39 参与回复




呵呵哒

请先后发表评论(・ω・)

发表
评论


最后即是页脚,补充该网站的具体信息和一些用户友好型导航链接等(这里我是采用表格的形式,而HTML5中给出了具体的导航链接定义方法,即用
   
bilibili
关于我们 友情链接 哔哩哔哩周边
联系我们 加入我们 官方认证
传送门
帮助中心 高级弹幕 活动专题页
侵权申诉 分院帽计划 活动中心
用户反馈论坛 壁纸站 名人堂
 
     
手机端下载 新浪微博 官方微信
     




合作机构

上海东方传媒集团有限公司

广播电视节目制作经营许可证:(沪)字第1248号

网络文化经营许可证:沪网文[2013]0480-056号

信息网络传播视听节目许可证:0910417

互联网ICP备案:沪ICP备13002172号-3

沪ICP证:沪B2-20100043

违法不良信息举报邮箱:[email protected]

违法不良信息举报电话:4000233233 转 3

上海互联网举报中心



你可能感兴趣的:(编程,html,css笔记)