hello，大家好，我是wangzirui32，今天我们来学习如何实现简单网站首页。
开始学习吧！

网站首页代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>wangzirui32的首页</title><!-- CSS层叠样式表导入 --><link rel="stylesheet" href="css/style.css"/>
</head>
<body><header><!-- header标签一般用于网站导航栏  --><div class="logo"><!-- 网站LOGO导入 --><!-- logo根据你的需要选择路径 --><img src="img/logo.bmp"/></div><ul><!-- href链接自己添加修改 --><li><a href="">首页</a></li><li><a href="">产品</a></li><li><a href="">论坛</a></li><li><a href="">选购</a></li><li><a href="">登录</a></li></ul></header>
</body>
</html>

html代码好了，现在得编写亿下CSS样式表了。

CSS样式表代码

为了你能更好的理解，我添加了亿些注释：

header {background-color: cyan; /* 背景颜色cyan */height: 70px;  /* 宽度为80px */display: flex; /* 将元素放置在容器中心 */
}header ul li {float:left; /* li标签靠左 */color:#fff; /* 颜色设置 */margin:5px 10px; /* 5px是每2个li标签的距离  10px是li标签离logo的距离 */list-style: none; /* 取消li标签的圆点 */
}

效果展示

效果展示：（可能有亿点丑，但也真不戳）

好了，这就是今天的全部内容，喜欢的可以点个赞和收藏，再见！

HTML：1分钟实现简单网站导航栏相关推荐

索引栏_网站导航栏如何设置才能促使网站SEO优化更好？
众所周知,网站导航是一个网站不可或缺的一部分,优质的网站导航栏不仅能够让访客知道自己的所在位置,还能提高访客的浏览效率,更好的提高用户体验,那么导航栏要怎样设置才能更有利于SEO优化呢?下面一起来了解 ...
网站导航栏SEO优化方法
当我们进去一个网站主页的时候,通常会先看导航栏有什么内容标题.然后根据自己的需求直接点击导航栏上所对应的标题,从而进去相关网页进行浏览.可以说,导航栏是网站的地图.能让用户更快更好地找到所需要的内容, ...
简单浮动导航栏（HTML+CSS实现）
简单浮动导航栏,鼠标移上去自动展开下拉菜单,使用HTML+CSS实现. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
网站导航栏如何设置更利于提升SEO优化效果？
网站导航栏就像是用户浏览网站的"指南针",能够方便访客更直观的了解自己所在的位置,也能让访客更快速的找到想要了解的栏目.那么,导航栏该如何设置才能更利于SEO优化效果提升呢? 1. ...
Bootstarp：网站导航栏的编写设计
hello,大家好,我是wangzirui32,今天我们来学习Bootstarp的网站导航栏的编写设计,开始学习吧! HTML代码: <!DOCTYPE html> <html la ...
使用html，css实现简单的导航栏
标题:使用html,css实现简单的导航栏一.实现过程首先通过ul,li实现一个无序列表,添加背景得到如图所示的样式[文档流] 让li浮动,使得垂直排列–>水平排列,[注意需要开启bfc,让 ...
【游戏面包屑】简单的导航栏设计
前言为了便于UI的开发,设计了一个简单的导航栏结构.目前版本的导航栏抽象类简化了导航栏选项的事件监听.移除.后续根据需求再丰富功能.结构. 本次实例用于设计角色·技能UI窗口的左侧导航栏以及右下角的 ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...

HTML：1分钟实现简单网站导航栏

网站首页代码

CSS样式表代码

效果展示

HTML：1分钟实现简单网站导航栏相关推荐

最新文章

热门文章