收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*去除自带效果*/body,nav>ul{margin:0;padding: 0;}/*去除li前的小点*/nav>ul>li>ul>li{list-style-type: none;/* line-height: 70px; */color: blueviolet;}nav>ul>li>ul>li{border-bottom:1px solid rgb(245, 245, 245);width: 120px;}a{/*去除a标签下的样式*/text-decoration: none;/*设置文字的颜色*/color: grey;/* a是行内元素，要用宽度得转成块级元素 */display:block;text-align: center;width:120px;}/*设置logo*/.tupian img{height: 50px;width: 120px;}.daohang{background: #74cdf0;display: flex;/*宽度铺满*/width: 100%;/*最低宽度*/min-width: 1024px ;height: 50px;/*使li分散对齐*/Justify-content:space-around;/*超出部分隐藏*//*overflow:hidden;*/list-style-type: none;/* align-items: center; *//* height:50px; */line-height:50px;/* 固定高度的设置行高， 文字在行中间。变高的padding-top:20px; padding-bottom:20px; 设置边距 */}.neirong{background-color: rgb(189, 234, 255);padding-left: 0;/*隐藏二级菜单*/display: none;}.liebiao{background-color: rgb(189, 234, 255);padding-left: 0;/*隐藏二级菜单*/}nav>ul>li:hover>ul{/*显示二级菜单*/display: block;}/*一级级菜单鼠标悬停效果*/nav>ul>li:hover{background-color: rgb(255, 253, 136);}/*二级级菜单鼠标悬停效果*/.neirong>li>a:hover{background-color: rgb(138, 255, 187);}/* 一二级菜单鼠标悬停效果nav>ul>li:hover,nav>ul>li>ul>li:hover {background: #e2ff94;}*//*输入框的样式*/nav>ul>li>form>input{border: 1px #8ffff9 solid;border-radius: 5px;height: 30px;}</style></head><body><nav><ul class="daohang"><li class="tupian"><span><a href=""><img src="http://d300.paixin.com/thumbs/1028599/3836308/staff_1024.jpg"alt=""></a></span></li><li><a href="">文章类</a><ul class="neirong"><li><a class="liebiao" href="">2</a></li><li><a class="liebiao" href="">2</a></li><li><a class="liebiao" href="">2</a></li><li><a class="liebiao" href="">2</a></li></ul></li><li><a href="">视频类</a><ul class="neirong"><li><a href=""></a>1</li><li><a href=""></a>1</li><li><a href=""></a>1</li><li><a href=""></a>1</li></ul></li><li><a href="">音频类</a><ul class="neirong"><li><a href=""></a>1</li><li><a href=""></a>1</li><li><a href=""></a>1</li><li><a href=""></a>1</li></ul></li><li><form action=""><input type="search" placeholder="搜索" onchange="alert(this.value)" name="" id=""></form></li></ul></nav></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
