博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
4376
积分:0
P豆:52

2020作业

2019年12月25日 01:10:27阅读数:196博客 / 小辰/ 前端学习

下面是我做好的效果图下面是我做好的效果图

全部代码如下全部代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="static/font/iconfont.css"><link rel="stylesheet" type="text/css" href="index_header.css">
  6. <style >
  7. /*对所有元素进行总的样式设计*/
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. /*font-size: 18px;*/
  12. font-size: 14px;
  13. /*color: #666666;*/
  14. font-size: #555555
  15. outline:2px dashed red;
  16. }
  17. /*对所有链接的字体进行设计*/
  18. a {
  19. color: #555555;
  20. /*font-size: 18px;*/
  21. font-size: 14px;
  22. text-decoration: none;
  23. }
  24. /*设置主页头部*/
  25. .index-header {
  26. width: 1200px;
  27. min-height: 300px;
  28. margin: 30px auto;
  29. }
  30. /*设置主页头部最上面的导航栏*/
  31. .index-header > .top {
  32. height: 70px;
  33. position: relative;
  34. }
  35. /*对顶部所有元素进行设置*/
  36. .index-header > .top * {
  37. height: inherit;
  38. line-height: 70px;
  39. }
  40. /*对logo的样式进行设计*/
  41. .index-header > .top > .logo {
  42. width: 176px;
  43. position: absolute;
  44. top: 0;
  45. left: 0;
  46. }
  47. /*对搜索框进行设置*/
  48. .index-header > .top > .search {
  49. width: 330px;
  50. position: absolute;
  51. right: 350px;
  52. }
  53. /*快速链接设置*/
  54. .index-header > .top > .quick-start {
  55. /*width: 300px;*/
  56. width: 330px;
  57. position: absolute;
  58. right: 0;
  59. }
  60. .index-header > .top > .logo img {
  61. height: 100%;
  62. display: block;
  63. }
  64. /*搜索框样式*/
  65. .index-header > .top > .search > input[type="search"] {
  66. /*占满空间*/
  67. width: 330px;
  68. height: 36px;
  69. border-radius: 10px;
  70. padding: 10px;
  71. }
  72. /*放大镜样式*/
  73. .index-header > .top > .search > input[type="search"] + label {
  74. /*设置大小*/
  75. font-size: 23px;
  76. /*微调显示位置*/
  77. /*负左外边距, 处相反方向移动,实现上移到搜索框内的效果*/
  78. margin-left: -30px;
  79. /*相对定位,实现居中效果*/
  80. position: relative;
  81. top: 2px;
  82. }
  83. /*鼠标悬停显示小手*/
  84. .index-header > .top > .quick-start > span {
  85. font-size: 33px;
  86. margin-right: 6px;
  87. }
  88. /*鼠标悬停为红色*/
  89. .index-header > .top > .quick-start > span:hover {
  90. cursor: pointer;
  91. color: red;
  92. }
  93. /*选择框中的seach类型*/
  94. .index-header > .top > .search > input[type="search"]:hover {
  95. cursor: pointer;
  96. /*添加盒子阴影,实现外发光*/
  97. box-shadow: 0 0 5px #888888;
  98. }
  99. /*中间导航链接区*/
  100. .index-header > .nav {
  101. height: 44px;
  102. }
  103. /*导航中的每一个链接组*/
  104. .index-header > .nav > .nav-item {
  105. width: 300px;
  106. height: inherit;
  107. /*float: left;*/
  108. /*转为定位父级*/
  109. position: relative;
  110. }
  111. /*字体图标*/
  112. .index-header > .nav > .nav-item > .iconfont {
  113. font-size: 40px;
  114. color: red;
  115. position: absolute;
  116. }
  117. /*标签*/
  118. .index-header > .nav > .nav-item > .tag {
  119. width: 40px;
  120. position: absolute;
  121. /*top: 0;*/
  122. left: 45px;
  123. border-right: 1px solid #cccccc;
  124. }
  125. /*链接组*/
  126. .index-header > .nav > .nav-item > .links {
  127. width: 160px;
  128. position: absolute;
  129. /*top: 0;*/
  130. left: 95px;
  131. }
  132. /*链接组中的链接样式*/
  133. .index-header > .nav > .nav-item > .links > a {
  134. margin-right: 8px;
  135. }
  136. .index-header > .nav > .nav-item > .links > a:hover {
  137. color: red;
  138. }
  139. /*最后将每一个导航组模块全部左浮动,收工*/
  140. .index-header > .nav > .nav-item {
  141. float: left;
  142. }
  143. /*右边的轮播与广告图片*/
  144. .index-header > .slider-ads {
  145. height: 600px;
  146. width: 700px;
  147. position: relative;
  148. }
  149. .index-header > .slider-ads > .slider {
  150. height: 600px;
  151. width: 200px;
  152. position: absolute;
  153. /*默认从左上角开始定位,可以省略*/
  154. top: 0;
  155. left: 0;
  156. }
  157. .index-header > .slider-ads > .ads {
  158. width:100px;
  159. position: absolute;
  160. top: 0; /* 可省略 */
  161. right: 0;
  162. }
  163. .index-header > .slider-ads img {
  164. height: 100%;
  165. /*清除图片空白区*/
  166. display: block;
  167. }
  168. /*参考线可以清楚的看到图片下面的空白区*/
  169. .index-header > .slider-ads a {
  170. /*outline: 1px solid blue;*/
  171. }
  172. /*统一调整每个组件中的上下外边距*/
  173. .index-header > * {
  174. margin: 20px 0;
  175. }
  176. </style>
  177. <title>全站首页导航与轮播图</title>
  178. </head>
  179. <body>
  180. <div class="index-header">
  181. <!-- <div class="log-search"> -->
  182. <!-- <a href="" class="logo"><img src="static/img/logo.png" alt=""></a> -->
  183. <div class="top">
  184. <!--右侧logo-->
  185. <div class="logo">
  186. <!--logo-->
  187. <a href=""><img src="static/img/logo.png" alt=""></a>
  188. </div>
  189. <!-- 中间搜索框 -->
  190. # 这段代码自己打的实现不了效果,用老师的代码就可以实现效果,不知道为什么?求解答,呜呜
  191. <!-- 这段代码自己打的实现不了效果,用老师的代码就可以实现效果,不知道为什么? -->
  192. <!-- <div class="search"> -->
  193. <!-- <input type="search" id="search"> -->
  194. <!-- <label for="search" class="iconfont icon-jinduchaxun"></label></div> -->
  195. <div class="search">
  196. <input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label>
  197. </div>
  198. <!-- 右侧功能快速入口 -->
  199. <div class="quick-start">
  200. <span class="iconfont icon-huiyuan1"></span>
  201. <span class="iconfont icon-danmu1"></span>
  202. <span class="iconfont icon-fabu"></span>
  203. <span href="" class="iconfont icon-fangda"></span>
  204. <span href="" class="iconfont icon-huiyuan2"></span>
  205. <span href="" class="iconfont icon-dianzan"></span>
  206. </div>
  207. </div>
  208. <!-- 主导航 -->
  209. <div class="nav">
  210. <!-- 导航详情1 -->
  211. <div class="nav-item">
  212. <span class="iconfont icon-gongdan"></span>
  213. <div class="tag">
  214. <span>资讯</span>
  215. <span>学习</span>
  216. </div>
  217. <div class="links">
  218. <a href="">器材</a>
  219. <a href="">大师</a>
  220. <a href="">大师</a>
  221. <a href="">大师</a>
  222. <a href="">大师</a>
  223. <a href="">大师</a>
  224. <a href="">大师</a>
  225. <a href="">其他</a>
  226. </div>
  227. </div><div class="nav-item">
  228. <span class="iconfont icon-gongdan"></span>
  229. <div class="tag">
  230. <span>资讯</span>
  231. <span>学习</span>
  232. </div>
  233. <div class="links">
  234. <a href="">器材</a>
  235. <a href="">大师</a>
  236. <a href="">大师</a>
  237. <a href="">大师</a>
  238. <a href="">大师</a>
  239. <a href="">大师</a>
  240. <a href="">大师</a>
  241. <a href="">其他</a>
  242. </div>
  243. </div><div class="nav-item">
  244. <span class="iconfont icon-gongdan"></span>
  245. <div class="tag">
  246. <span>资讯</span>
  247. <span>学习</span>
  248. </div>
  249. <div class="links">
  250. <a href="">器材</a>
  251. <a href="">大师</a>
  252. <a href="">大师</a>
  253. <a href="">大师</a>
  254. <a href="">大师</a>
  255. <a href="">大师</a>
  256. <a href="">大师</a>
  257. <a href="">其他</a>
  258. </div>
  259. </div>
  260. <div class="nav-item">
  261. <span class="iconfont icon-gongdan"></span>
  262. <div class="tag">
  263. <span>资讯</span>
  264. <span>学习</span>
  265. </div>
  266. <div class="links">
  267. <a href="">器材</a>
  268. <a href="">大师</a>
  269. <a href="">大师</a>
  270. <a href="">大师</a>
  271. <a href="">大师</a>
  272. <a href="">大师</a>
  273. <a href="">大师</a>
  274. <a href="">其他</a>
  275. </div>
  276. </div>
  277. </div>
  278. <<!-- 轮播图 -->
  279. <div class="slider-ads">
  280. <div class="slider"><a href=""><img src="static/img/1.jpg" alt=""></a></div>
  281. <div class="ads"><a href=""><img src="static/img/2.jpg" alt=""></a></div>
  282. </div>
  283. </div>
  284. </div>
  285. </body>
  286. </html>

老师我上面的放大镜的地方,明明和老师写的一样,但位置就是有点不对,一直在下一行,直接用老师的代码就行,我想知道有什么不同。老师我上面的放大镜的地方,明明和老师写的一样,但位置就是有点不对,一直在下一行,直接用老师的代码就行,我想知道有什么不同。

以上就是我的作业结果。

批改老师:天蓬大人天蓬大人

批改状态:合格

老师批语:看来你对负外边距不熟悉 , 建议看一下margin的介绍, 这个属性允许负值, 元素会向相反的方向移动

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 计算机多媒体技术就方向是在IT、广告、影视等行从事动画制、广告制、多媒体产品设计与开发、网站开发、计算机软硬件管理及其它计算机软件产品开发等工
    什么叫ORM,全称【Object-Relational Mapping(对象关系映射)】,它的用是在关系型数据库和务实体对象之间一个映射,这样,我们在操具体的务对象时,就不需要再去和复杂的SQL
    PHP程序员找工还是可以的。找公司类型要对以后的职发展提供导向用,互联网公司、外包型公司、独立开发技术型的企、外企甚至是国企都需要PHP程序员。
    联系:管理信息系统是企内部的信息系统,电子商务是企外部的信息系统,内部与外部信息系统的结合才构成现代企完整的信息系统。
    b2b是指企与企之间通过专用网络或Internet,进行数据信息的交换、传递,开展交易活动的商模式;b2b商模式的特点:1、交易次数少,交易金额大;2、交易对象广泛;3、交易过程复杂;4、交易操规范
    系统与用户对话的界面不一定是图形界面,因为操系统按用户界面分类,可分为“控制语言”、“键盘命令”和“图形用户界面”。
    目前大前端开发越来越吃香,如果你想从事大前端开发,javascript要求必学必会,所以php中文网为知名编程学习网站,为您整理了2020年最全的js面试题,包含js基础面试题、js高级面试题以及js

    2020-11-02

    919

    ios是由苹果公司开发的移动操系统,该系统于2007年1月9日的Macworld大会上公布。ios与苹果的macos操系统一样,都属于类Unix的商系统。
    Master进程为主进程,该进程会创建Manager进程和Reactor线程等工进/线程。Worker进程是工进程,所有的务逻辑都在该进程中进行。
    在分段存储管理方式中,的地址空间被划分为若干个段,每个段定义了一组逻辑信息。每个段都从0开始编址,并采用一段连续的地址空间。整个的地址空间由于是分成多个段,因而是二维的。
    可以搜Python题答案的APP有:网课帮答题 、学小易 、助课宝、搜题宝 、微软数学 、Photomath、题多多 、帮、小猿搜题。
    成都php工资2020年平均在1万左右,而工年限比较久的大佬们,能拿到到20k+。由此可见,PHP语言还是这么的吃香啊!
    区别:多道程序是之间自动调度执行、共享系统资源,并不是真正地同时执行多个;而多重处理系统配置多个CPU,能真正同时执行多道程序。
    大数据技术的战略意义不在于掌握庞大的数据信息,而在于对这些含有意义的数据进行专化处理;换而言之,如果把大数据比一种产,那么这种产实现盈利的关键,在于提高对数据的“加工能力”,通过“加工”实现数据的
    illustrator是指Adobe illustrator,常被称为“AI”,是一种应用于出版、多媒体和在线图像的工标准矢量插画的软件;该软件主要应用于印刷出版、海报书籍排版、专插画、多媒体图像处理和互联网页面的制

    2020-11-16

    536

    ios是由苹果公司开发的移动操系统。ios与苹果的macos操系统一样,属于类unix的商系统。ios操系统最初是设计给ipone使用的,后来陆续套用到pod touch、ipad上。
    批处理是指用户将一批提交给操系统后就不再干预,由操系统控制它们自动运行。需要注意的是,批处理操系统不具有交互性。
    系统的五大功能模块是:处理器管理、存储器管理、设备管理、文件管理和管理。操系统是管理计算机硬件和软件资源的计算机程序,同时它也提供了一个让用户与系统交互的操界面。
    系统管理的计算机系统资源包括:中央处理器、主存储器、外部设备、数据、程序。操系统的主要功能有:1、进程管理;2、存储管理;3、设备管理;4、文件管理;5、管理。
    php全栈工程师,也叫全端工程师,能独立负责网站前台、后台开发和迭代,根据务需要开发,制和程序修改。