视频网站大杂烩–HTML+CSS练手项目1【Frameset】

更新时间:2023-04-03 02:57:04 阅读：评论：0

【本文为原创，转载请注明出面积最大的大学处】

技术【css+html】布局【framet】

——————————————————————————R抗大精神12;—————————

步骤1 framet 布局

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>视频网站大杂烩</title>    <link rel="stylesheet" href=""></head><framet cols="200px ,*">    <frame src="html/list.html" noresize="noresize"/>    <frame name="video" src="html/video.html" noresize="noresize"/></framet></html>

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>video</title>    <link rel="stylesheet" href=""></head><framet rows="33.33%,33.33%,*">    <framet cols="33.33%,33.33%,*">        <frame src="/d/file/titlepic/>        <frame src="http://www.iqiyi.com/"/>        <frame src="https://v.qq.com/"/>    </framet>    <framet cols="33.33%,33.33%,*">        <frame src="/d/file/titlepic/www.mgtv.com        <frame src="/d/file/titlepic/index.shtml      带有数字的成语有哪些  <frame src="https://www.bilibili.com/"/>    </framet>    <framet cols="33.33%,33.33%,*">        <frame src="http://www.73mao.com/"/>        <frame src="/d/file/titlepic/>        <frame src="https://www.dadatutu.com/"/>    </framet></framet></html>

<!doctype html><html lang="en"><head>    <meta仙溪 chart="utf-8">    <title>video</title></head><framet rows="33.33%,33.33%,*">    <framet cols="33.33%,33.33%,*">        <frame src="/d/file/titlepic/>        <frame src="http://www.iqiyi.com/"/>        <frame src="https://v.qq.com/"/>    </framet>    <framet cols="33.33%,33.33%,*">        <frame src="/d/file/titlepic/www.mgtv.com        <frame src="/d/file/titlepic/index.shtml     放飞梦想歌曲   <frame src="https://www.bilibili.com/"/>    </framet>    <framet cols="33.33%,33.33%,*">        <frame src="http://www.73mao.com/"/>        <frame src="/d/file/titlepic/>        <frame src="https://www.dadatutu.com/"/>    </framet></framet></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;*/

步骤4 知识点整理

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

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

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

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

————————————————————————————————————

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

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

本文发布于:2023-04-03 02:55:19，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/20a6a2dfccba413abcc10607ee433011.html

本文word下载地址：视频网站大杂烩–HTML+CSS练手项目1【Frameset】.doc

本文 PDF 下载地址：视频网站大杂烩–HTML+CSS练手项目1【Frameset】.pdf