Rumah > Artikel > hujung hadapan web > html中div设计总结
html中div设计总结
- 高洛峰asal
- 2017-03-28 11:15:581291semak imbas
这篇文章主要为大家详细介绍了html中div设计总结,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>你爸爸</title>
<!-- CSS样式 -->
<style>
#input ul {
margin: 0;
padding: 0;
list-style:none;
padding-top: 25px;
}
#input li {
float: left;
padding-left: 20px;
}
#logo{
height: 25%;
text-align: center;
margin-top: 80px;
margin-bottom: 15px;
}
#logo span{
color: blue;
font-size: 45px;
}
#type{
height: 25%;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
#div1{
width: 100px;
float: left;
padding-left: 32%;
}
#div2{
width: 100px;
float: left;
}
#search{
text-align: center;
width: 100%;
}
#input{
width: 40%;
height: 40px;
float:left;
padding-left:32%;
}
#input span{
padding-top: 25px;
}
#search_input{
width: 100%;
height: 30px;
}
#search_button{
margin-right: 10px;
}
#right_div{
width: 100px;
float:left;
}
#right_div ul{
list-style:none;
margin: auto;
}
#end{
text-align: center;
width: 100%;
height: 20%;
}
</style>
</head>
<body>
<div id="logo" ><span id="google">Google</span>谷歌</div>
<div id="type">
<div id="div1" >网页</div>
<div id="div2" ><a href="#">图片</a></div>
<div id="div2" ><a href="#">资讯</a></div>
<div id="div2" ><a href="#">地图</a></div>
<div id="div2" ><a href="#">更多></a></div>
</div>
<div id="search" ><!-- 外层div -->
<div id="input"><!-- 红色div -->
<input id="search_input" type="text"/><br>
<span>
<input id="search_button" type="button" value="Google 搜索"/>
<input type="button" value="手气不错" />
</span>
<ul>
<li><input type="radio" name="page" value="" checked="checked">所有页面</li>
<li><input type="radio" name="page" value="">中文页面</li>
<li><input type="radio" name="page" value="">简体中文页面</li>
<li><input type="radio" name="page" value="">中国的页面</li>
</ul>
</div>
<div id="right_div"><!-- 绿色div -->
<ul>
<li><a href="#"><font size="2">高级搜索</font></a></li>
<li><a href="#"><font size="2">使用搜索</font></a></li>
<li><a href="#"><font size="2">语言工具</font></a></li>
</ul>
</div>
</div>
</body>
</html>Atas ialah kandungan terperinci html中div设计总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：限制html文本框input只能输入数字和小数点的方法Artikel seterusnya：深入了解HTML中的src、href