首先说下今天都学习的东西都有那些,最主要的是学习了网页用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{ //这个是设置它的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; }
第十点:在html里面唯一一个难点就是在span标签的地方给换成了div的标签了,因为之前没有设置div标签它会把天气后面的其余标签移入到下面去了,主要的原因是我自己设置了一个padding的属性给他值了,改正是给这个元素删除以后给他个possition:absolute,设置一个绝对定位。
第十一点:weather_2这个地方当时想了很久,一直不知道该如何把在上面有一个图片的div下面移动到这个div的下面,最后的解决的办法是使用position-absolut,绝对定位,它是跨界元素且它不占位置,所以使用它。
第十二点:在写最后一个天气的时候用到了一个就是UI,li这两个标签难点是在这两个标签里面不知道能不能加元素,不知道能不能写字,百度解决的,然后用br换行,换完行之后然后使用它的一些属性了,属性都有list-style,去前面的点,然后我们设置它的浮动向右,设置它的外边距,设置它的字体大小,然后在设置它的居中和行高。
第十三点:重点就是在父元素的类里面先隐藏你需要隐藏的显示框用display:none;然后你在用伪类选择器的hover,显示出你需要显示的东西,.weather_it ul li:hover{background-color: #F4F4F4;cursor: pointer;}。