微信小程序相关二、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"]
二、第一天上午的菜单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="wrapper caidan">
<ul>
<li class="title">全部商品分类</li>
<li class="other">
<a href="">家用电器<span class="right">></span></a>
<ul class="erjicaidan">
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
</ul>
</li>
<li class="other">
<a href="">手机、数码、京东通信<span class="right">></span></a>
<ul class="erjicaidan">
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
</ul>
</li>
<li class="other">
<a href="">电脑、办公<span class="right">></span></a>
<ul class="erjicaidan">
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
<li>二级菜单1</li>
</ul>
</li>
<li class="other"><a href="">家居、家具、家装。厨具<span class="right">></span></a></li>
<li class="other"><a href="">男装、女装、珠宝<span class="right">></span></a></li>
<li class="other"><a href="">个护化妆<span class="right">></span></a></li>
<li class="other"><a href="">鞋靴、箱包、钟表、奢侈品<span class="right">></span></a></li>
<li class="other"><a href="">户外运动<span class="right">></span></a></li>
</ul>
</div>
</body>
</html>
*{
margin:;
padding:;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: white;
}
a:hover{
font-weight: bold;
}
.wrapper{
width: 500px;
margin: 0 auto;
}
.right{
float: right;
}
.left{
float: left;
}
.caidan{
font-family: "宋体";
background: #C81623;
width: 250px;
height: 400px;
color: white;
font-size: 16px;
}
.caidan>ul>li{
padding-left: 10px;
padding-right: 10px;
}
.caidan>ul>.title{
background: #B1191A;
font-size:20px;
height: 50px;
line-height: 50px;
position: relative;
}
.caidan>ul>.other{
height: 35px;
line-height: 35px;
position: relative;
}
.caidan>ul>li>span{
font-weight:bold;
}
/* 二级菜单 */
.erjicaidan{
display: none;
width: 100px;
height: 200px;
background: red;
position: absolute;
top:;
left: 250px;
border:1px solid white;
}
.caidan>ul>.other:hover>ul{
display: block;
}
三、下午课堂的表单实例
3.1一个知识点
左边的label和右边的输入框中间有空隙，但是整个左边的label都是对齐的
给label{display:inline-block;width:200px;text-aline:right;}
3.2效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课堂的表单练习</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="box">
<!--上面的内容开始-->
<div class="box_item">
<h3>账户信息</h3>
<form action="" method="">
<div class="input_item">
<label>
<span>*</span>
用户名:
</label>
<input type="text" value="" required=""/>
</div>
<div class="input_item">
<label>
<span>*</span>
请设置密码:
</label>
<input type="password" value="" required=""/>
</div>
<div class="input_item">
<label>
<span>*</span>
请确认密码:
</label>
<input type="password" value="" required=""/>
</div>
</form>
</div><!--上面的内容结束-->
<!--中间的内容-->
<div class="box_item middle">
<h3>联系人信息</h3>
<form action="" method="">
<div class="input_item ">
<label>
<span>*</span>
联系人姓名:
</label>
<input type="text" value="" required=""/>
</div>
<div class="input_item">
<label>
<span>*</span>
所在部门:
</label>
<select>
<option>请选择</option>
<option>文艺部</option>
<option>外联部</option>
<option>卫生部</option>
<option>自律部</option>
</select>
</div>
<div class="input_item">
<label>
<span>*</span>
固定电话:
</label>
<input type="text" value="" required=""/>
</div>
</form>
</div><!--中间的内容结束-->
<!--下面的内容开始-->
<div class="box_item fotter">
<h3>公司信息</h3>
<form action="" method="">
<div class="input_item ">
<label>
<span>*</span>
公司名称:
</label>
<input type="text" value="" required=""/>
</div>
<div class="input_item">
<label>
<span>*</span>
购买类型/用途:
</label>
<div class="check">
<input type="checkbox" name="yongtu" value=""><p>IT设备</p>
<input type="checkbox" name="yongtu" value=""><p>数码通讯</p>
<input type="checkbox" name="yongtu" value=""><p>办公用品耗材</p>
<input type="checkbox" name="yongtu" value=""><p>大家电</p>
<input type="checkbox" name="yongtu" value=""><p>项目合作-政府采购</p>
<input type="checkbox" name="yongtu" value=""><p>礼品</p>
</div>
</div>
<div class="input_item ">
<label>
</label>
<input type="submit" value="立即注册" />
</div>
</form>
</div><!--下面的内容结束--> </div> </body>
</html>
*{
margin:;
padding:;
}
.box{
width: 700px;
margin: 50px auto;
}
.box>.box_item{
border: 1px solid #CCCCCC;
}
/*账户信息样式*/
.box>.box_item>h3{
background: #F7F7F7;
text-indent: 1em;
color: black;
height: 25px;
line-height: 25px;
font-size: 18px;
font-weight: normal;
}
.box .box_item .input_item{
margin: 15px 0;
}
.box .box_item .input_item label{
display: inline-block;
width: 240px;
text-align: right;
margin-right: 10px;
color: #CCCCCC;
font-size: 14px;
}
.box .box_item .input_item span{
color: red;
font-weight: bold;
vertical-align: middle;
}
.box .box_item .input_item input{
height: 25px;
background: url(../img/user.jpg) no-repeat 95% center;
border: 1px solid #CCCCCC;
background-size: 12px 12px;
}
.box .box_item .input_item input[type="password"]{
background: url(../img/psw.jpg) no-repeat 95% center;
border: 1px solid #CCCCCC;
background-size: 12px 12px;
}
/*联系人信息样式*/
.middle{
margin-top: -1px;
}
.middle .input_item input{
background: none!important;
}
/*公司信息样式*/
.fotter{
margin-top: -1px;
}
.fotter .input_item input{
background: none!important;
}
.fotter .input_item .check{
display: inline;
}
.fotter .input_item .check input[type="checkbox"]{
vertical-align: middle;
}
.fotter .input_item .check p{
display: inline-block;
/*width: 50px!important;*/
vertical-align: middle;
color: #CCCCCC;
font-size: 12px;
margin-left: 5px;
margin-right: 10px;
}
.fotter .input_item input[type="submit"]{
background: #D40303!important;
height: 30px;
width: 145px;
color: white;
}
.fotter .input_item input[type="submit"]:hover{
background: #7A0202!important;
font-weight: bold;
}
四、作业京东注册页面实例
4.1效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东-欢迎注册</title>
<link rel="icon" href="img/title.ico" type="image/x-icon">
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!--头部开始-->
<header>
<div class="wrapper">
<div class="header-left left">
<img src="img/logo.png" />
<a>欢迎注册</a>
</div>
<div class="header-right right">
<label>已有账号？</label>
<a href="../_1京东登录页面/index.html">请登录</a>
</div>
</div>
</header>
<!--头部结束-->
<div class="wrapper">
<div class="content">
<!--左边的表单-->
<div class="content-left left">
<div class="lform">
<!--用户名-->
<div class="form-item">
<label>用户名</label>
<input type="text" value="" placeholder="您的账户名和登录名" id="account">
</div>
<div class="form-info" id="acc_info">
<span>支持中文、字母、数字、“-”“_”的组合，4-20个字符</span>
</div>
<!--设置密码-->
<div class="form-item">
<label>设置密码</label>
<input type="text" value="" placeholder="建议至少使用两种字符组合" id="psw">
</div>
<div class="form-info" id="psw_info">
<span>建议使用字母、数字和符号两种及以上的组合，6-20个字符</span>
</div>
<!--确认密码-->
<div class="form-item">
<label>确认密码</label>
<input type="text" value="" placeholder="请再次输入密码" id="repsw">
</div>
<div class="form-info" id="repsw_info">
<span>请再次输入密码</span>
</div>
<!--中国0086-->
<div class="form-item">
<label>中国0086</label>
<input type="text" value="" placeholder="建议使用常用手机" id="phone">
</div>
<div class="form-info" id="phone_info">
<span>完成验证后，你可以用该手机登录和找回密码</span>
</div>
<!--验证码-->
<div class="form-item">
<label>验证码</label>
<input type="text" value="" placeholder="请输入验证码" id="yanzheng">
<img src="img/yanzheng.jpg" />
</div>
<div class="form-info" id="yanzheng_info">
<span>看不清？点击图片更换验证码</span>
</div>
<!--手机验证码-->
<div class="form-item">
<label>手机验证码</label>
<input type="text" value="" placeholder="请输入手机验证码" id="phoneyanzheng">
<button>获取验证码</button>
</div>
<div class="xieyi">
<input type="checkbox" />
<p>阅读并同意<a>《京东用户注册协议》</a><a>《隐私政策》</a></p>
</div>
<div class="lijizhuce">
<input type="submit" value="立即注册"/>
</div>
</div>
</div><!--结束-->
<!--右边的logo-->
<div class="content-right left">
<div class="right-top">
<span></span>
<a>企业用户注册</a>
</div>
<div class="right-bottom">
<span></span>
<a>INTERNATION</a>
</div>
</div><!--结束-->
</div>
</div>
<!--中间内容开始-->
<!--中间内容结束-->
<!--尾部开始-->
<footer>
<div class="wrapper">
<div class="lianjie">
<a href="">关于我们</a><span>|</span>
<a href="">联系我们</a><span>|</span>
<a href="">人才招聘</a><span>|</span>
<a href="">商家入驻</a><span>|</span>
<a href="">广告服务</a><span>|</span>
<a href="">友情链接</a><span>|</span>
<a href="">销售联盟</a><span>|</span>
<a href="">京东社区</a><span>|</span>
<a href="">京东公益</a><span>|</span>
<a href="">English Site</a>
</div>
<div class="dianhua">
Copyright © 2004-2017 京东JD.com 版权所有
</div>
</div>
</footer>
<!--尾部结束--> <script>
var acc = document.getElementById("account");
var acc_info =document.getElementById("acc_info");
var psw = document.getElementById("psw");
var psw_info = document.getElementById("psw_info");
var repsw = document.getElementById("repsw");
var repsw_info = document.getElementById("repsw_info");
var phone = document.getElementById("phone");
var phone_info = document.getElementById("phone_info");
var yanzheng = document.getElementById("yanzheng");
var yanzheng_info = document.getElementById("yanzheng_info");
var phoneyanzheng = document.getElementById("phoneyanzheng"); acc.onfocus= function(){
acc.placeholder = "";
acc_info.style.opacity = 1;
}
acc.onblur = function(){
acc_info.style.opacity = 0;
} psw.onfocus= function(){
psw.placeholder = "";
psw_info.style.opacity = 1;
}
psw.onblur = function(){
psw_info.style.opacity = 0;
} repsw.onfocus= function(){
repsw.placeholder = "";
repsw_info.style.opacity = 1;
}
repsw.onblur = function(){
repsw_info.style.opacity = 0;
} phone.onfocus= function(){
phone.placeholder = "";
phone_info.style.opacity = 1;
}
phone.onblur = function(){
phone_info.style.opacity = 0;
} yanzheng.onfocus= function(){
yanzheng.placeholder = "";
yanzheng_info.style.opacity = 1;
}
yanzheng.onblur = function(){
yanzheng_info.style.opacity = 0;
} phoneyanzheng.onfocus= function(){
phoneyanzheng.placeholder = "";
} </script> </body>
</html>
/*css初始化*/
*{
margin:;
padding:;
}
a{
/*text-decoration: none;*/
}
ul{
list-style: none;
} /*公用样式*/
.wrapper{
width:990px;
margin:0 auto;
min-width: 990px;
}
.left{
float:left;
}
.right{
float: right;
}
.clearfix{
clear: both;
}
a{
color: #666666;
}
a:hover{
color: red;
cursor: pointer;
} /*头部*/
header{
background: #FFFFFF;
height: 90px;
width: 100%;
/*position: fixed;
top: 0;
left: 0;*/
box-shadow: 2px 2px 5px #CCCCCC;
}
.header-left{
width: 300px;
height: 60px;
margin: 10px 0px;
}
/*图片和文字都写上vertical-align:middle即可实现在一个水平线上*/
.header-left img{
vertical-align: middle;
}
.header-left a{
vertical-align: middle;
font-size: 20px;
margin-left: 20px;
}
.header-left>a:hover{
color: #666666;
}
.header-right{
color: #CCCCCC;
font-size: 12px;
margin-top: 50px;
}
.header-right label{
vertical-align: middle;
}
.header-right a{
vertical-align: middle;
font-size: 12px;
} /*中间的样式*/
.content{
/*height: 600px;*/
overflow: hidden;
margin-top: 30px;
border-bottom: 1px solid #CCCCCC;
}
.content .content-left{
/*background: #B1191A;*/
margin-bottom: 80px;
width: 600px;
}
.content .content-left .lform{
width: 500px;
margin-left: 80px;
/*border: 1px solid red;*/
}
.lform>.form-item{
border: 1px solid #dddddd;
width:450px ;
height: 52px;
}
.lform>.form-item>label{
display: inline-block;
height: 52px;
line-height: 52px;
width: 90px;
padding-left: 20px;
}
.lform>.form-item>input{
border: 0 none;
font-size: 14px;
width: 220px;
height: 19px;
padding-bottom: 11px;
padding-top: 16px;
}
.lform>.form-item>img{
width: 90px;
height: 35px;
line-height: 35px;
vertical-align: middle;
}
.lform>.form-item>button{
width: 90px;
height: 48px;
border: none;
background-color: #CCCCCC;
}
.lform>.form-info{
/*display: block;*/
opacity:;
color: #c5c5c5;
height: 27px;
font-size: 12px;
padding: 10px 0;
transition: opacity 0.5s ease;
}
.lform>.form-item>input:focus + .lform>.form-info{
opacity:;
} .lform .xieyi{
/*font-size: 0;*/
margin-top: 15px;
}
.lform .xieyi input{
vertical-align: middle;
}
.lform .xieyi p{
vertical-align: middle;
display: inline-block;
color: black;
font-size: 12px;
}
.lform .xieyi p a{
color: #8CD2FF;
}
.lform .lijizhuce{
margin-top: 25px;
}
.lform .lijizhuce input{
width:400px ;
height: 52px;
background:#EE2222 ;
color: white;
border: none;
font-size: 15px;
}
.lform .lijizhuce input:hover{
background:#CB232F ;
font-weight: bold;
} /*中间右边的样式*/
.content .content-right{
height: 500px;
width: 380px;
/*background: #808080;*/
margin-bottom: 50px;
border-left: 1px solid #CCCCCC;
}
.content-right .right-top{
width: 170px;
margin-left: 100px;
padding-bottom: 20px;
border-bottom: 1px solid #CCCCCC;
}
.content-right .right-top span{
display: inline-block;
vertical-align: middle;
background: url(../img/icon.png) no-repeat 0px -48px;
width: 32px;
height: 32px;
}
.content-right .right-top a{
vertical-align: middle;
padding-left: 5px;
}
.content-right .right-bottom{
width: 170px;
margin-left: 100px;
padding-top: 20px;
}
.content-right .right-bottom span{
display: inline-block;
vertical-align: middle;
background: url(../img/icon.png) no-repeat -48px -48px;
width: 32px;
height: 32px;
} /*尾部的样式*/
footer{
height: 50px;
color: #CCCCCC;
font-size: 12px;
text-align: center;
padding-top: 20px;
}
footer a,footer span{
text-decoration: none;
padding-left: 5px;
} footer .dianhua{
padding-top: 10px;
margin-bottom: 50px;
}
微信小程序相关二、css介绍，菜单制作，表单相关，京东注册页面的更多相关文章
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- 微信小程序配置二
tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedC ...
- 微信小程序一键生成源码 在线制作定制功能强大的微信小程序
微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...
- 前端笔记之微信小程序（一）初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...
- 微信小程序 - 结构目录 | 配置介绍
结构目录 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 一.小程序文件结构和传 ...
- 微信小程序入门二
# 微信小程序开发实战 ## 准备 ### 课程概要 - 微信小程序基本介绍- 开发环境及工具的安装配置- 微信小程序的设计规范- 微信小程序基本结构分析- WXML和WXSS语法规范- 微信小程序A ...
- C#开发微信小程序（二）
导航:C#开发微信小程序系列 关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中 ...
- 又是新动作！微信小程序专属二维码出炉
又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者 ...
- 家庭记账本之微信小程序（二）
在网上查阅了资料后,了解到了在完成微信小程序之前要完成注册阶段的工作,此次在这介绍注册阶段的流程. 1.首先你要确定小程序的定位.目的以及文案资料等(准备工作). 2.打开微信公众平台官网,点击右上角 ...
- 优秀WordPress版微信小程序推荐(二)
随着使用WordPress版微信小程序的用户越来越多,其中涌现不少优秀的小程序,无论UI设计还是功能上都远远超过我开源的程序.这次是推荐第二批优秀Wordpress版微信小程序,希望有更多的小程序的爱 ...
随机推荐
- BW建模开发入门
本文档主要指导具体操作步骤,一些技术名称和描述可能在各步骤中不对应,可以忽略 一.模型建立 1.建立信息区和信息对象目录 1)进入BW工作台 2)创建信息区 输入技术名称和描述 3)创建特性和关键值的 ...
- MySQL出现1030-Got error 28 from storage engine错误
Navicat for MySQL出现1030-Got error 28 from storage engine错误 刚刚还能用这会儿就用不了了,估计是磁盘空间不足引起的! 在根目录/下执行命令:d ...
- MySQL 性能优化技巧
原文地址:MySQL 性能优化技巧 博客地址:http://www.extlight.com 一.背景 最近公司项目添加新功能,上线后发现有些功能的列表查询时间很久.原因是新功能用到旧功能的接口,而这 ...
- 转发，重定向以及区别和简单的session对象
1.转发 作用:在多个页面交互过程中实现请求数据的共享. 过程:Web服务器内部将一个request请求的处理权交给另外一个资源,属于同一个访问请求和响应过程,所以request对象的 ...
- 【转载】Leaflet 中文api
L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. 使用 example // initialize the map on the "map" div with ...
- Unit02： 参数值注入 、 基于注解的组件扫描
Unit02: 参数值注入 . 基于注解的组件扫描 (4)IOC (Inversion Of Controll 控制反转) 什么是IOC? 对象之间的依赖关系由容器来建立. 什么是DI? (Depen ...
- STM32启动过程解读与跟踪验证
经过查阅各种官方文献和对代码进行单步跟踪,详细地叙述了STM32加电启动的具体过程.对于关键性的语句都指明了出处.下面将学习成果分享给大家,由于笔者知识有限,不当之处敬请指出. 为了更好的说明问题,先 ...
- java Annotation的应用
一.Annotation 示例 Override Annotation @Override public void onCreate(Bundle savedInstanceState); 二.Ann ...
- rtmp发送H264及aac的音视频
RTMP推送的音视频流的封装形式和FLV格式相似,由此可知,向FMS推送H264和AAC直播流,需要首先发送"AVC sequence header"和"AAC sequ ...
- buntu12.10 64位 + android-ndk-r9 编译ffmpeg遇到的问题
android-ndk-r8d/build/core/build-binary.mk:41: *** target file `clean' has both : and :: entries. ...