direction.css

*{
    margin: 0;
    padding: 0;
}

.w{
    width: 1300px;
    margin: auto;
}

.header{
    height: 42px;
    /* background-color: white; */
    margin: 30px auto;
    /* border: solid 1px black; */
}

.logo{
    float: left;
    width: 198px;
    height: 42px;
    background-color: #5F9EA0;
    line-height: 42px;
    text-align: center;
    
}

li {
    /* display: inline-block;     一般不用元素属性转换的方法来调节行内显示，因为元素之间的具体距离无法控制，通常使用浮动来进行调整布局，使其同行显示*/
    list-style: none;
    margin: 0 15px;

}

a{
    text-decoration: none;
}

.nav{
    float: left;
    margin-left: 60px;
}

.nav ul li {
    float: left;
    /* margin-right: 10px; */
}

.nav ul li a {
    display: block;
    /* a 是行内元素，不能直接进行指定高度和宽度，需要进行转换后再进行指定宽度和高度 */
    height: 42px;
    padding: 0 10px;     
    /* 此处仅指定高度，不指定宽度，使用padding将小盒子撑开 */
    line-height: 42px;
    /* 行高等于盒子高度，使文字垂直居中 */
    font-size: 18px;
    color: #050505;
    /* box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.08); */
    border-left: 1px solid #ccc ;
}
.nav ul li a:hover{
    background-color: #5F9EA0;
}

.search{
    float: left;
    width: 312px;
    height: 42px;
    /* background-color: #5F9EA0; */
    margin-left: 50px;
}

.search input {
    width: 210px;
    height: 32px;
    border: 2px solid #5F9EA0;
    color: gray;
    font-size: 14px;
    padding-left: 15px;
    
}

.search button{
    width: 66px;
    height: 40px;
}

body{
    background-color: #f3f5f7;
}

.direction {
    height: 500px;
    margin-top: 20px;
    background-color: cadetblue;
}

.direction h1 {
    text-decoration: underline 2px black solid;
    text-align: center;
    padding-top: 39px;
}

.direction p {
    font-size: 18px;
    text-indent: 2em;
    margin-top: 20px;
}