您现在的位置是:首页 > Javascript
当前栏目
HTML网站导航栏的制作
2023-03-31 10:39:16 时间
一、导航条的制作
(1)代码图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝导航</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-weight: 520;
font-family: 微软雅黑;
}
#nav {
width: 1470px;
height: 72px;
background-color: rgb(247, 249, 250);
border-radius: 20px;
margin: 20px auto;
}
#nav>ul>li {
float: left;
width: 175.75px;
height: 72px;
text-align: center;
}
#nav>ul>li>a {
text-align: center;
line-height: 72px;
font-size: 20px;
color: black;
}
#nav>ul>li>a:hover {
color: orange;
}
ul>span {
float: left;
line-height: 72px;
color: rgb(225, 224, 224);
font-weight: 800;
font-size: 24px;
}
#nav>ul>li>.a1 {
color: #FF0036;
}
#nav>ul>li>.a2 {
color: rgb(101, 198, 58);
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#" class="a1">天猫</a></li><span>|</span>
<li><a href="#" class="a1">聚划算</a></li><span>|</span>
<li><a href="#" class="a2">天猫超市</a></li><span>|</span>
<li><a href="#">司法拍卖</a></li><span>|</span>
<li><a href="#">飞猪旅行</a></li><span>|</span>
<li><a href="#">天天特卖</a></li><span>|</span>
<li><a href="#">极有家</a></li><span>|</span>
<li><a href="#">淘宝直播</a></li>
</ul>
</div>
</body>
</html>
(2)效果图展示
http://127.0.0.1:5500/homework/01.html
二、浮动简介
(1)浮动布局方式
文档流中元素默认的布局方式,margin,浮动,定位,弹性盒子,网格布局·····
浮动:设置元素浮动,可以让元素脱离文档流,从而不具有元素在文档流中特点,
即块元素不会独占一行,行内元素也可以设置宽高等等
设置元素浮动:float
可选值:none 默认值
left 向左浮动
right 向右浮动
(2)设置元素浮动后的特点
1、元素脱离文档流,元素一旦脱离文档流,就不会占据原来在文档流中的位置,
其下面的元素会立即跑上去
2、元素浮动之后,不会超过它前一个兄弟,最多一边齐
3、如果前一个兄弟没有浮动,下面浮动的元素,也不会跑到前面
4、设置元素浮动后,元素也是尽量的向左或者向右进行浮动
5、浮动元素不会超过其父元素的范围
三、浮动特点
当浮动的元素碰到文字,浮动的元素不会盖住文字,而文字会环绕浮动的元素,
产生文字环绕元素的效果,这也是浮动最早的效果。
浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围, 所以我们可以
通过浮动来设置文字环绕图片的效果。
相关文章
- 滴滴 D8 前端技术大牛是如何思考个人成长的?
- html爱心表白代码(最全html表白代码大全可复制)
- 一个非常是个程序员表白的浪漫网站(HTML+CSS+JS)
- 【爱心跳动——HTML实现 (效果+代码)】
- html爱心表白代码(最全)
- HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
- HTML情人节表白代码,给女朋友的电子情书代码,女朋友表白代码
- 【博主推荐】HTML浪漫表白求爱(附源码)
- html情人节代码,2023年情人节代码,含鼠标特效的2023情人节代码
- Web的8种(6+2)元素+常用定位方法
- html程序员表白前端网页源码
- 浪漫爱心表白网页模板
- 情人节程序员用HTML网页表白【守护爱情(泡泡游戏)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
- html表白代码
- HTML可用于情侣表白的爱心代码~,赶紧跟着操作,让她也拥有属于你的爱心吧。
- 情人节程序员用HTML网页表白【超具创意的网页生日快乐】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
- html实现爱情浪漫表白甜蜜时刻(附源码)
- 博客帮助文档
- 【SPSS】多因素方差分析详细操作教程(附案例实战)
- 【SPSS】单因素方差分析详细操作教程(附案例实战)