Heim > Artikel > Web-Frontend > Zusammenfassung des Div-Designs in HTML
Zusammenfassung des Div-Designs in HTML
- 高洛峰Original
- 2017-03-28 11:15:581287Durchsuche
In diesem Artikel wird hauptsächlich die Zusammenfassung des Div-Designs in HTML ausführlich vorgestellt, die einen gewissen Referenzwert hat.
<!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>Das obige ist der detaillierte Inhalt vonZusammenfassung des Div-Designs in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn