仿百度首页HTML和CSS,仿百度首页 野性酷女 2022-10-07 12:47 183阅读 0赞 实现的效果如下图: ![89bdf10b4f57][] 屏幕快照 2017-07-26 13.48.01.png 新手写代码的悲哀,知道代码一堆问题却无从下手,只能贴上实现代码了,html文件中代码: baidu * 成都: 34C 轻度 122 * [ 换肤][Link 1] * [ 消息][Link 1] * 更多产品 * [ 设置][Link 1] * [ 闻人慕学][Link 1] * [ 学术][Link 1] * [ 贴吧][Link 1] * [ 视频][Link 1] * [ 地图][Link 1] * [ hao123][Link 1] * [ 新闻][Link 1] !\[\](baidu.png) 百度一下 * 设为首页 * @2017 Baidu * 使用百度前必读 * 意见反馈 * 京ICP证030173号 京公网安备 CSS中的代码: /\*\*使其是整个完整视图 不会又边距\*/ \* \{ margin:0; padding:0; \} /\*\*头部css\*/ div.header \{ width: 100%; height: 40px; margin-top: 10px; /\*background-color: red;\*/ text-align: center; border-bottom-width: 1px; border-color: gray; border-bottom-style: solid; /\*必须指定风格线条才会展示 默认为none\*/ position: relative; min-width: 1000px; /\*\*避免外围盒子的宽度大于内部盒子的宽度 导致浮动的问题\*/ \} ul.left \{ list-style-type: none; margin-left: 10px; text-align: center; \} li.left \{ float: left; \} li.width \{ width: 50px; text-align: center; \} ul.right \{ list-style-type: none; text-align: center; \} li.right \{ float: right; width: 80px; text-align: center; \} button.blue \{ background-color: blue; color: white; text-align: center; width: 80px; height: 40px; margin-top: -10px; padding-top: 0; \} /\*\*图片和输入框的\*/ div.center \{ text-align: center; position: relative; min-width: 500px; \} .img \{ width: 300px; height: 150px; li.left \{ \} border-width: 1px; \} button.baidu \{ background-color: blue; color: white; text-align: center; width: 80px; height: 45px; margin-top: 0; padding-top: 0; margin-left: -10px; position: relative; \} .input \{ width: 50%; height: 40px; border-color: gray; border-width: 1px; margin-top: 10px; min-width: 10cm; /\*设置宽度最小值\*/ \} /\*\*底部\*/ div.bottom \{ position: relative; text-align: center; margin-top: 1cm; \} /\*\*如何让他居中浮动 如何又使它固定距离底部多少\*/ ul.bottom \{ text-align: center; list-style-type: none; position: relative; float: left; left: 50%; \} li.bottom \{ float: left; position: relative; right: 50%; \} p.bottom \{ text-align: center; \} 知识点小结 外层盒子的宽度要大于内层盒子的宽度,否则浮动的展示会有问题,往第二层展示了 浮动居左,整体又要居中,可是使外层盒子向右移动50%,内存盒子向左移动50% [89bdf10b4f57]: /images/20221005/888eaf7876f14d38a54a0b0659c8114b.png [Link 1]: https://www.baidu.com/
还没有评论,来说两句吧...