1. css的引用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: yellow;
font-size: 25px;
font-weight: bold;
}
</style>
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
</head>
<body>
<p>我们不一样</p>
</body>
</html>
2. css中常用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color: red;
background-color: black;
}
div{
width: 200px;
height: 200px;
background-color: blue;
border: 1px solid red;
}
#div1{
background-color: green;
}
.div_1{
background-color: pink;
}
</style>
</head>
<body>
<div>2</div>
<p>你好</p>
</body>
</html>
3. css中其他选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:hover{
color: red;
}
</style>
</head>
<body>
<div>
<span>北京</span>
<p>
<span>北京123</span>
</p>
</div>
<span>北京</span>
<hr />
<p id="p_1">我们不一样</p>
<p>我们不一样</p>
<p>我们不一样</p>
<hr />
<a href="">京东网址</a>
</body>
</html>
4. css常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top{
width: 100%;
height: 100px;
border: 1px solid red;
}
.top_a{
color: gray;
font-size: 12px;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: underline;
}
.tips{
width: 100%;
height: 40px;
border: 1px dotted indianred;
background-color: pink;
text-align: center;
line-height: 40px;
}
.center{
width: 100%;
height: 500px;
border: 1px solid red;
background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255,0,0,.5);
}
</style>
</head>
<body>
<div class="top">
<a href="" class="top_a">登录页面,调查问卷</a>
</div>
<div class="tips">
<span>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版《京东隐私政策》已上线,将更有利于保护您的个人隐私。</span>
</div>
<div class="center">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top{
width: 100%;
height: 100px;
border: 1px solid red;
}
.top_a{
color: gray;
font-size: 12px;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: underline;
}
.tips{
width: 100%;
height: 40px;
border: 1px dotted indianred;
background-color: pink;
text-align: center;
line-height: 40px;
}
.center{
width: 100%;
height: 500px;
border: 1px solid red;
background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255,0,0,.5);
}
</style>
</head>
<body>
<div class="top">
<a href="" class="top_a">登录页面,调查问卷</a>
</div>
<div class="tips">
<span>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版《京东隐私政策》已上线,将更有利于保护您的个人隐私。</span>
</div>
<div class="center">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div_1{
width: 200px;
height: 200px;
background-color: rgba(255,0,0);
color: rgba(0,0,255);
opacity: 0.4;
overflow: hidden;
}
#span_1{
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
ul{
float: right;
}
li{
list-style: none;
float:left;
padding-left: 15px;
}
</style>
</head>
<body>
<ul>
<li><a href="">新闻</a></li>
<li><a href="">hao123</a></li>
<li><a href="">地图</a></li>
<li><a href="">视频</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">学术</a></li>
</ul>
</body>
</html>
5. css中的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div_1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 150px;
left: 150px;
z-index: -1;
}
.div_2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
6. 盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body,html{margin: 0px;padding: 0px;}
.div_1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
margin-right: 40px;
}
.div_2{
width: 200px;
height: 200px;
background-color: green;
margin-left: 50px;
}
div{
float: left;
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
</body>
</html>
7. css3中的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1>p:first-child{
color: red;
}
.div1>p:last-child{
color: green;
}
.div1>p:empty{
height: 50px;
background-color: darkmagenta;
}
input:checked{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="div1">
<p>1</p>
<p>2</p>
<p>3</p>
<p></p>
<p>4</p>
<p>5</p>
</div>
<hr />
<input type="text" name="" id="" value="" />
<hr />
男:<input type="radio" name="sex"/>
女:<input type="radio" name="sex"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input[name^='fom']{
width: 300px;
height: 40px;
}
</style>
</head>
<body>
<p>
账号: <input type="text" name="fom_zh" id="" value="" />
</p>
<p>
密码: <input type="password" name="fom_pwd" id="" value="" />
</p>
<p>
邮箱: <input type="email" name="fom_email" id="" value="" />
</p>
<p>
年龄: <input type="number" name="age" />
</p>
</body>
</html>
8. css3中的常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color:
}
.cen{
width: 200px;
height: 200px;
background-color:
/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/
box-shadow: 0px 0px 70px
/*执行动画的调用*/
animation: 1s aj infinite;
}
.lef{
/*倒圆角指令*/
border-radius: 100px;
/* 左上右下 右上左下 */
/*border-radius:10px 60px;*/
/*border-radius:10px 20px 30px 40px;*/
position: absolute;
top: 200px;
left: 200px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 341px;
}
.c{
/*旋转角度*/
transform: rotate(45deg);
position: absolute;
top: 269px;
left: 271px;
}
/*CSS3中的动画*/
@keyframes aj{
0%{transform: scale(1)rotate(45deg);}
50%{transform: scale(1.1)rotate(45deg);}
100%{transform: scale(1)rotate(45deg);}
}
@-moz-keyframes name{
from{}
to{}
}
@-ms-keyframes name{
from{}
to{}
}
@-webkit-keyframes name{
from{}
to{}
}
</style>
</head>
<body>
<div class="cen lef" ></div>
<div class="cen c"></div>
<div class="cen rig"></div>
</body>
</html>
<!--
CSS3中常用的属性
/*倒圆角指令*/
border-radius: 100px;
/* 左上右下 右上左下 */
/*border-radius:10px 60px;*/
/*border-radius:10px 20px 30px 40px;*/
/*旋转角度*/
transform: rotate(45deg);
/*放大的倍数*/
/*transform: scale(1.3);*/
/* X:水平的位移 Y :垂直的位移 负数:上*/
/*transform: translate(0px,-5px);*/
/*2D角度的旋转 X Y*/
transform: skew(40deg,45deg);
/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/
box-shadow: 0px 0px 70px
CSS3中的动画标签
@-ms-keyframes name{
from{}
to{}
}
@-ms-keyframes name{
0%{}
50%{}
100%{}
}
-->
9. css项目搭建 – 京东购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/jd.css"/>
<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
<script type="text/javascript" src="js/jd.js" ></script>
</head>
<body>
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href=""><i class="iconfont"></i> 京东首页</a></li>
<li><a href="">配送到:北京</a></li>
</ul>
<ul class="nav_ul2">
<li><a href="">洋洋宝贝</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">我的京东</a><span>|</span></li>
<li><a href="">京东会员</a><span>|</span></li>
<li><a href="">企业采购</a><span>|</span></li>
<li><a href="">京东手机</a><span>|</span></li>
<li><a href="">关注京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<div class="search">
<div class="warp">
<img src="img/logo.jpg" />
<div class="search_div">
<input type="text" class="search_text" />
<input type="button" value="搜索" class="search_but"/>
</div>
</div>
</div>
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送到</span>
<select>
<option>昌平区</option>
<option>顺义区</option>
<option>大兴区</option>
<option>朝阳区</option>
<option>昌平区</option>
</select>
</div>
</div>
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li>
<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色:灰色+粉红</a> </li>
<li class="info_5">182.5</li>
<li class="info_6">
<button onclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button
</li>
<li class="info_7">¥182.5</li>
<li>
<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li>
<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色:灰色+粉红</a> </li>
<li class="info_5">182.5</li>
<li class="info_6">
<button onclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">¥182.5</li>
<li>
<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li>
<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色:灰色+粉红</a> </li>
<li class="info_5">182.5</li>
<li class="info_6">
<button onclick="checkTest3(this,1),checkTest2()">-</button>
<input type="text" name="" id="" value="1" />
<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
</li>
<li class="info_7">¥182.5</li>
<li>
<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
<a>已到我的关注</a>
</li>
</ul>
</div>
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="fav" id="" value="" onclick="checkTest1(this),checkTest2()"/>
全选
</li>
<li><a>删除选中商品</a></li>
<li><a>移到我的关注</a></li>
<li><a>清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span id="snum">0</span>件商品</li>
<li>总价 <span id="zongz">¥0</span></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
</body>
</html>