Programming questions:
1. Copy Baidu home page and restore it by yourself (imitation station is the best practice way for beginners, and Baidu home page is often the first page most suitable for beginners to contact).
Let's take a look at Baidu's home page:
1) Build with VS2013 ASP.NET Empty website, add a new item, create an HTML file named baidu, and add the following code to it:
<!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <title>Baidu, you know</title> <link rel="stylesheet" type="text/css" href="css/baidu.css"> </head> <body> <div> <a href="http://news.baidu.com/ "> < span > News < / span ></a> <a href="http://www.hao123.com/"><span>hao123</span></a> <a href="http://map.baidu.com/ "> < span > map < / span ></a> <a href="http://V. baidu.com/i "> < span > Video < / span ></a> <a href="http://tieba.baidu.com/ "> < span > Post Bar</a> <a href="http://xueshu.baidu.com/ "> < span > academic < / span ></a> <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww . baidu.com%2F "> login</a> <a href="#"Class =" below "> Settings</a> <button>More products</button> <div> <div> <span>Search settings</span> <span>Advanced search</span> <span>Close forecast</span> <span>Search history</span> </div> </div> </div> <div> <div> <img src="img/baidu.png" alt="Baidu LOGO"> </div> <div> <input type="text" id="text" onfocus="style" /> <input type="submit" value="use Baidu Search" /> </div> </div> <div> <div> <a href="https://www.baidu.com/cache/sethelp/help.html "> set Baidu as home page</a> <a href="http://home.baidu.com "> about Baidu</a> <a href="http://ir.baidu.com">About Baidu</a> <a href="http://E. baidu.com/?refer=888 "> Baidu promotion</a> </div> <div> <span>©2017 Baidu</span> <a href="http://www.baidu.com/duty/ "Class =" copyright "> must read when using Baidu</a> <a href="http://jianyi.baidu.com/ "Class =" copyright "> feedback</a> <span>Beijing ICP Certificate No. 030173</span> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001 "Class = copyright" > jingwanggong'an Bei no.110000020000001</a> <img src="img/jinghui.png" alt="police badge" /> </div> </div> </body> </html>
2) Create a css file named baidu and add the following code to it:
body { margin: 0px; padding: 0px; } .top { margin-top: 20px; text-align: right; } .top a { color: #333; font-size: 13px; margin-right: 10px; } .top a span { font-weight: bold; } .top a:hover { color: #0909F7; } .menu { display: none; background-color: red; margin-left: 90.5%; margin-top: .5%; font-size: 15px; position: relative; float: right; left: -66px; top: -7px; width: 80px; height: 115px; background-image: url(img/memu.png); } .inner { position: relative; left: -15px; top: 15px; } .more { height: 30px; width: 75px; background-color: #3385FF; font-size: 12px; color: #FFF; border: solid; } .midden { margin-top: 7%; text-align: center; } .midden img { width: 270px; height: 129px; } .count { margin-top: 20px; text-align: center; } #text { width: 540px; height: 30px; font-size: 16px; } .button { height: 44px; width: 100px; background-color: #3385FF; font-size: 15px; color: #FFF; border: solid; margin-left: -10px; border-style: none\9; height: 36px\9; } .button:hover { cursor: pointer; } .footing { text-align: center; margin-top: 24%; } .about a { color: silver; font-size: 12px; } .info { margin-top:6px; } .copyright { color:silver; font-size: 12px; } .gongan { width: 15px; height: 15px; }
The project structure is as follows:
At F5, the operation results are as follows:
The above code reference is from the Internet.