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标签的圆点 */}
效果展示
效果展示:(可能有亿点丑,但也真不戳)
好了,这就是今天的全部内容,喜欢的可以点个赞和收藏,再见!