以下内容为运用CSS和html语言实现创建百度首页页面框,初学web,布局不太美观。
<html>
<head>
<title>https://www.baidu.com</title>
<style type="text/css">
#nav{
border:0px red solid;
text-align:right;
width:100%;
height:5%;
font-size:20px;
font-weight:bold;
}
#main{
border:0px red solid;
text-align:center;
width:100%;
height:20%;
font-size:30px;
font-weight:bold;
}
#bottom{
border:0px red solid;
text-align:center;
width:100%;
height:50%;
font-size:30px;
font-weight:bold;
}
#pic{
border:0px red solid;
text-align:left;
width:500px;
height:70%;
font-size:30px;
font-weight:bold;
float:left;
position:relative;
left:100px;
top:10px;
}
#dlink{
border:0px red solid;
text-align:center;
width:500px;
height:70%;
font-size:30px;
font-weight:bold;
float:left;
position:relative;
left:100px;
top:10px;
}
</style>
</head>
<body link="green" alink="yellow" vlink="red">
<div id="nav">
</form></a>
<a href="http://news.baidu.com"><b><u>新闻</u></b></a>
<a href="https://www.hao123.com"><b><u>hao123</u></b></a>
<a href="http://map.baidu.com"><b><u>地图</u></b></a>
<a href="http://video.baidu.com"><b><u>视频</u></b></a>
<a href="http://tieba.baidu.com"><b><u>贴吧</u></b></a>
<a href="http://xueshu.baidu.com"><b><u>学术</u></b></a>
<a href="http://passport.baidu.com"><u>登陆</u></a>
<a href="#">更多产品</a>
<a><p><form>
<select name="degree">
<option name="xinglang" >设置</option>
<option name="yahu" >搜索设置</option>
<option name="sohu" >高级设置</option>
<option name="google" >关闭预测</option>
<option name="google" >隐私设置</option>
</p></select>
</div>
<div id="main" align="center"></div>
<center><img src="baidu.jpg" width="250px" height="120px"></center>
<center><input type="text" name="tel" size="40" >
<input type="button" value="百度一下">
</center><br />
<p><center><u>2019年高考闪电查分,真题答案发布</u></center><br/></p>
<p><br/></p>
<div id="bottom">
<div id="pic">
<span><img src="baidu_1.jpg" width="200px" height="100px"></span>
<span><img src="baidu_2.jpg" width="200px" height="100px"></span>
</div>
<div id="dlink">
<center><u><a href="https://www.baidu.com/cache/sethelp/index.html"><font size="4" color="grey">把百度设为主页</font></a></u>
<u><font size="4" color="grey">关于百度</font></u>
<u><font size="4" color="grey">About baidu</font></u><br/>
<font size="4" color="grey">@2019 baidu</font>
<a href="https://www.baidu.com/duty/"><font size="4" color="grey">使用百度前必读</font></a>
<a href="http://jianyi.baidu.com/"><font size="4" color="grey">意见反馈</font></a>
<font size="4" color="grey">京ICP证030173号</font> <br/>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"><font size="5" color="grey">京公网安备11000002000001号</font></a>
</center></div>
</div>
</body>
</html>
运行结果: