Loading

微信小程序相关二、css介绍，菜单制作，表单相关，京东注册页面

一、第二天上午

　　1.1上午因为有其他的课所以没有去这个课，不过下午看复习的时候的概括，讲了DTD，语法特性，css选择器以及权重，还有一些简单的样式

　　1.2 DTD

　　　　　　Docuement Type 声明（define -- 定义）
　　　　　　html4.01 strict、transition、framset html:4s+tab
　　　　　　xhtml strict、transition、framset

　　1.3语法特性

　　　　　　1.3.1 空白折叠现象
　　　　　　1.3.2 严格闭合
　　　　　　1.3.3 嵌套（p -- h）

　　1.4css选择器（上午讲了基础的，下午又新添了几个高级选择器，一下总结了）

　　　　　　1.4.1首先基础的，直接将优先级写出来了

　　　　　　　　！important > html内样式(1000) > id选择器(100) > 类选择器(10) = 伪类选择器 = 属性选择器  > 标签选择器 = 伪元素选择器

　　　　　　　　html内样式 -> 比如<p style="color:red"></p>

　　　　　　　　伪类选择器 -> 比如p:hover{}

　　　　　　　　属性选择器 -> 比如input[type="submit"]

　　　　　　　　标签选择器  -> 比如p{}

　　　　　　　　伪元素选择器 -> 比如 p::after{}

　　　　　　1.4.2补充的高级选择器

　　　　　　　　子代选择器(>) -> 比如 ul > li

　　　　　　　　后代选择器(空格) -> 比如 ul li

　　　　　　　　交集选择器(紧挨着) -> 比如 div#div1

　　　　　　　　并集选择器(,) -> 比如 div1，div2

　　　　　　　　相邻选择器(+) -> 比如 div1+div2

　　　　　　　　属性选择器(E(attr)) -> 比如input[type="submit"]

二、第一天上午的菜单实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜单</title>
 6     <link rel="stylesheet" type="text/css" href="css/index.css">
 7 </head>
 8 <body>
 9     <div class="wrapper caidan">
10         <ul>
11             <li class="title">全部商品分类</li>
12             <li class="other">
13                 <a href="">家用电器<span class="right">></span></a>
14                 <ul class="erjicaidan">
15                     <li>二级菜单1</li>
16                     <li>二级菜单1</li>
17                     <li>二级菜单1</li>
18                     <li>二级菜单1</li>
19                     <li>二级菜单1</li>
20                 </ul>
21             </li>
22             <li class="other">
23                 <a href="">手机、数码、京东通信<span class="right">></span></a>
24                 <ul class="erjicaidan">
25                     <li>二级菜单1</li>
26                     <li>二级菜单1</li>
27                     <li>二级菜单1</li>
28                     <li>二级菜单1</li>
29                     <li>二级菜单1</li>
30                 </ul>
31             </li>
32             <li class="other">
33                 <a href="">电脑、办公<span class="right">></span></a>
34                 <ul class="erjicaidan">
35                     <li>二级菜单1</li>
36                     <li>二级菜单1</li>
37                     <li>二级菜单1</li>
38                     <li>二级菜单1</li>
39                     <li>二级菜单1</li>
40                 </ul>
41             </li>
42             <li class="other"><a href="">家居、家具、家装。厨具<span class="right">></span></a></li>
43             <li class="other"><a href="">男装、女装、珠宝<span class="right">></span></a></li>
44             <li class="other"><a href="">个护化妆<span class="right">></span></a></li>
45             <li class="other"><a href="">鞋靴、箱包、钟表、奢侈品<span class="right">></span></a></li>
46             <li class="other"><a href="">户外运动<span class="right">></span></a></li>
47         </ul>
48     </div>
49 </body>
50 </html>
 1 *{
 2     margin:0;
 3     padding:0;
 4 }
 5 ul{
 6     list-style: none;
 7 }
 8 a{
 9     text-decoration: none;
10     color: white;
11 }
12 a:hover{
13     font-weight: bold;
14 }
15 
16 .wrapper{
17     width: 500px;
18     margin: 0 auto;
19 }
20 .right{
21     float: right;
22 }
23 .left{
24     float: left;
25 }
26 .caidan{
27     font-family: "宋体";
28     background: #C81623;
29     width: 250px;
30     height: 400px;
31     color: white;
32     font-size: 16px;
33     
34 }
35 .caidan>ul>li{
36     padding-left: 10px;
37     padding-right: 10px;
38 }
39 .caidan>ul>.title{
40     background: #B1191A;
41     font-size:20px;
42     height: 50px;
43     line-height: 50px;
44     position: relative;
45 
46 }
47 .caidan>ul>.other{
48     height: 35px;
49     line-height: 35px;
50     position: relative;
51 }
52 .caidan>ul>li>span{
53     font-weight:bold;
54 }
55 
56 /* 二级菜单 */
57 .erjicaidan{
58     display: none;
59     width: 100px;
60     height: 200px;
61     background: red;
62     position: absolute;
63     top: 0;
64     left: 250px;
65     border:1px solid white;
66 }
67 .caidan>ul>.other:hover>ul{
68     display: block;
69 }

三、下午课堂的表单实例

　　3.1一个知识点

　　　　　　左边的label和右边的输入框中间有空隙，但是整个左边的label都是对齐的

　　　　　　给label{display:inline-block;width:200px;text-aline:right;}

　　3.2效果图

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>课堂的表单练习</title>
  6         <link rel="stylesheet" href="css/index.css" />
  7     </head>
  8     <body>
  9         <div class="box">
 10             <!--上面的内容开始-->
 11             <div class="box_item">
 12                 <h3>账户信息</h3>
 13                 <form action="" method="">
 14                     <div class="input_item">
 15                         <label>
 16                             <span>*</span>
 17                             用户名:
 18                         </label>
 19                         <input type="text" value="" required=""/>
 20                     </div>
 21                     <div class="input_item">
 22                         <label>
 23                             <span>*</span>
 24                             请设置密码:
 25                         </label>
 26                         <input type="password" value="" required=""/>
 27                     </div>
 28                     <div class="input_item">
 29                         <label>
 30                             <span>*</span>
 31                             请确认密码:
 32                         </label>
 33                         <input type="password" value="" required=""/>
 34                     </div>            
 35                 </form>
 36             </div><!--上面的内容结束-->
 37             <!--中间的内容-->
 38             <div class="box_item middle">
 39                 <h3>联系人信息</h3>
 40                 <form action="" method="">
 41                     <div class="input_item ">
 42                         <label>
 43                             <span>*</span>
 44                             联系人姓名:
 45                         </label>
 46                         <input type="text" value="" required=""/>
 47                     </div>
 48                     <div class="input_item">
 49                         <label>
 50                             <span>*</span>
 51                             所在部门:
 52                         </label>
 53                         <select>
 54                             <option>请选择</option>
 55                             <option>文艺部</option>
 56                             <option>外联部</option>
 57                             <option>卫生部</option>
 58                             <option>自律部</option>
 59                         </select>
 60                     </div>
 61                     <div class="input_item">
 62                         <label>
 63                             <span>*</span>
 64                             固定电话:
 65                         </label>
 66                         <input type="text" value="" required=""/>
 67                     </div>            
 68                 </form>
 69             </div><!--中间的内容结束-->
 70             <!--下面的内容开始-->
 71             <div class="box_item fotter">
 72                 <h3>公司信息</h3>
 73                 <form action="" method="">
 74                     <div class="input_item ">
 75                         <label>
 76                             <span>*</span>
 77                             公司名称:
 78                         </label>
 79                         <input type="text" value="" required=""/>
 80                     </div>
 81                     <div class="input_item">
 82                         <label>
 83                             <span>*</span>
 84                             购买类型/用途:
 85                         </label>
 86                         <div class="check">
 87                             <input type="checkbox" name="yongtu" value=""><p>IT设备</p>
 88                             <input type="checkbox" name="yongtu" value=""><p>数码通讯</p>
 89                             <input type="checkbox" name="yongtu" value=""><p>办公用品耗材</p>
 90                             <input type="checkbox" name="yongtu" value=""><p>大家电</p>
 91                             <input type="checkbox" name="yongtu" value=""><p>项目合作-政府采购</p>
 92                             <input type="checkbox" name="yongtu" value=""><p>礼品</p>
 93                         </div>
 94                     </div>
 95                     <div class="input_item ">
 96                         <label>
 97                         </label>
 98                         <input type="submit" value="立即注册" />
 99                     </div>
100                 </form>
101             </div><!--下面的内容结束-->
102             
103         </div>
104         
105         
106         
107         
108     </body>
109 </html>
 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 .box{
 6     width: 700px;
 7     margin: 50px auto;
 8 }
 9 .box>.box_item{
10     border: 1px solid #CCCCCC;
11 }
12 
13 /*账户信息样式*/
14 .box>.box_item>h3{
15     background: #F7F7F7;
16     text-indent: 1em;
17     color: black;
18     height: 25px;
19     line-height: 25px;
20     font-size: 18px;
21     font-weight: normal;
22 }
23 .box .box_item .input_item{
24     margin: 15px 0;
25 }
26 .box .box_item .input_item label{
27     display: inline-block;
28     width: 240px;
29     text-align: right;
30     margin-right: 10px;
31     color: #CCCCCC;
32     font-size: 14px;
33 }
34 .box .box_item .input_item span{
35     color: red;
36     font-weight: bold;
37     vertical-align: middle;
38 }
39 .box .box_item .input_item input{
40     height: 25px;
41     background: url(../img/user.jpg) no-repeat 95% center;
42     border: 1px solid #CCCCCC;
43     background-size: 12px 12px;
44 }
45 .box .box_item .input_item input[type="password"]{
46     background: url(../img/psw.jpg) no-repeat 95% center;
47     border: 1px solid #CCCCCC;
48     background-size: 12px 12px;
49 }
50 
51 /*联系人信息样式*/
52 .middle{
53     margin-top: -1px;
54 }
55 .middle .input_item input{
56     background: none!important;
57 }
58 
59 /*公司信息样式*/
60 .fotter{
61     margin-top: -1px;
62 }
63 .fotter .input_item input{
64     background: none!important;
65 }
66 .fotter .input_item .check{
67     display: inline;
68 }
69 .fotter .input_item .check input[type="checkbox"]{
70     vertical-align: middle;
71 }
72 .fotter .input_item .check p{
73     display: inline-block;
74     /*width: 50px!important;*/
75     vertical-align: middle;
76     color: #CCCCCC;
77     font-size: 12px;
78     margin-left: 5px;
79     margin-right: 10px;
80 }
81 .fotter .input_item input[type="submit"]{
82     background: #D40303!important;
83     height: 30px;
84     width: 145px;
85     color: white;
86 }
87 .fotter .input_item input[type="submit"]:hover{
88     background: #7A0202!important;
89     font-weight: bold;
90 }

四、作业京东注册页面实例

　　4.1效果图

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>京东-欢迎注册</title>
  6         <link rel="icon" href="img/title.ico" type="image/x-icon">
  7         <link rel="stylesheet" href="css/index.css" />
  8     </head>
  9     <body>
 10         <!--头部开始-->
 11         <header>
 12             <div class="wrapper">
 13                 <div class="header-left left">
 14                     <img src="img/logo.png" />
 15                     <a>欢迎注册</a>
 16                 </div>
 17                 <div class="header-right right">
 18                     <label>已有账号？</label>
 19                     <a href="../_1京东登录页面/index.html">请登录</a>
 20                 </div>                
 21             </div>
 22         </header>
 23         <!--头部结束-->
 24         <div class="wrapper">
 25             <div class="content">
 26                 <!--左边的表单-->
 27                 <div class="content-left left">
 28                     <div class="lform">
 29                         <!--用户名-->
 30                         <div class="form-item">
 31                             <label>用户名</label>
 32                             <input type="text" value="" placeholder="您的账户名和登录名" id="account">
 33                         </div>
 34                         <div class="form-info" id="acc_info">
 35                             <span>支持中文、字母、数字、“-”“_”的组合，4-20个字符</span>
 36                         </div>
 37                         <!--设置密码-->
 38                         <div class="form-item">
 39                             <label>设置密码</label>
 40                             <input type="text" value="" placeholder="建议至少使用两种字符组合" id="psw">
 41                         </div>
 42                         <div class="form-info" id="psw_info">
 43                             <span>建议使用字母、数字和符号两种及以上的组合，6-20个字符</span>
 44                         </div>
 45                         <!--确认密码-->
 46                         <div class="form-item">
 47                             <label>确认密码</label>
 48                             <input type="text" value="" placeholder="请再次输入密码" id="repsw">
 49                         </div>
 50                         <div class="form-info" id="repsw_info">
 51                             <span>请再次输入密码</span>
 52                         </div>
 53                         <!--中国0086-->
 54                         <div class="form-item">
 55                             <label>中国0086</label>
 56                             <input type="text" value="" placeholder="建议使用常用手机" id="phone">
 57                         </div>
 58                         <div class="form-info" id="phone_info">
 59                             <span>完成验证后，你可以用该手机登录和找回密码</span>
 60                         </div>
 61                         <!--验证码-->
 62                         <div class="form-item">
 63                             <label>验证码</label>
 64                             <input type="text" value="" placeholder="请输入验证码" id="yanzheng">
 65                             <img src="img/yanzheng.jpg" />
 66                         </div>
 67                         <div class="form-info" id="yanzheng_info">
 68                             <span>看不清？点击图片更换验证码</span>
 69                         </div>
 70                         <!--手机验证码-->
 71                         <div class="form-item">
 72                             <label>手机验证码</label>
 73                             <input type="text" value="" placeholder="请输入手机验证码" id="phoneyanzheng">
 74                             <button>获取验证码</button>
 75                         </div>
 76                         <div class="xieyi">
 77                             <input type="checkbox" />
 78                             <p>阅读并同意<a>《京东用户注册协议》</a><a>《隐私政策》</a></p>
 79                         </div>
 80                         <div class="lijizhuce">
 81                             <input type="submit" value="立即注册"/>
 82                         </div>
 83                     </div>
 84                 </div><!--结束-->
 85                 <!--右边的logo-->
 86                 <div class="content-right left">
 87                     <div class="right-top">
 88                         <span></span>
 89                         <a>企业用户注册</a>
 90                     </div>
 91                     <div class="right-bottom">
 92                         <span></span>
 93                         <a>INTERNATION</a>
 94                     </div>
 95                 </div><!--结束-->
 96             </div>
 97         </div>
 98         <!--中间内容开始-->
 99         <!--中间内容结束-->
100         <!--尾部开始-->
101         <footer>
102             <div class="wrapper">
103                 <div class="lianjie">
104                 <a href="">关于我们</a><span>|</span>
105                 <a href="">联系我们</a><span>|</span>
106                 <a href="">人才招聘</a><span>|</span>
107                 <a href="">商家入驻</a><span>|</span>
108                 <a href="">广告服务</a><span>|</span>
109                 <a href="">友情链接</a><span>|</span>
110                 <a href="">销售联盟</a><span>|</span>
111                 <a href="">京东社区</a><span>|</span>
112                 <a href="">京东公益</a><span>|</span>
113                 <a href="">English Site</a>
114                 </div>
115                 <div class="dianhua">
116                     Copyright © 2004-2017  京东JD.com 版权所有 
117                 </div>
118             </div>
119         </footer>
120         <!--尾部结束-->        
121         
122         
123         
124         <script>
125             var acc = document.getElementById("account");
126             var acc_info =document.getElementById("acc_info");
127             var psw = document.getElementById("psw");
128             var psw_info = document.getElementById("psw_info");
129             var repsw = document.getElementById("repsw");
130             var repsw_info = document.getElementById("repsw_info");
131             var phone = document.getElementById("phone");
132             var phone_info = document.getElementById("phone_info");
133             var yanzheng = document.getElementById("yanzheng");
134             var yanzheng_info = document.getElementById("yanzheng_info");
135             var phoneyanzheng = document.getElementById("phoneyanzheng");
136             
137             acc.onfocus= function(){
138                 acc.placeholder = "";
139                 acc_info.style.opacity = 1;
140             }
141             acc.onblur = function(){
142                 acc_info.style.opacity = 0;
143             }
144             
145             psw.onfocus= function(){
146                 psw.placeholder = "";
147                 psw_info.style.opacity = 1;
148             }
149             psw.onblur = function(){
150                 psw_info.style.opacity = 0;
151             }
152             
153             repsw.onfocus= function(){
154                 repsw.placeholder = "";
155                 repsw_info.style.opacity = 1;
156             }
157             repsw.onblur = function(){
158                 repsw_info.style.opacity = 0;
159             }
160             
161             phone.onfocus= function(){
162                 phone.placeholder = "";
163                 phone_info.style.opacity = 1;
164             }
165             phone.onblur = function(){
166                 phone_info.style.opacity = 0;
167             }
168             
169             yanzheng.onfocus= function(){
170                 yanzheng.placeholder = "";
171                 yanzheng_info.style.opacity = 1;
172             }
173             yanzheng.onblur = function(){
174                 yanzheng_info.style.opacity = 0;
175             }
176             
177             phoneyanzheng.onfocus= function(){
178                 phoneyanzheng.placeholder = "";
179             }
180             
181         </script>
182         
183     </body>
184 </html>
  1 /*css初始化*/
  2 *{
  3     margin:0;
  4     padding: 0;
  5 }
  6 a{
  7     /*text-decoration: none;*/
  8 }
  9 ul{
 10     list-style: none;
 11 }
 12 
 13 /*公用样式*/
 14 .wrapper{
 15     width:990px;
 16     margin:0 auto;
 17     min-width: 990px;
 18 }
 19 .left{
 20     float:left;
 21 }
 22 .right{
 23     float: right;
 24 }
 25 .clearfix{
 26     clear: both;
 27 }
 28 a{
 29     color: #666666;
 30 }
 31 a:hover{
 32     color: red;
 33     cursor: pointer;
 34 }
 35 
 36 /*头部*/
 37 header{
 38     background: #FFFFFF;
 39     height: 90px;
 40     width: 100%;
 41     /*position: fixed;
 42     top: 0;
 43     left: 0;*/
 44     box-shadow: 2px 2px 5px #CCCCCC;
 45 }
 46 .header-left{
 47     width: 300px;
 48     height: 60px;
 49     margin: 10px 0px;
 50 }
 51 /*图片和文字都写上vertical-align:middle即可实现在一个水平线上*/
 52 .header-left img{
 53     vertical-align: middle;
 54 }
 55 .header-left a{
 56     vertical-align: middle;
 57     font-size: 20px;
 58     margin-left: 20px;
 59 }
 60 .header-left>a:hover{
 61     color: #666666;
 62 }
 63 .header-right{
 64     color: #CCCCCC;
 65     font-size: 12px;
 66     margin-top: 50px;
 67 }
 68 .header-right label{
 69     vertical-align: middle;
 70 }
 71 .header-right a{
 72     vertical-align: middle;
 73     font-size: 12px;
 74 }
 75 
 76 /*中间的样式*/
 77 .content{
 78     /*height: 600px;*/
 79     overflow: hidden;
 80     margin-top: 30px;
 81     border-bottom: 1px solid #CCCCCC;
 82 }
 83 .content .content-left{
 84     /*background: #B1191A;*/
 85     margin-bottom: 80px;
 86     width: 600px;
 87 }
 88 .content .content-left .lform{
 89     width: 500px;
 90     margin-left: 80px;
 91     /*border: 1px solid red;*/
 92 }
 93 .lform>.form-item{
 94     border: 1px solid #dddddd;
 95     width:450px ;
 96     height: 52px;
 97 }
 98 .lform>.form-item>label{
 99     display: inline-block;
100     height: 52px;
101     line-height: 52px;
102     width: 90px;
103     padding-left: 20px;
104 }
105 .lform>.form-item>input{
106     border: 0 none;
107     font-size: 14px;
108     width: 220px;
109     height: 19px;
110     padding-bottom: 11px;
111     padding-top: 16px;
112 }
113 .lform>.form-item>img{
114     width: 90px;
115     height: 35px;
116     line-height: 35px;
117     vertical-align: middle;
118 }
119 .lform>.form-item>button{
120     width: 90px;
121     height: 48px;
122     border: none;
123     background-color: #CCCCCC;
124 }
125 .lform>.form-info{
126     /*display: block;*/
127     opacity: 0;
128     color: #c5c5c5;
129     height: 27px;
130     font-size: 12px;
131     padding: 10px 0;
132     transition: opacity 0.5s ease;
133 }
134 .lform>.form-item>input:focus + .lform>.form-info{
135     opacity: 1;
136 }
137 
138 
139 .lform .xieyi{
140     /*font-size: 0;*/
141     margin-top: 15px;
142 }
143 .lform .xieyi input{
144     vertical-align: middle;
145 }
146 .lform .xieyi p{
147     vertical-align: middle;
148     display: inline-block;
149     color: black;
150     font-size: 12px;
151 }
152 .lform .xieyi p a{
153     color: #8CD2FF;
154 }
155 .lform .lijizhuce{
156     margin-top: 25px;
157 }
158 .lform .lijizhuce input{
159     width:400px ;
160     height: 52px;
161     background:#EE2222 ;
162     color: white;
163     border: none;
164     font-size: 15px;
165 }
166 .lform .lijizhuce input:hover{
167     background:#CB232F ;
168     font-weight: bold;
169 }
170 
171 /*中间右边的样式*/
172 .content .content-right{
173     height: 500px;
174     width: 380px;
175     /*background: #808080;*/
176     margin-bottom: 50px;
177     border-left: 1px solid #CCCCCC;
178 }
179 .content-right .right-top{
180     width: 170px;
181     margin-left: 100px;
182     padding-bottom: 20px;
183     border-bottom: 1px solid #CCCCCC;
184 }
185 .content-right .right-top span{
186     display: inline-block;
187     vertical-align: middle;
188     background: url(../img/icon.png) no-repeat  0px -48px;
189     width: 32px;
190     height: 32px;
191 }
192 .content-right .right-top a{
193     vertical-align: middle;
194     padding-left: 5px;
195 }
196 .content-right .right-bottom{
197     width: 170px;
198     margin-left: 100px;
199     padding-top: 20px;
200 }
201 .content-right .right-bottom span{
202     display: inline-block;
203     vertical-align: middle;
204     background: url(../img/icon.png) no-repeat  -48px -48px;
205     width: 32px;
206     height: 32px;
207 }
208 
209 /*尾部的样式*/
210 footer{
211     height: 50px;
212     color: #CCCCCC;
213     font-size: 12px;
214     text-align: center;
215     padding-top: 20px;
216 }
217 footer a,footer span{
218     text-decoration: none;
219     padding-left: 5px;
220 }
221 
222 footer .dianhua{
223     padding-top: 10px;
224     margin-bottom: 50px;
225 }

 

posted @ 2017-05-22 10:45  爱笑的眼睛真美  阅读(1002)  评论(0)  编辑  收藏  举报