各位大哥, 如何模仿这样的界面显示啊,望代码

xivzhao 2020-04-10 04:15:13
...全文
627 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
鼠标右键点击页面-》页面另存为/保存网页


然后你看看代码?
早睡早起◇ 2020-05-20
  • 打赏
  • 举报
回复
F12打开新世界的大门
  • 打赏
  • 举报
回复
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>百度首页</title> <style type="text/css"> .head-big{background-color: #FEFEFE;width: 1366px;height: 24px;border-bottom:1px solid #EAEAEA;} .head-small1{margin-left: 0px;width: 262px;height: 100%;float: left;margin-top: -3px;} .head-small2{width: 540px;height: 100%;float: right;margin-top: -3px;} .light-font-option{width: 86px;height: auto;margin-left: 19px;background-color: #398bfb; height: 100%;font-size: 13px;text-align: center;text-decoration: none;color: white; } .light-font{display: inline-block;color:#555;text-decoration: underline;margin-left:19px; line-height:15px;font-size: 13px; } .heavy-font{display: inline-block;font-weight: bold;color: #555;text-decoration: underline; margin-left: 19px;line-height: 15px;font-size: 13px; } .body-middle{width: 643px;height: 260px;margin-left: 355px;margin-right: 355px; margin-top: 0px;margin-bottom: 80px;} .log{width:100%;height:135px;margin:30px auto 25px;text-align: center;} .search{position: relative;bottom: 20px;padding: 0;width:100%;height:40px; } .input{float: left;padding: 0px;width: 534px;height: 37px;border: 1px solid #3688FD; display: inline-block; } .sub{padding: 0px;width: 102px;height: 39px;padding: 0;border: 0;background-color: #38f; font-size: 16px;color: white;font-weight: normal;display: inline-block;} .bottom{width: 895px;height: 405px;border: 1px solid #E8E8E8;position: relative; bottom: 89px; left: 225px; } .bottom-firstline{width: 100%;height: 40px;border-bottom: 1px solid #E8E8E8; display: inline-block;} .bottom-firstline-1{width: 124px;height: 100%;background-color: #999CA1;font-size: 13px; color: #FEFEEF;text-align: center;line-height: 40px;font-weight: bold; display: inline-block;float: left;} .bottom-firstline-body{display: inline-block;width: 160px;height: 40px; background-color: #FEFEFE;float: left;} .bottom-firstline-font{width: 80px;height: 100%;background-color: #FEFEFE;color: #323232; font-size: 13px;display: inline-block;line-height: 40px;float: left;text-align: center; } .bottom-firstline-font:hover{background-color: #B2B5BA;color: #FEFEFE;} .bottom-secondline{width: 844px;height: 30px;background-color: white; border-bottom: 1px #EFEFEF solid;font-size: 13px;font-weight: bold;color: #000000; position: relative;top: 12px;left: 24px;line-height: 30px;} .bottom-thirdline{margin-top: 28px;width: 893px;height: 30px;} .bottom-thirdline-font{display: inline-block;font-size: 13px;margin-left: 25px; line-height: 30px;} .bottom-fourthline{position: relative;bottom: 70px;width: auto;height: 17.78px; text-align: center;} .bottom-fifthline{margin-top: -70px;width: auto;height: 21.98px;text-align: center; } .setfont-big{font-size: 12px;color: #989898;text-decoration: underline;} .setfont-small{font-size: 12px;color: #989898;} </style> </head> <body> <div class="head-big"> <div class="head-small1"> <a href="#" class="light-font" title="天气" >杭州天气</a> <a href="#" class="light-font" title="换肤">换肤</a> <a href="#" class="light-font" title="消息">消息</a> </div> <div class="head-small2"> <a href="#" class="heavy-font">新闻</a> <a href="#" class="heavy-font">hao123</a> <a href="#" class="heavy-font">地图</a> <a href="#" class="heavy-font">视频</a> <a href="#" class="heavy-font">贴吧</a> <a href="#" class="heavy-font">学术</a> <a href="#" class="light-font">登录</a> <a href="#" class="light-font">设置</a> <select class="light-font-option"> <option>更多产品</option> <option>糯米</option> <option>音乐</option> <option>图片</option> <option>知道</option> <option>文库</option> <option>风云榜</option> <option>百度推广</option> </select> </div> </div> <div class="body-middle"> <div class="log"> <img src="C:\Users\jeck\Desktop\百度首页模拟\baidulog.png" title="百度一下,你就知道" width="270px" height="129px" > </div> <div class="search"> <input class="input" type="text" name="ser"><input class="sub" type="submit" value="百度一下"> </div> </div> <div class="bottom"> <div class="bottom-firstline"> <div class="bottom-firstline-1">我的关注</div> <div class="bottom-firstline-body"> <span class="bottom-firstline-font">推荐</span> <span class="bottom-firstline-font">导航</span> </div> </div> <div class="bottom-secondline">▶ 我的导航(0)</div> <div> <div class="bottom-thirdline"> <span class="bottom-thirdline-font">✚ 自定义</span> </div> </div> </div > <div class="bottom-fourthline"> <span><a href="#" class="setfont-big">设为首页</a></span>  <span class="setfont-small">@2018 Baidu </span> <span><a href="#" class="setfont-big">使用百度前必读</a></span>  <span><a href="#" class="setfont-big">意见反馈</a></span>  <span class="setfont-small">京ICP证030173号</span> </div> <div class="bottom-fifthline"> <span class="setfont-small">京公网安备11000002000001号</span> </div> </body> </html>
weixin_44388223 2020-04-24
  • 打赏
  • 举报
回复
右键检查,看源码,然后复制粘贴,把路径的css和js复制好就行
起伏羊 2020-04-22
  • 打赏
  • 举报
回复
ctrl+s
huangfuyk 2020-04-21
  • 打赏
  • 举报
回复
在你需要的浏览器界面上,f12或者右键“检查”,把里面的代码直接复制就行
简_洋 2020-04-16
  • 打赏
  • 举报
回复
你直接把百度的代码拿过来就好了,开发者工具打开你的新世界。
kmokd 2020-04-15
  • 打赏
  • 举报
回复
1.做个网页如图:
2.输入:css实现百度搜索页面的效果:
3.点击【百度一下】,得题中的效果:
Cone0212 2020-04-14
  • 打赏
  • 举报
回复
这个不难,想自己做的话就是一些段落<p>,和链接<a>,不会的就右击页面的检查可以看结构(F12)可复制可借阅
Maybe You 2020-04-13
  • 打赏
  • 举报
回复
在这个页面 右键点击,另存成html 就有了
weixin_41887563 2020-04-13
  • 打赏
  • 举报
回复
F12多用用
xivzhao 2020-04-12
  • 打赏
  • 举报
回复
就是做一个这样的页面,就在自己电脑上显示的就可以,需要交作业
  • 打赏
  • 举报
回复
不明白你的具体意思

61,111

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧