视频网站大杂烩--HTML+CSS练手项目1【Frameset】
【本文为原创，转载请注明出处】
技术【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】的更多相关文章
- 仿百度图片首页--HTML+CSS练手项目1【Table】
[本文为原创,转载请注明出处] 技术[CSS+HTML] 布局[Table] 图片准备[百度图标.10张不同类型图] --------------------------------------- ...
- 10个有趣的Python教程，附视频讲解+练手项目。
从前的日色变得慢,车.马.邮件都慢 一生只够爱一门编程语言 从前的教程也好看,画面精美有样子 你看了,立马就懂了 Python最性感的地方,就在于它的趣味性和前沿性,学习Python,你总能像科技节的 ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- Python之路【第二十四篇】：Python学习路径及练手项目合集
Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...
- 80个Python练手项目列表
80个Python练手项目列表 我若将死,给孩子留遗言,只留一句话:Repetition is the mother of all learning重复是学习之母.他们将来长大,学知识,技巧.爱情 ...
- webpack练手项目之easySlide（三）：commonChunks（转）
Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...
- webpack练手项目之easySlide（二）：代码分割（转）
在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...
- 推荐：一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
- webpack练手项目之easySlide（三）：commonChunks
Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...
随机推荐
- SNPsnap | 筛选最佳匹配的SNP | 富集分析 | CP loci
一个矛盾: GWAS得到的SNP做富集分析的话,通常都会有强的偏向性. co-localization of GWAS signals to gene-dense and high linkage d ...
- C# xml转化为类集合
XmlDocument doc = new XmlDocument(); doc.Load(HttpContext.Current.Server.MapPath("~/WebConfig/w ...
- 微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
- CentOS7静默安装Oracle 18g数据库(无图形化界面)
说明: 因为是静默安装,所以我们不需要安装图形界面 准备:下载Oracle软件 官方网站:http://www.oracle.com/technetwork/database/enterprise-e ...
- 使用bugly热更新时自定义升级弹窗的UI样式
项目的热更新用的bugly,不过一直都只是使用他自带的升级弹窗. 不过UI小姐姐说弹窗太丑了,要自定义. bugly有提供自定义UI的官方文档:https://bugly.qq.com/docs/us ...
- zookeeper+Dubbo环境搭建及简单Demo
1 安装zk https://www.cnblogs.com/feifeicui/p/11175502.html 2 安装 dubbo-admin https://www.cnblogs.com/fe ...
- matlab学习笔记13_1 函数返回值
一起来学matlab-matlab学习笔记13函数 13_1 函数返回值 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://blog.csdn.net/qq_36556 ...
- JS调用onBackPressed
需求: 安卓页面webview加载H5页面,H5页面能能返回到安卓页面 import android.os.Bundle; import android.support.v7.app.AppCompa ...
- unittest===unittest 的几种执行方式
#demo.py import requests import json class RunMain: def __init__(self, url, method, data=None): self ...
- xpath库学习
xpath解析是我们在爬虫中最常用也是最通用的一种数据解析方式. 环境安装 pip install lxml 解析原理 使用通用爬虫爬取网页数据 实例化etree对象,且将页面数据加载到该对象中 使用 ...