颜云墨yanyunmo0313查看:3 回复:3 评论:3 创建时间:2024-03-23T21:26:31用户:颜云墨yanyunmo0313查看:3 回复:3 评论:3 创建时间:2024-03-23T21:26:31
。。。C站的第二个版本 文件：main.html <!DOCTYPEhtml><htmllang="en"><head><title>C站测试版本：Pre-Pre-indev1000</title></head><liclass="lifather"><h4>侧边栏</h4><ulclass="ulson"><!--创建子列--><liclass="lison">关于</li><liclass="lison">联系</li><liclass="lison">Bug反馈</li></ul><li><liclass="lifather"><h4>以后计划</h4><ulclass="ulson"><!--创建子列--><liclass="lison">下一版本</li><liclass="lison">cplr预加载</li><liclass="lison">CDN架构</li></ul></li><head><linkrel="stylesheet"href="pre-indev.css"></head> <!以下是滚动及文字测试--><b>测试1</b><marquee>测试2</marquee><i>测试3</i><h1>测试4</h1> 文件：Pre-indev.css *{margin:0;/*清除外边距*/padding:0;/*清除内边距*/list-style:none;/*删除<li>标签生成的点*/}body{background-image:url('https://static.runoob.com/images/mix/gradient2.png');/*插入背景图片*/background-repeat:repeat-x;/*让背景图仅在x轴重复*/display:flex;/*设置为弹性盒*/justify-content:center;/*导航栏居中*/}#ulfather{display:flex;/*设置为弹性盒*/background-color:rgb(40,44,100);/*设置栏目背景为深紫色*/box-shadow:2px5px15pxrgba(0,0,0,.7);/*阴影效果*/border-radius:5px;/*圆角效果*/width:350px;/*导航栏宽度*/height:30px;/*导航栏长度*/line-height:30px;/*文字垂直居中*/}.lifather{width:70px;/*每个栏目占宽70像素，把350像素的导航栏5等分*/text-align:center;/*文字水平居中*/color:rgb(160,160,230);/*设置字体颜色为浅紫色*/}.ulson{background-color:rgb(100,100,100,.5);/*设置子栏背景为半透明灰色*/border-radius:0px0px5px5px;/*圆角效果*/color:rgb(250,250,250);/*设置字体颜色为白色*/display:none;/*初始状态为隐藏*/}.lifather:hover.ulson{display:block;}.lison:hover{background-color:rgba(0,0,0,.3);}/*用时：12分钟*/
