2018/10/8 渡课学习第六天

gyq426531

于 2018-10-09 17:07:17 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/gyq426531/article/details/82985132

版权

作业完成汇报

编程题

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="T1.css">
</head>
<body bgcolor="#FDFCF8">
<div id="wrapper">
  <div id="header">
    <h1><a href="./index.html" title="w3school 在线教程" style="float:left;">w3school 在线教程</a></h1>
  <div id="search">
    <form method="get" id="searchform">
        <input type="hidden" name="sitesearch" value="w3school.com.cn"/>
        <input type="text" name="as_q" class="box" id="searched_content" title="在此输入搜索内容。"/>
        <input type="submit" value="Go" class="button" title="搜索！"/>
    </form>
  </div>
</div>

<div id="navbar">
  <ul id="menu">
     <li id="h"><a href="#" title="HTML 系列教程">HTML 系列教程</a></li>
     <li id="b"><a href="#" title="浏览器脚本教程">浏览器脚本</a></li>
     <li id="s"><a href="#" title="服务器脚本教程">服务器脚本</a></li>
     <li id="d"><a href="#" title="ASP.NET 教程">ASP.NET 教程</a></li>
     <li id="x"><a href="#" title="XML 系列教程">XML 系列教程</a></li>
     <li id="ws"><a href="#" title="Web Services 系列教程">Web Services 系列教程</a></li>
     <li id="w"><a href="#" title="建站手册">建站手册</a></li>
  </ul>
</div>
</body>
</html>

/* common 开始 */
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
/* common 结束 */


/* 页面 开始 */
div#wrapper {
    width: 1240px;
    margin: 0 auto;
}
/* 页面 结束 */


/* 头部 开始 */
div#header {
    width: 1210px;
    height: 100px;

    background: #fdfcf8;
}

div#header a {
    width: 500px;
    height: 100px;
    text-indent: -9999px;
    float: left;

    background: transparent url("tt.png") 0 -150px no-repeat;
}

div#header a:hover {
    background: transparent url("tt.png") 0 -250px no-repeat;
}

div#header div#search {
    height: 100px;
    margin-right: 20px;
    float: right;
}

div#header div#search #searched_content {
    margin-top: 35px;

    width: 300px;
    height: 30px;
}

div#header div#search input.button {
    width: 30px;
    height: 30px;

    background: #ae4141;
    border: 0;
}
/* 头部 结束 */


/* 导航栏 开始 */
div#navbar {
    width: 1210px;
    height: 48px;

    background: transparent url("tt.png") 0 0 no-repeat ;

}

div#navbar ul#menu {
    width: 1210px;
    height: 48px;
    position: relative;
}

div#navbar ul#menu li {
    float: left;
    position: absolute;
}

div#navbar ul#menu li a {
    text-indent: -9999px;
    height: 48px;
    display: block;
}

#h {
    left: 0;
    width: 155px;
}

#b {
    left: 155px;
    width: 157px;
}

#s {
    left: 312px;
    width: 167px;
}

#d {
    left: 479px;
    width: 158px;
}

#x {
    left: 637px;
    width: 101px;
}

#ws {
    left: 738px;
    width: 185px;
}

#w {
    left: 923px;
    width: 177px;
}

#h a:hover {
    background: transparent url("tt.png") 0 -48px no-repeat;
}

#b a:hover {
    background: transparent url("tt.png") -155px -48px no-repeat;
}

#s a:hover {
    background: transparent url("tt.png") -312px -48px no-repeat;
}

#d a:hover {
    background: transparent url("tt.png") -479px -48px no-repeat;
}

#x a:hover {
    background: transparent url("tt.png") -637px -48px no-repeat;
}

#ws a:hover {
    background: transparent url("tt.png") -738px -48px no-repeat;
}

#w a:hover {
    background: transparent url("tt.png") -923px -48px no-repeat;
}


/* 导航栏 结束 */

在这里插入图片描述

今日学习总结

1.初步学习了页面div与css的结合。

gyq426531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018/10/8 渡课学习第六天

目录作业完成汇报今日学习总结作业完成汇报编程题&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="T1.css"&gt;&lt;/hea
复制链接

扫一扫