写360搜索网页总结

首先说下今天都学习的东西都有那些，最主要的是学习了网页用div布局，前段有句话是万事万物都可div。

我在学学习写网页的时候，第一个元素是，min-width和min-height这两个元素，这两个元素主要是负责也面的分倍率的，如果把页面最小化它是可拉伸的。

第二个点是，对于a标签的处理效果，text-decoration: none;去除a标签的下划线，text-decoration: underline;在鼠标移动到文字和标签的时候，显示下划线。

第三点：对于列表的前面的小黑点的去除，很简单，还有对于a标签的对齐的问题，如果不对齐利用line-height。

第四点：怎么处理第二个div居中的问题，margin: 100px auto;这是设置上下外边距100px和左右边距自动对齐，text-align: center;然后在文本框内输入文本居中。它就居中了。

第五点：html,body{width: 100%;height: 100%;}，这点也很重要，因为360搜索的首页面比较特殊，它的页面宽和高都是100%所以在页面的前面会加上这个元素。

第六点：.nav_2 a,.nav_2 .like这个写法是，父元素的a标签的子标签的这个like类会和父元素的一些属性是一样的。

第七点：img标签里面有两个难点我不会的，font-size: 0;这个元素主要是设置input标签与button的标签的中间的缝隙的问题，因为input标签里面一定会有尺寸px的所以在父标签上设置设置就可以解决了，vertical-align: top;这个标签主要是设置input和button两个标签的上下不对齐，在两个标签里都设置相同的元素就会水平垂直对齐了。

第八点：position: absolute;bottom: 0;这是一个绝对定位的标签设置这个div的位置在最下面，然后在边框里面的东西设置一个text-align: center;文字就会水平居中了。

最重要的：

第九点：这个是一个当鼠标悬停在那个标签的时候会显示一个下拉菜单，里面会有一些元素反正基本上知道这个元素在哪里面能找到会怎么用它会复制代码，知道复制哪个地方的代码就OK了。代码示例：

html：<span class="iconfont icon-down">这一行代码就代表着在这个标签里加上这个按钮可以显示下拉菜单的，然后我们在css里面设置它的样式下面有代码示例：

@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1566981829073'); /* IE9 */
    src: url('iconfont.eot?t=1566981829073#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJgAAsAAAAABhAAAAIUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAocPwE2AiQDCAsGAAQgBYRtBy4bYwURBdTIfh7GxszmlqL8mCdXTHGi2l8Tqsb7HkE1Vvbs7iGqR1JfkcCOQCEa8TYqES5KsLEsWUdffhUzJ4QP49amDPdGRSiW7HnwXZ6R/024kK7zdbpKVcgKWZ/ncnoT6EDmBzrX0Rw05sCjXoBxIAW6B0aRlVDGDWMXvMDHBJoW7InT/dmr6gp7VSBeuMd31QtJRWGVulBtOFjEaxX19DKNV9H345/9qJNUMrvn4qMzDxz/yanJB7MDNwJCioCOV5Cxh0JcbSyelwXjsubpYgVFEfw0m+GAOKpXsL/Obm+DOVgKfvJWCpDgsabKqE06RuTb+PhTJ451zHH4s3yyOJ4FgurbN2f1Dv+vtwr4vCJPMSxMfZ1Q8O7qwKFi6LY/FU1tdCTzBAlNTczg6NCPqa7JiaqhbjIhXDOfIatbIwu7h4qWQ6iqO4ayaddwvGWElaI0sOMNEPo+SLo+Iuv7koX9oWLqj6p+lGi6HqMLWzbCqVOMo+AC0wvcTKt2g6LiziOaWxw5r0f8FXl3GWirplwZcEVeYst+N52IBs2UoAfPYYwEG5PHWSorsh3qWje9qZopZcopDI0EWoDJC3BmZKWD8UJVPn+EjJtoxB2GuvIKsZ2bHbQqzQBysK2DDI/yyu7O6AihAY2RBPRgHooiArbmeR6aiYqdkN8c1M4oPdRWbe9If3cCmmx3CmcwKw/osWYZAAA=') format('woff2'),
    url('iconfont.woff?t=1566981829073') format('woff'),
    url('iconfont.ttf?t=1566981829073') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1566981829073#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 10px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-down:before {
    content: "\e610";
  }


  .moreBtn:hover ul{
    display: block;   //前面的基本上都是复制粘贴一下就OK了，这一行是我们实现当鼠标悬停时它的显示的
  }

当我们最后给这个下拉菜单设置的属性。

.more ul{
    width: 70px;
    height: 200px;
    border: 1px solid #CCCCCC;
    list-style: none;
    position: absolute;
    left: 445px;
    top: 34px;
    display: none;
    background-color:white;
}
.more ul li{
    width: 70px;
    height: 28px;
    line-height: 28px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}
.more ul li:hover{  
    background-color:#19b955;
    color: white;
}

写360搜索网页总结

猜你喜欢