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