广告
淘宝内部优惠券
当前位置: 开发异常方案库» Web 开发 » 各位大哥, 如何模仿这样的界面显示啊,望代码

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

开发异常方案库  收集整理于:2020-05-20 14:36:00  浏览:66次

------网友观点--------------------
不明白你的具体意思

------网友观点--------------------
就是做一个这样的页面,就在自己电脑上显示的就可以,需要交作业

------网友观点--------------------
在这个页面  右键点击,另存成html 就有了

------网友观点--------------------
F12多用用

------网友观点--------------------
这个不难,想自己做的话就是一些段落<p>,和链接<a>,不会的就右击页面的检查可以看结构(F12)可复制可借阅

------网友观点--------------------
1.做个网页如图: 2.输入:css实现百度搜索页面的效果: 3.点击【百度一下】,得题中的效果:

------网友观点--------------------
你直接把百度的代码拿过来就好了,开发者工具打开你的新世界。

------网友观点--------------------
在你需要的浏览器界面上,f12或者右键“检查”,把里面的代码直接复制就行

------网友观点--------------------
ctrl+s

------网友观点--------------------
右键检查,看源码,然后复制粘贴,把路径的css和js复制好就行

------网友观点--------------------
<!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>&nbsp; <span class="setfont-small">@2018 Baidu </span> <span><a href="#" class="setfont-big">使用百度前必读</a></span>&nbsp; <span><a href="#" class="setfont-big">意见反馈</a></span>&nbsp; <span class="setfont-small">京ICP证030173号</span> </div> <div class="bottom-fifthline"> <span class="setfont-small">京公网安备11000002000001号</span> </div> </body> </html>

------网友观点--------------------
F12打开新世界的大门

------网友观点--------------------
鼠标右键点击页面-》页面另存为/保存网页 然后你看看代码?
发布此文章仅为传递网友分享,不代表本站观点,若侵权请联系我们删除,本站将不对此承担任何责任。
软件开发 程序错误 异常 ybaby.netCopyright © 2020-2026  ybaby 版权所有  桂ICP备17004385号-2 网站地图