前端----Html的布局

最新推荐文章于 2023-12-05 14:10:18 发布

空白的时候

最新推荐文章于 2023-12-05 14:10:18 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/qq_33188563/article/details/80984008

版权

1.关于布局，最好自己实践一下做一个百度页面接下来我会发出我的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度一下</title>
		<link type="text/css" rel="stylesheet" href="baidu.css">
	</head>
	<body>
		<div class="div_title">
                               <!--
                               	作者：offline
                               	时间：2018-07-10
                               	描述：百度的开头布局
                               -->
			<a href="">新闻</a>
			<a href="">hao123</a>
			<a href="">地图</a>
            <a href="">视频</a>
            <a href="">贴吧</a>
            <a href="">学术</a>
			<a href="">登陆</a>
			<a href="">设置</a>
			<a href="">更多产品</a>
		</div>
		<div class ="div_baidu">
                                <!--
                                	作者：offline
                                	时间：2018-07-10
                                	描述：百度的图片布局
                                -->
			<img class ="div_baidusrc" src="logo1.png" />
		</div>
		<div class ="div_input">
                                <!--
                                	作者：offline
                                	时间：2018-07-10
                                	描述：百度的输入框布局
                                -->
			<form name ="form1" action ="https://www.baidu.com/s" method ="GET">
			<input  style="width:550px;height:30px;" name="wd" value=""/>
			<input type="hidden" name="ie" value="utf-8"/>
			<div class="div_picture" style="margin-top:-2.5%; margin-left:42.5%;">
				<img src="logo2.png" />
				
			</div>
			<div style="margin-top:-3%; margin-left:46.1%;"><input style="height:33px;background-color:deepskyblue; color:white ;" type ="submit" value="百度一下" /></div>
			
			</form>
			
		</div>
		<div class="div_2weimasrc" >
                                    <!--
                                    	作者：offline
                                    	时间：2018-07-10
                                    	描述：百度的2微码布局
                                    -->
			<div  class="div_2weimasrc1" id="src1"><img src="logo3.png" style="margin-top: 20%;" /></div>
		</div>
		<div class ="div_tuigang">
			<div class="div_shuoming" style="margin-left:40% ;">
			<a href="">把百度设为主页</a>     
			<a href="">关于百度</a>    
			<a href="">About Baidu</a>    
			<a href="">百度推广</a></div>
			
		</div>
		<div clas ="div_g">
                           <!--
                           	作者：offline
                           	时间：2018-07-10
                           	描述：百度结尾布局
                           -->
			<div class="div_g1" style="margin-left: 30%;">
				<p>©2018 Baidu      <a href="">使用百度前必读</a>     <a href="">意见反馈</a>        京ICP证030173号  京公网安备11000002000001号 </p>
			</div>
			
		</div>
	</body>
 </html>

CSS：

*{
	margin: 0;
	padding: 0;
}
html{
	font-family: "微软雅黑";
}
.div_title{
	width: 100%;
	height: 100px;
	margin-left:75%;
	font-size:13px ;
}
.div_baidusrc{
	
	height: 200px;
	margin-left: 40%;
}
.div_input{
	margin: 50px;
	margin-left: 35%;
}
.div_2weimasrc{
	width: 100%;
	height: 300px;
	
}
.div_2weimasrc .div_2weimasrc1{
	margin-left: 50%;
}

空白的时候

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端----Html的布局

1.关于布局，最好自己实践一下做一个百度页面接下来我会发出我的例子&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度一下&lt;/title&gt; &lt;link type="text/css" rel="
复制链接

扫一扫