当前位置：首页 > news >正文

html的网页制作代码分享

news 2025/6/26 16:26:34

<!--  prj_8_2.html  -->
<!DOCTYPE html>
<html  lang  ="EN"><head><meta   charset="utf-8" /><title>页面布局设计</title><style type ="text/css">*{padding: 0px;margin:0px;}#header{background: url('prj_8_2_logo.png') #4B5B6B   no-repeat  top  left;width:100%;height:60px;}#nav{width:100%;height:80px;}ul{list-style-type: none;width:100%;height:80px;background:#D0C0B0;text-align:center;}li{font-size:20px;padding:20px 10px;display: inline-block;width: 160px;height: 40px;}a:active,a:link,a:visited{text-decoration: none;}a:hover{background: #CCFF99;height: 80px;width:160px;padding:20px 10px;}#main{width:100%;height:500px;background: #FEFEFE}#article{width:75%;height: 500px;background: #DBDACA;float: left;}.section{width: 320px;height:440px;float:left;border:1px  dashed   #006600;text-align: middle;margin: 20px;}img{width: 300px;height: 400px;margin: 10px;}#aside{width:20%;height: 500px;background: #9F9F9A;float: right;text-align: center;vertical-align: middle;}#footer{clear: both;width:100%;height:80px;background: #EAEADA;padding:20px auto;text-align: center;}#footer p{font-size: 20px;padding-top: 25px;height:25px;}</style></head><body><header  id="header"></header><nav id="nav"><ul><li><a herf="#">首页</a></li><li><a herf="#">HTML5  </a></li><li><a herf="#">CSS3</a></li><li><a herf="#">JavaScript</a></li><li><a herf="#">DOM</a></li><li><a herf="#">BOM</a></li></ul></nav><div  id="main"><article id="article"><section   calss="section"><img  src="img/prj_8_2_html5_logo.png"></section><section class="section"><img  src="img/prj_8_2_css3_logo.png"></section><section class="section"><img  src="img/prj_8_2_javascript_logo.png"/></section></article><aside  id="aside"><figure><img  src="img/prj_8_2_html5.png"><figcaption>HTML5结构元素侧边aside</figcaption></figure></aside></div><footer id="footer"><p>Copyright &copy;2017-2020 Web  前端开发工作室-  业务开发-网站建设</p></footer></body>
</html>