编辑个人资料
的跟帖
  • 郭郭
    1

    admin 好的,明白了

  • 郭郭
    2
    <!doctype html> 这是个网页文件
    <head></head> 写给浏览器的
    <meta charset="utf-8"> 默认编码(国际标准字库 )
    <title>美设网</title> 网页标题(用于网页标题显示,收藏显示,百度搜索)
    <body>解释每句代码的意思</body> 给用户看的内容
    

    第十八期NO.2

    ————郭郭

  • 郭郭
    3
    <ol>
    	<li>野外搞烧烤</li>
       <li>出去摘桃子和李子</li>
       <li><a href="#" target="_blank">注意事项</a></li>
    </ol>
    

    网页预览

    【作业】NO.3标签练习

  • 郭郭
    4

    作业1

    <form>是用户和网页交互数据表单

    <form>标签是数据采集库,需要配合<input>标签从而进行表单的提交

    比如:叫下幼儿园1班的小红同学,

       搜索<input>小红

       从<form>幼儿园1班 

       如果只是<form>有大范围但你不知道干什么,找小红,还是小明?

       如果只是<input>要找小红,但是你从哪找,幼儿园,小学?

       所以<form>需要<input>配合使用

    等不需要进行数据交互的标签,可以单独使用

    作业2

    <form action="https://www.baidu.com/s" target="_blank">
    <input type="text" name="wd"/>
    <input type="submit" value="百度一下" />
    </form>
    

    预览效果

    [作业]NO4.搜索框制作

    问题:怎么设置搜索框长度和百度一下的底框颜色?

  • 郭郭
    5

    郭郭 

    [作业]NO4.搜索框制作

    回复作业的时候前面两标签,自动忽略啦,一个小bug吗?还是人品不行,只有我的这样?

  • 郭郭
    6

    唯品会首页头部https://www.vip.com/

    <div>
    	<div>
          	<div>
            	<ul>
                	<li><a href="#" target="_blank"><img src="https://b.appsimg.com/2017/08/31/540/1504164551874.png"></a></li>
                    <li><a href="#" target="_blank"><img src="https://b.appsimg.com/2017/08/31/540/1504164551874.png"></a></li>
                    <li><a href="#" target="_blank"><img src="https://b.appsimg.com/2017/08/31/540/1504164551874.png"></a></li>
                    <li><a href="#" target="_blank"><img src="https://b.appsimg.com/2017/08/31/540/1504164551874.png"></a></li>
                </ul>
                <form action="https://category.vip.com" method="get">
                	<input type="text" name="?"/>
                    <input type="submit" />
                </form> 	
                <div>购物车</div>
    		</div>
    	</div>
    <!--上-->
    	<div>	
        	<div>
    			<div>首页</div>
           		<ul>
            		<li><a href="#" target="_blank">616预付</a></li>
                	<li><a href="#" target="_blank">女装</a></li>
               	 	<li><a href="#" target="_blank">母婴</a></li>
                	<li><a href="#" target="_blank">美妆</a></li>
            	</ul>
            	<div>更多</div>
            	<div>
                	<a href="#" target="_blank">分类</a>
                    <a href="#" target="_blank">预告</a>
            	</div>
    		</div>
           	<!-- 此处4个细分-->
    	</div>
    <!--导航-->
    </div>
    
    

    [作业]NO5.简单网页结构编写

    遇到问题:没找到搜索框的name

  • 郭郭
    7
    <style>
    *{ margin:0; padding:0; list-style:none; text-decoration:none;}
    .urse { width:290px; height:170px; margin:0; padding:0;}
    .urse1 { width:290px; height:145px; background-image:url(?)}
    .urse11 { margin:0 auto; width:50px; height:50px; border-radius:25px; background-image:url(http://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg);}
    .urse1 p{ line-height:17px; color:#999; text-align:center;}
    .urse21 { margin:10px 10px 10px 10px; }
    .urse21 li{ width:100px; height:20px; border-radius:9px; background:#ffe4db; margin:0 10px;}
    .urse21 span{ color:#F40; font-size:9x;}
    .urse31 li{ width:90px; height:20px; border-radius:3px; background:#F40;margin:0 3px;}
    .urse2 { width:290px; height:25px; background-color:#ffe4dd;}
    .urse31 span{ color:#f4f4f4; font-size:9x; margin:0 auto;}
    .urse2 p{ color:#f40text-align:center;}
    .l { float:left;}
    </style>
    
    
    <div class="urse">
    	<div class="urse1">
    		<div>
    			<div class="urse11"></div>
    			<p>Hi!你好</p>
    		</div>
        <ul class="urse21">
    			<a href="#" target="_blank"><li class="l"><span>领淘金币抵</span></li></a>
    			<a href="#" target="_blank"><li class="l"><span>会员俱乐部</span></li></a>
    		</ul>
    		<ul class="urse31">
    			<a href="#" target="_blank"><li class="l"><span>登录</span></li></a>
    			<a href="#" target="_blank"><li class="l"><span>注册</span></li></a>
    			<a href="#" target="_blank"><li class="l"><span>开店</span></li></a>
    		</ul>
    	</div>
    	<div class="urse2"><a href="#" target="_blank"><p>网上有害信息举报专区</p></a></div>
    </div>
    

    [作业]NO7.网页色彩

    遇到问题:没找到背景图地址,图片精灵和文字结合不知道怎么做

  • 郭郭
    8
    <div class="miseu">
    	<div class="bd">
    		<div>
    			<a></a>
    			<p></p>
    		</div>
    	</div>
    </div>
    

  • 郭郭
    9
    <style>
      *{ margin:0; padding:0;list-style:none; font-size:18px; line-height:36px;}
    	a { text-decoration:none;}
    	div p[title="ty"] + a { color:#ff1212;}
    	div ul ~ p { color:#093;}
    </style>
    <div>
    	<ul>
    		<li><p><a href="#" alt="miseu mgsns">美设网</a></p></li>
    	</ul>
    	<p title="to">米色设计</p>
    	<p title="ty">代码</p>
    	<a href="#" alt="index miseu">【首页】</a>
    	<p>店招</p>
    	<a href="#" alt="index miseu">导航</a>
    </div>
    

    预览图如下

    [作业]NO9.选择器拓展

  • 郭郭
    10
    <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>
    
    
    

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

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

  • 郭郭
    11
    <style> 
    * { padding:0px; margin:0px; list-style:none;}
    body { background-color:#666; font-family:Verdana, Geneva, sans-serif; font-size:16px;}
    a { text-decoration:none; color:#FFF;}
    .c {transition: all .5s; -webkit-transition: all .5s;}
    .m{ width:480px; height:360px; background-image:url(http://www.5iweb.com.cn/resource/HoverEffectIdeas/img/1.jpg); margin:10px auto; position:relative;z-index:2;right:0; top:0; overflow: hidden;}
    .m1 { width:480px; height:100px; padding:40px; position:absolute; top:200px;}
    .z { width:480px; height:360px; background-color:rgba(42;152;107;0.9); position:relative; z-index:1;}
    .m:hover { right:20px;}
    .m:hover .m1{ top:180px;}
    .m11 { font-size:25px;}
    .m11 span{ font-weight:bold;}
    
    
    </style>
    <body>
    <a href="#" target="_blank" >
    <div class="m c">
      <div class="z">
    	<div class="m1 c">
    	<p class="m11">Nice<span>Lily</span></p>
    	<p>Lily likes to play with crayons and pencils</p>
    	</div>
    </div>
    </div>
    </a>
    </body>
    

    加了个透明背景但是没显示。。。下面那个字一行行显示不会。。。

  • 郭郭
    12
    <style>
    * { margin:0; padding:0; list-style:none;}
    a { text-decoration:none;}
    body { background-color:#69C}
    .urse { width:396px; height:216px; background-color:#FFF; margin:10 auto; border:#CCC solid 1px; position:relative;}
    .urse .urse1 a { float:left;}
    .urse .urse1 img { width:130px; height:70px; padding:0px; border:#CCC solid 1px;}
    .urse .urse3 { position:absolute; z-index:5; bottom:5px; left:50%; margin-left:-30px;}
    .urse .urse3 span{ display:block; width:10px; height:10px; border-radius:5px; background-color:#999; opacity:0.5; float:left; margin:2px;}
    .urse .urse21,.urse22 { display:inline-block; width:20px; height:30px; background-color:#999; opacity:0.5; line-height:30px; color:#FFF;position:absolute; top:50%; margin-top:-15px; text-align:center;}
    .urse .urse21 { z-index:2; left:0px;}
    .urse .urse22 { z-index:3; right:0px;}
    
    </style>
    <body>
    <div class="urse">
    	<div class="urse1">
      	<a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
    	
      <div class="urse2">
      	class="urse21"> < 
        class="urse22"> > 
      
      <div class="urse3">
      	
        
        
        
        
      
    
    </body>
    

    预览

    [作业]NO.12 CSS定位

  • 郭郭
    13
    <style>
    * { padding:0; margin:0; list-style:none;}
    body { background:#66C;}
    .user { width:500px; height:500px; margin:20px auto; background:#FFF; position:relative;}
    /*小猫*/
    .user .lian { width:250px; height:200px; border-radius:50%; background:#29a69c; position: absolute; z-index:3; top:50%; left:50%; margin-top:-100px; margin-left:-125px;}
    .user .yan { width:60px; height:60px; border-radius:50%; background:#FFF; position: absolute; z-index:6;}
    .user .l { top:40%; left:35%;}
    .user .r { top:40%; right:35%;}
    .user .er { width:60px; height:60px; border-radius:50% 35% 50% 50%; background:#228b7f; position: absolute; z-index:2;}
    .user .ll { top:30%; left:30%; transform:rotate(20deg);}
    .user .rr { top:30%; right:30%; transform:rotate(70deg);}
    .user .zui { width:15px; height:30px; border-radius:100% 0 0 100%/50%; border: solid 3px #228b7f; border-right: none; transform:rotate(-90deg); position: absolute; z-index:7;}
    .user .lll { top:58%; left:45%;}
    .user .rrr { top:58%; right:45%;}
    /*大圈*/
    .user li { margin:5px;}
    .user li:nth-child(1) { width:14px; height:14px; border-radius:50%; background:#228b7f;}
    .user li:nth-child(2) { width:12px; height:12px; border-radius:50%; background:#228b7f; opacity:.7;}
    .user li:nth-child(3) { width:9px; height:9px; border-radius:50%; background:#228b7f; opacity:.5;}
    .user .ani2 {position: absolute; z-index:1; top:15%; left:15%; transform-origin:170px 170px;}
    /*眼睛圈*/
    .user .ani { width:6px; height:6px; border-radius:50%; background:#000; position: absolute; z-index:9; top:42%; left:37%; transform-origin:19px 19px;}
    .user .ani { width:6px; height:6px; border-radius:50%; background:#000; position: absolute; z-index:9; top:42%; left:37%; transform-origin:19px 19px;}
    .user .ani1 { width:6px; height:6px; border-radius:50%; background:#000; position: absolute; z-index:9; top:42%; left:55%; transform-origin:19px 19px;}
    /*动画*/
    .user .ani,.ani1,.ani2 {animation:zhuan ease 1.5s infinite;}
    @keyframes zhuan{
    	0%  {transform:rotate(0deg);}
    	12.5%  {transform:rotate(45deg);}
    	25%  {transform:rotate(90deg);}
    	37.5%  {transform:rotate(135deg);}
    	50% {transform:rotate(180deg);}
    	62.5% {transform:rotate(225eg);}
    	75%  {transform:rotate(270deg);}
    	87.5%  {transform:rotate(315deg);}	
    	100% {transform:rotate(360deg);}
    	}
    </style>
    
    <body>
    <div class="user">
    	<div class="lian"></div>
      <div class="yan l"></div>
      <div class="yan r"></div>
      <div class="er ll"></div>
      <div class="er rr"></div>
      <div class="er rr"></div>
      <div class="zui lll"></div>
      <div class="zui rrr"></div>
      <div class="ani"></div>
      <div class="ani1"></div>
      <div class="ani2"><ol>
      					 <li></li>
                 <li></li>
                 <li></li>
      				 </ol></div>
    </div>
    </body>
    

    图片预览

    [作业]NO14.代码动画

  • 郭郭
    14
    <div class="urse" style="width:1700px; height:520px; position:absolute;">
    <div class="j_Twidget" data-widget-type="carousel"
      data-widget-config="{'contentCls':'urse-c','navCls':'urse-n'}">
    	<ul class="urse-c">
      	<li><img src="http://pic0.qiyipic.com/common/lego/20180702/0eb4c6041b734b45af06b9583ced24cf.jpg"></li>
        <li><img src="http://pic0.qiyipic.com/common/lego/20180702/0eb4c6041b734b45af06b9583ced24cf.jpg"></li>
        <li><img src="http://pic0.qiyipic.com/common/lego/20180702/0eb4c6041b734b45af06b9583ced24cf.jpg"></li>
      </ul>
      <ul class="urse-n" style="position:absolute; top:50px; right:400px"; color:#ffffff; padding:50px;>
      	<li><span>极限挑战1</span></li>
        <li><span>极限挑战2</span></li>
        <li><span>极限挑战3</span></li>
      </ul>
    </div>  
    </div>
    

       没有店铺,没法看效果,带入上课讲的那个模板,作业没有上下页就省去啦,给触点加了个行内定位

  • 郭郭
    15
    <div style="width:720px;height:50px;overflow:auto;">
     <div class="sns-widget" data-comment="{
    'param':{
     'title':'在线留言', 
      'target_key':'65194599', 
      'moreurl':'http://cisdesign.taobao.com', 
      'type_id':107, 
      'rec_user_id':'675431384',
      'paramList':{'view':'list_trunPage'}
    }">
    </div>
    </div>
    

    没太理解为啥要写user-id,这个不是都不一样吗