bilibili网页练习

第一次写静态页面

html段

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>bilibili</title><link rel="stylesheet" href="css\bilibili.css">   <!--新建css文件 添加样式-->
</head>
<body><div class="top"><div class="a"><div class="b"><a href="#" style="float: left"><img src="data:images\1.jpg" alt="null" style="width: 45px; height: 38px;"></a><ul style="margin: 0px; padding: 0px;"><li><a href="#">主站</a></li><li><a href="#">音频</a></li><li><a href="#">直播</a></li><li><a href="#">会员</a></li></ul><ul style="margin: 0px; float: right"><li><a href="#">消息</a></li><li><a href="#">动态</a></li><li class="tou"><a href="#"  style="color: azure">投稿</a></li></ul></div></div></div>
</body>
</html>

css段

html,body{margin: 0px;padding: 0px;
}
.top{width: 100%;height: 180px;background: url(../images/2.jpg); /*引用背景图片*/
}
.top .a{width: 100%;height: 38px;background-color: rgba(255,255,255,0.5);
}
.top .a .b{width: 1000px;height: 38px;background-color: rgba(255,255,255,0.5);margin: 0 auto; /*auto 可自动调整*/
}
.top .a .b ul li{width: 50px;height: 38px;float: left;line-height: 38px;  /*让表头上下居中*/text-align: center; /*左右居中*/       list-style: none; /* 取消列表前原点 */font-size: 13px; /*字体大小*/font-family: 微软雅黑;font-weight: 500; /*字体粗细*/
}
.top .a .b ul li:hover{background-color:rgba(0,0,0,0.25);
}  /*伪类 鼠标放上后发生的变化*/
.top .a .b ul li a{text-decoration: none; /*设置下划线 none 取消*/width: 50px; /*设置a标签大小*/height: 38px;display: block; /*将a转化为块级元素*/color: #000;
}
/*a为行间元素，无高度和宽度，大小取决于行内文字大小
div为块级元素，有高度和宽度*/
.top .a .b ul li.tou{height: 55px;background-color: #fb7299;border-radius: 0 0 15px 15px;
}
.top .a .b ul li.tou a{height: 55px;width: 50px;display: block;
}

bilibili网页练习相关推荐

Bilibili 网页版下载视频 B站下载MP4格式视频（不用下载工具）
博主是为了给家里老人下载戏曲,一开始是单个单个解析然后下载,想多下载一些,然后用了批量方法下载很好用通过网页版解析工具解析单个视频获得下载地址复制视播放地址,如,复制播放视频时,上方的地址然 ...
bilibili网页图片动态效果实现
bilibili网页图片动态效果实现前一段时间在b站刷视频的时候看到了一个关于如何实现bilibili顶部导航的动画效果的视频.在看到这个视频之前,我也挺喜欢bilibili导航的动画效果,心里默默 ...
Python网页爬虫练习：requests库Beautiful爬取bilibili网页信息
我是卢本伟! import requests from bs4 import BeautifulSoup import bs4 def get_blibli_vedio():#获取bilibili实时 ...
bilibili网页版html5,Bilibili HTML5播放器网页全屏模式优化脚本版
// ==UserScript== // @name Bilibili HTML5播放器网页全屏模式优化脚本版 // @namespace http://tampermonkey.net/ // @ ...
bilibili网页播放视频绿屏的解决办法
小编在用电脑刷网页版bilibili视频是经常会遇到视频绿屏,啥也看不清的情况,每次都是随着视频的播放满满视频画面变得正常,但是这个过程比较缓慢,也比较折磨人,小编在这里分享一个解决办法: 1.点击视 ...
bilibili 网页版如何下载视频到本地（不用下载工具）
1.打开需要下载的视频网页 2.在网址前面加上一个字母"i"或者"kan" 3.根据网页提示直接点击下载
bilibili 网页端如何关灯和开灯?
我不小心按到了关灯模式过了好久都没找到关灯的地方体验极差. 下面给出解决方法: 1.首先点击网页端右边的音量键 2. 点击弹出的框里的更多播放设置 3. 点击关灯模式
Bilibili 网页版修改弹幕字体
下载一个油猴插件 http://tampermonkey.net 要匹配的网址是@match https://www.bilibili.com/video/* 然后在'use strict';下面输入 ...
提取bilibili网页视频目录，网页提取标签、属性，list到写入文本
1.网页提取标签.及属性写入list # -*- coding:utf-8 -*- import requests from bs4 import BeautifulSouphtml_doc3=&qu ...

bilibili网页练习

bilibili网页练习相关推荐

最新文章

热门文章