[作业]NO.10 简单网页开发练习

admin 2人参与 0 次点击

前期不适合做复杂的大项目,先拿简单的网页练手。

作业:http://www.17sucai.com/preview/735710/2017-05-14/html1/index.html

要求:

1:这个网页练习,主要是练习下 HTML框架的编写。

2:网页中有JS效果,可不做,只需要做出页面效果就可

3:做完后,如果有时间,可以美化一下这个网页,我个人觉得这个网页的设计是不好看的

    1 讨论 | 直到 2018-06-20 12:23:35
  • 郭郭
    1
    <style>
    	* { margin:0px; padding:0px; list-style:none; text-align:center;}
    	a { text-decoration:none; color:#000;}
    	body { color:#FFF;}
    	.px { width:1140px; margin:0px auto;}
    	.f { float:left;}
    	.h2 { font-size:34px;}
    	.h3 { font-size:24px;}
    	.h4{ font-size:16px;}
    	.h5{ font-size:12px; line-height:20px; }
    	.c0  { color:#000;}
    	.c1 { color:#FFF;}
    	.c2{ color:#F96;}
    	.hd { width:1920px; height:80px; background:#666;}
    	.hd1 ner { width:1920px;}
    	.hd11{ line-height:35px; position:absolute; top:23px; left:10px;}
    	.hd12{ height:35px; display:block; position:absolute; top:23px; left:350px;}
    	.hd13{position:absolute; top:23px; left:750px;}
    	.dh { width:1140px; height:68px;margin:0px auto;}
    	.dh1 { width:14%;display:block; line-height:24px; padding:26px 0;}
    	.ban { margin:10px;}
    	.gn0{ width:1140px; margin:0px auto; position:relative;}
    	.gn { background-color:#666; width:350px; height:220px; padding:30px; position:absolute; top:23px; left:0px;}
    	.gn2 { margin:20px;}
    	.gn3 { width:60px; height:40px; display:block; border:#FFF solid 1px; line-height:40px; margin:10px auto;}
    	.gn4 { width:790px; height:270px; padding:30px; position:absolute; top:23px; left:350px; margin:0 30px;}
    	.gn40 { text-align:left; padding:25px; margin:0px -10px;}
    	.gn4 ul{ width:790px; height:250px; position:relative;}
    	
    	.gn4 li{  width:380px; height:122px; float:left; padding:20px;}
    </style>
    
    <body>
    <div class="hd">	
    	<div class="px hd1">
        	<a href="#" class="hd11"><p class="h2 c1">公司名称</p></a>
            <p class="hd12 h4 c1">电话<br/>56X6 593 980</p>
            <form action="#" method="post" class="hd13">
    		<input type="text" name="text" placeholder="搜索">
            </form>
    	</div>
    </div>
    <!--头部-->
    <div  class="px dh h4">
        <a href="" class="dh1 f">首页</a>
        <a href="" class="dh1 f">关于我们</a>
        <a href="" class="dh1 f">首页</a>
        <a href="" class="dh1 f">首页</a>
        <a href="" class="dh1 f">首页</a>
        <a href="" class="dh1 f">首页</a>
        <a href="" class="dh1 f">事件</a>
    </div>
    <!--导航-->
    <img src="http://www.17sucai.com/preview/735710/2017-05-14/html1/images/banner.jpg" class="banner">
    <div>	
    	<div class="gn0">
        	<div class="gn">
            	<p class="h3 gn1"><span class="h2">100%</span><br/>客户支持</p>
                <p class="h5 gn2">虚拟电话克服了传统电话功能单一,只能接、打电话的缺点。相当于传统的“小总机”,它的核心是一个多通路、可以终生使用的个人通信电话号码,具有“三打三通”的 </p>
                <a href="#" class="h4 c1 gn3">更多</a>
            </div>
            <div class="gn4">
            	<p class="h3 c0 gn40">功能</p>
                <ul>
                	<li>
                    	<p class="h3 c2">虚拟电话系统</p>
                        <p class="h5 c0">虚拟电话克服了传统电话功能单一,只能接、打电话的缺点。相当于传统的“小总机”,它的核心是一个多通路、可以终生使用的个人通信电话号码,具有“三打三通”的</p>
                    </li>
                    <li>
                    	<p class="h3 c2">虚拟电话系统</p>
                        <p class="h5 c0">虚拟电话克服了传统电话功能单一,只能接、打电话的缺点。相当于传统的“小总机”,它的核心是一个多通路、可以终生使用的个人通信电话号码,具有“三打三通”的</p>
                    </li>
                    <li>
                    	<p class="h3 c2">虚拟电话系统</p>
                        <p class="h5 c0">虚拟电话克服了传统电话功能单一,只能接、打电话的缺点。相当于传统的“小总机”,它的核心是一个多通路、可以终生使用的个人通信电话号码,具有“三打三通”的</p>
                    </li>
                    <li>
                    	<p class="h3 c2">虚拟电话系统</p>
                        <p class="h5 c0">虚拟电话克服了传统电话功能单一,只能接、打电话的缺点。相当于传统的“小总机”,它的核心是一个多通路、可以终生使用的个人通信电话号码,具有“三打三通”的</p>
                    </li>
            
                </ul>
            </div>
        </div>
    </div>
    <!--功能-->
    <div>	
    	<div>
        	<p>我们的服务</p>
            <ul>
            	<li>硬件</li>
                <li>硬件</li>
                <li>硬件</li>
                <li>硬件</li>
                <li>硬件</li>
                <li>硬件</li>
            </ul>
        </div>
    </div>
    <!--服务-->
    </body>
    
    
    

    做到功能那啦,对没有限制宽度的全屏背景不知道怎么设置,所以放大缩小会出现不居中情况

    什么时候用清浮动什么时候用定位,不太清楚

  • 抱歉,回复话题必需登录。