【网站制作】二、实战 - B站首页导航栏
【摘要】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bilibil...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bilibili</title>
<style> /*盒子模型的样式*/
*{margin: 0; padding: 0;} /*外边距；内边距*/
/*背景除了使用颜色，当然也可以使用图片，不过要注意，图片引用要使用url*/
.top {width: 100%; height: 180px; /*background: red;*/background: url(images/1.png);}
/*背景想要透明效果可以使用rgba，最后一个参数为1表示不透明，为0表示全透明*/
.top .a {width: 100%; height: 38px; /*background: blue;*/background: rgba(255, 255, 255, 0.5);}
/*margin 外边距 margin: 0 0 0 0;上右下左 margin:0 auto;上下 左右 margin:0;上下左右*/
.top .a .b {width: 1000px; height: 38px; /*background: green;*/ margin: 0 auto;}
/*border: 1px solid #000; 边框：边框粗细 边框类型 颜色*/
/*float: left; 使li标签横着排，左浮动*/
/*list-style: none; 取消无序列表li小圆点*/
/*line-height: 38px; 上下居中 38px表示行高 text-align: center;*/
/*font-size: 16px; 设置字体大小 font-family: 微软雅黑; 设置字体类型 font-weight: 100px;设置字体粗细*/
.top .a .b ul li{width: 50px; height: 38px;/*border: 1px solid #000;*/
float: left; list-style: none;line-height: 38px;text-align: center;font-size: 16px; font-family: 微软雅黑;font-weight: 100px;}
/*li:hover实现鼠标悬停时操作*/
.top .a .b ul li:hover{background: blue;}
/*text-decoration: none;去除超链接下的横线*/
/*display: block; 设置a标签为块级元素*/
.top .a .b ul li a {text-decoration: none;width: 50px; height: 38px; display: block;color:#000;}
/*border-radius:0 0 15px 15px; 设置圆角 对应位置依旧是 上 右 下 左*/
.top .a .b ul li.tougao{height: 55px;background: pink; border-radius:0 0 15px 15px; }
.top .a .b ul li.tougao a {height: 55px;}
</style>
</head>
<body>
<div class="top">
<div class="a">
<div class="b">
<a style="float: left;line-height: 38px;" href="#"><img src="images/1.png"></a>
<ul style="float: left;"><!-- 样式也可以写在具体的标签中 -->
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<ul style="float: right;">
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li class="tougao"><a href="#">8</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
文章来源: recclay.blog.csdn.net，作者：ReCclay，版权归原作者所有，如需转载，请联系作者。
原文链接：recclay.blog.csdn.net/article/details/104374516
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）