【本文为原创，转载请注明出处】

技术【CSS+HTML】   布局【Frameset】

------------------------------------------------------------------------------------------------------------

步骤1  Frameset 布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>视频网站大杂烩</title>

    <link rel="stylesheet" href="">

</head>

<frameset cols="200px ,*">

    <frame src="html/list.html" noresize="noresize"/>

    <frame name="video" src="html/video.html" noresize="noresize"/>

</frameset>

</html>

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>video</title>

    <link rel="stylesheet" href="">

</head>

<frameset rows="33.33%,33.33%,*">

    <frameset cols="33.33%,33.33%,*">

        <frame src="http://www.360kan.com/"/>

        <frame src="http://www.iqiyi.com/"/>

        <frame src="https://v.qq.com/"/>

    </frameset>

    <frameset cols="33.33%,33.33%,*">

        <frame src="https://www.mgtv.com/"/>

        <frame src="https://tv.sohu.com/"/>

        <frame src="https://www.bilibili.com/"/>

    </frameset>

    <frameset cols="33.33%,33.33%,*">

        <frame src="http://www.73mao.com/"/>

        <frame src="http://www.hanju.cc/"/>

        <frame src="https://www.dadatutu.com/"/>

    </frameset>

</frameset>

</html>

list.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>video</title>

</head>

<frameset rows="33.33%,33.33%,*">

    <frameset cols="33.33%,33.33%,*">

        <frame src="http://www.360kan.com/"/>

        <frame src="http://www.iqiyi.com/"/>

        <frame src="https://v.qq.com/"/>

    </frameset>

    <frameset cols="33.33%,33.33%,*">

        <frame src="https://www.mgtv.com/"/>

        <frame src="https://tv.sohu.com/"/>

        <frame src="https://www.bilibili.com/"/>

    </frameset>

    <frameset cols="33.33%,33.33%,*">

        <frame src="http://www.73mao.com/"/>

        <frame src="http://www.hanju.cc/"/>

        <frame src="https://www.dadatutu.com/"/>

    </frameset>

</frameset>

</html>

video.html

步骤2 CSS样式【大小、位置、颜色、图片】

css要求：左边导航栏列表居中，颜色，字体大小

*{

    margin:0px;

    padding: 0px;

}

body{

    background-color: #f1f1f1;

}

ul{

    /* 消除有序列表的项目符号 list-style-type:none; */

    list-style-type:none;

}

li{

    width: 100%;

    height: 40px;

    line-height:40px;;

}

li a{

    text-decoration: none;

    display: block;

    text-align: center;

    font-size: 18px;

    font-family: "Book Antiqua";

    color: #000;

}

li a:hover{

    background-color: #555;

    color: #FFFFFF;

}

.list-homepage{

    background-color: #4CAF50;

    color: white;

}

/* 消除有序列表的项目符号 list-style-type:none; */

/*<li>里面的<a>内容居中：display: block;  text-align: center;*/

list.css

步骤4 知识点整理

1.消除有序列表的项目符号   list-style-type:none;

2.<li>里面的<a>内容居中：display: block; text-align: center;

3.垂直导航栏【未整理】

4.调用网页适应frame大小  【未整理】

------------------------------------------------------------------------------------------------------------

【完整代码链接：还未上传，可私聊我】

【不足之处望指出，一起努力学习前端】

视频网站大杂烩--HTML+CSS练手项目1【Frameset】的更多相关文章

  1. 仿百度图片首页--HTML+CSS练手项目1【Table】

    [本文为原创,转载请注明出处] 技术[CSS+HTML]   布局[Table] 图片准备[百度图标.10张不同类型图] --------------------------------------- ...

  2. 10个有趣的Python教程，附视频讲解+练手项目。

    从前的日色变得慢,车.马.邮件都慢 一生只够爱一门编程语言 从前的教程也好看,画面精美有样子 你看了,立马就懂了 Python最性感的地方,就在于它的趣味性和前沿性,学习Python,你总能像科技节的 ...

  3. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  4. Python之路【第二十四篇】：Python学习路径及练手项目合集

      Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...

  5. 80个Python练手项目列表

    80个Python练手项目列表   我若将死,给孩子留遗言,只留一句话:Repetition is the mother of all learning重复是学习之母.他们将来长大,学知识,技巧.爱情 ...

  6. webpack练手项目之easySlide（三）：commonChunks（转）

    Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...

  7. webpack练手项目之easySlide（二）：代码分割（转）

    在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...

  8. 推荐：一个适合于Python新手的入门练手项目

    随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...

  9. webpack练手项目之easySlide（三）：commonChunks

    Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...

随机推荐

  1. 启用IIS Express SSL(Https)的注意事项

    2年前搞国外的信用卡支付对接,必须用SSL方式调用第三方支付公司的接口,本地调试需要启用IIS Express的SSl,最近又搞类似需要SSL的项目,忘记怎么设置的了,本以为直接将原来的http后面加 ...

  2. C# 序列化与反序列化之xml对属性或者字段的子类化的子对象进行序列化的解决方案

    C# 序列化与反序列化之xml对属性或者字段的子类化的子对象进行序列化的解决方案 xml序列化涉及到XmlRoot,XmlInclude,XmlElement,XmlAttribute,XmlType ...

  3. Eclipse安装代码反编译插件Enhanced Class Decompiler

    在开发过程中,如果想查看引入资源的源代码,可以借助eclipse的插件Enhanced Class Decompiler轻松实现,下面我来讲解一下如何安装使用这个插件. 1.打开Eclipse菜单-& ...

  4. Keras split train test set when using ImageDataGenerator

    Keras split train test set when using ImageDataGenerator I have a single directory which contains su ...

  5. Centos7安装完成后设定基本的网络配置

    Centos7设定网络 新安装的centos7,网络默认是不启动的,需要人为的手工修改配置文件,在这里把这个过程简要的记录一下. 设定ip地址与mac地址自定义 [root@web ~]# cd /e ...

  6. IPv4分类

    IPv4地址按逻辑层次分为五类 A类 保留给政府机构 A类地址第1字节为网络地址,其它3个字节为主机地址.它的第1个字节的第一位固定为0. A类地址网络号范围:1.0.0.0 - 126.0.0.0 ...

  7. Qt开发经验小技巧31-40

    代码判断MSVC编译器版本. if (_MSC_VER == 1800) MSVC++ 14.0 _MSC_VER == 1900 (Visual Studio 2015) MSVC++ 12.0 _ ...

  8. （转载）理解Spatial Transformer Networks

    理解Spatial Transformer Networks 转载于:知乎-SIGAI 书的购买链接 书的勘误,优化,源代码资源 获取全文PDF请查看:理解Spatial Transformer Ne ...

  9. element ui 下拉框绑定对象并且change传多个参数

    废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...

  10. [PHP] 浅谈 Laravel Authentication 的 guards 与 providers

    从文档的简单介绍上来讲,有一些抽象. 个人感觉,对于概念上的大多数不理解主要还是来自于 文档不是讲设计思路,而是实际操作. 查看英文文档,通常来说可以给你最准确的直觉,而本地翻译一般比较字面或者带有理 ...