视频网站大杂烩--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的 ...
随机推荐
- Linux下安装和使用MySQL数据库
因为这个工具需要用到MySQL,https://github.com/ENCODE-DCC/caper,不得不再Linux服务器上安装. 首先服务器本身是有MySQL的, $ /usr/bin/mys ...
- scrapy中的Pipeline
当Item在Spider中被收集之后,它将会被传递到Item Pipeline,这些Item Pipeline组件按定义的顺序处理Item. 每个Item Pipeline都是实现了简单方法的Pyth ...
- mysql数据库架构设计与优化
mysql数据库架构设计与优化 2019-04-23 20:51:20 无畏D尘埃 阅读数 179 收藏 更多 分类专栏: MySQL 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...
- SQLServer常用运维SQL整理(转)
转载地址:https://www.cnblogs.com/tianqing/p/11152799.html 今天线上SQLServer数据库的CPU被打爆了,紧急情况下,分析了数据库阻塞.连接分布.最 ...
- OpenShift 4.2环境离线部署Operatorhub
缺省离线环境安装的ocp4的Operatorhub是没有内容的.详细离线文档参考官网文档 https://docs.openshift.com/container-platform/4.2/opera ...
- 工控随笔_C#连接PLC_之_C#入门_03_基本数据类型
using System; using System.Collections.Generic; using System.Linq; using System.Text; //namespace 关键 ...
- ubuntu修改apache端口号
第一步 sudo vi /etc/apache2/ports.conf 修改监听端口以及主机端口为8080 NameVirtualHost *:8080 Listen 8080 第二步 sudo vi ...
- 【python基础】easydict的安装与使用
前言 easydict允许以属性的方式访问dict类型,且可以递归地访问,使用起来比较方便. 安装 pip install easydict 使用 参考 1. easydict; 完
- jquery预加载显示百分比
jquery预加载显示百分比 <pre> <img class="bj loadimg" loadimg="/weiqingshu/images/1/b ...
- [转帖]BurpSuite简介
BurpSuite简介 https://bbs.ichunqiu.com/thread-54760-1-1.html BurpSuite ,这是一个辅助渗透的工具,可以给我们带来许多便利.Burp 给 ...