2019年12月20日课后作业
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- 引入阿里字体图标库的CSS样式--><link rel="stylesheet" href="static/font/iconfont.css"><title>htmlwork</title><style>/*初始化样式*/*{margin: 0;padding: 0;font-size: 13px;/*方便布局添加一个轮廓线*//*outline: 1px dashed red;*/}a{color: #555555;font-size: 13px;/*去掉下划线*/text-decoration: none;}.index-header{width: 1200px;min-height: 300px;margin: 30px auto;}.index-header > .top {height: 70px;position: relative;}.index-header > .top * {height: inherit;line-height: 70px;}/*顶部logo*/.index-header > .top > .logo {width: 176px;position: absolute;top: 0;left: 0;}/*搜索框*/.index-header > .top > .search {width: 330px;position: absolute;top: 0 ;right: 350px;}/*icon*/.index-header > .top > .quick-start {width: 300px;position: absolute;right: 0;}.index-header > .top > .logo img {height: 100%;display: block;}.index-header > .top > .search > input[type="search"] {width: 330px;height: 36px;border-radius: 10px;padding: 10px;}/*放大镜图标*/.index-header > .top > .search > input[type="search"] + label {font-size: 23px;margin-left: -30px;position: relative;top: 5px;}.index-header > .top > .search > input[type="search"] :hover {box-shadow: 0 0 5px #888888;}.index-header > .top > .quick-start > span {font-size: 33px;margin-right: 6px;}.index-header > .top > .quick-start > span:hover {color: red;/*设置鼠标样式*/cursor: pointer;}/*中间导航区*/.index-header > .nav {height: 44px;}.index-header > .nav > .nav-item {width: 300px;height: inherit;position: relative;float: left;}.index-header > .nav > .nav-item > .iconfont {font-size: 40px;color: red;position: absolute;}.index-header > .nav > .nav-item > .tag {width: 40px;position: absolute;left: 45px;border-right: 1px solid #cccccc;}.index-header > .nav > .nav-item > .links {width: 160px;position: absolute;left: 95px;}.index-header > .nav > .nav-item > .links > a {margin-right: 8px;}.index-header > .nav > .nav-item > .links > a:hover {color: red;}.index-header > .slider-ads {height: 320px;position: relative;}.index-header > .slider-ads > .slider {width: 900px;position: absolute;}.index-header > .slider-ads > .ads {width: 295px;position: absolute;right: 0;}.index-header > .slider-ads img {height: 100%;display: block;}.index-header > * {margin: 20px 0;}</style></head><body><!--主框样式--><div class="index-header"><!--上：顶部logo+搜索框search+图标icon--><div class="top"><div class="logo"><a href=""><img src="static/images/logo.png" alt=""></a></div><div class="search"><input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label></div><div class="quick-start"><span class="iconfont icon-huiyuan1"></span><span class="iconfont icon-danmu1"></span><span class="iconfont icon-fabu"></span><span class="iconfont icon-fangda"></span><span class="iconfont icon-huiyuan2"></span><span class="iconfont icon-dianzan"></span></div></div><!-- 中：导航区nav--><div class="nav"><div class="nav-item"><span class="iconfont icon-gongdan"></span><div class="tag"><sapn>咨询</sapn><span>学习</span></div><div class="links"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div><div class="nav-item"><span class="iconfont icon-gongdan"></span><div class="tag"><sapn>咨询</sapn><span>学习</span></div><div class="links"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div><div class="nav-item"><span class="iconfont icon-gongdan"></span><div class="tag"><sapn>咨询</sapn><span>学习</span></div><div class="links"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div><div class="nav-item"><span class="iconfont icon-gongdan"></span><div class="tag"><sapn>咨询</sapn><span>学习</span></div><div class="links"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div></div><!-- 下：轮播图slider+广告ads--><div class="slider-ads"><div class="slider"><a href=""><img src="static/images/1.jpg" alt=""></a></div><div class="ads"><a href=""><img src="static/images/banner-right.jpg" alt=""></a></div></div></div></body></html>
后附运行代码测试图
