首先是笔记（未整理，可能有点乱）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<%-- 定义页面样式--%>
<style>
* {
padding: 0;
margin: 0;
font-family: "微软雅黑" ;
}
/*定义header样式*/
.header {
height: 72px;
background: #458fce;
}
.header .logo {
color: #fff;
line-height: 72px;
font-size: 30px;
/*margin属性
用于设置元素的外边距，
margin-left属性就是用于设置元素的左外边距*/
/*
相关的，还有
auto
浏览器设置的左外边距
length
定义固定的左外边距，默认值为0
%
定义基于父对象总高度的百分比左外边距
inherit
规定应该从父元素继承左外边距
*/
margin-left: 20px;
/*
inline：内联元素、block：块元素
inline-block
和其它元素都在一行
元素的高度、宽度、行高以及顶和底边距都可设置*/
display:inline-block;
font-weight:500 ;
}
ul li {
list-style:none;
}
.header ul li {
float: left ;
}
/*.header ul li {*/
/* !* 给每一个li添加一个左浮动*!*/
/* float: left;*/
/* color: #fff;*/
/* display: inline-block;*/
/* width: 112px;*/
/* height: 72px;*/
/* text-align: center;*/
/* line-height: 72px;*/
/* !*cursor属性规定要显示的光标的类型*/
/* default：默认光标（通常是一个箭头）*/
/* auto：默认，浏览器设置的光标*/
/* crosshair：光标呈现十字线*/
/* pointer：光标呈现为一只手*/
/* move：光标呈现某对象可移动*/
/* text：光标指示文本*/
/* wait：光标指示程序正在忙*!*/
/* cursor: pointer;*/
/* !*把li的小圆点去掉*!*/
/* list-style: none;*/
/*}*/
/*.header ul li.first {*/
/* margin-left: 30px;*/
/*}*/
/*a {*/
/* color: #336666;*/
/* text-decoration: none;*/
/*}*/
/*.header ul li :hover {*/
/* background: #74b0e2;*/
/*}*/
</style>
</head>
<body>
<%--div可以用来划分块级元素，从而配合css来整体控制某一块的样式--%>
<%--class代表类的意思，可以定义特定样式--%>
<div class="header">
<div class="logo">原创文字</div>
<ul>
<li>首页</li>
<li>原创故事</li>
<li>热门专题</li>
<li>欣赏美文</li>
<li>赞助</li>
</ul>
</div>
</body>
</html>
首先在最开始就出现问题了，我应该实现的主界面应该是这样的
但是我的实现却是这样的
logo的css样式实现不了，可笑的是（直接复制代码可以），之前可以实现，现在又不能了，md
找原因。。。
找到啦！
应该是：
我写的是（实际上，是我不理解空格的意义，学习ing）
第一步实现了，我是小白，我是小白，我的错误简单但是前路漫漫又灿灿
接着添加导航按钮
OK，another problem md
本来应该出现的页面
我出现的页面（这也是我之前出现的问题，前面的问题纯属。。）
不知道为啥，它就是上不去，md，这个问题我之前也是实现不了
找原因。。。
首先，我发现一开始，他就没有办法上去
我做的
实际到这步应该是
tmd
【为什么li也就是导航栏向左浮动不到header】
原因：（下面这个是原创文字的style代码）
.header .logo {
color: #fff;
line-height: 72px;font-size: 30px;
margin-left: 20px;
/*width: 200px;*/
/*height: 80px;*/
display: inline-block;
/*text-align: center;*/
/*line-height: 80px;*/
float: left;
font-weight: 500;
}
我没有加
float: left;
导致原创文字占了一行
然后，就初步实现了一个页面
标签：初学,li,header,HTML,光标,height,margin,CSS,left From： https://www.cnblogs.com/gbrr/p/16861362.html