html中div设计总结
程序员文章站
2022-03-15 23:12:42
...
这篇文章主要为大家详细介绍了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>
以上就是html中div设计总结的详细内容,更多请关注其它相关文章!