1.名鞋库网页小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="header">
<div>
<ul>
<li>欢迎登录名鞋库</li>
<li>免费注册</li>
<li>我的名鞋库<span></span></li>
<li><i></i>手机名鞋库<span></span></li>
<li>收藏名鞋库</li>
<li><b></b>名鞋库客服</li>
<li>
<strong></strong>
</li>
</ul>
</div>
</div>
<div class="logo">
<div></div>
<div>
<input type="text"><input type="submit" value="搜索">
<ul>
<li>热搜:</li>
<li>跑步鞋</li>
<li>帆布鞋</li>
<li>篮球鞋</li>
<li>跑步鞋</li>
<li>帆布鞋</li>
<li>篮球鞋</li>
</ul>
</div>
<a href="#">
购物车<span>0</span>件
</a>
</div>
<div class="nav">
<div class="container">
<ul>
<li>所有商品分类</li>
<li>首页</li>
<li>男子运动</li>
<li>
<a href="#">女子运动</a>
<div class="box">
<dl>
<dt>运动鞋</dt>
<dd>休闲鞋</dd>
<dd>板鞋</dd>
<dd>跑步鞋</dd>
<dd>帆布鞋</dd>
<dd>拖鞋</dd>
<dd>网球鞋</dd>
<dd>健步鞋</dd>
</dl>
<dl>
<dt>服装</dt>
<dd>休闲鞋</dd>
<dd>板鞋</dd>
<dd>跑步鞋</dd>
<dd>帆布鞋</dd>
<dd>拖鞋</dd>
<dd>网球鞋</dd>
<dd>健步鞋</dd>
<dd>网球鞋</dd>
<dd>健步鞋</dd>
</dl>
<dl>
<dt>品牌推荐</dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
</div>
</li>
<li>儿童</li>
<li>男鞋</li>
<li>户外</li>
</ul>
<ul>
<li>
运动小白
<img src="./images/dabai.png" alt="">
</li>
<li>上新区</li>
<li>即将售罄</li>
<li>逢八必杀</li>
</ul>
</div>
</div>
<div class="banner">
<div class="container">
<ul>
<li>运动休闲鞋</li>
<li>运动休闲服</li>
<li>跑步</li>
<li>篮球</li>
<li>足球</li>
<li>配件</li>
<li>户外</li>
<li>男鞋</li>
<li>童鞋</li>
</ul>
</div>
<!-- <img src="./images/banner.jpg" alt=""> -->
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
html,body{
height: 100%;
}
body{
min-width: 1600px;
height: 100%;
}
.header{
height: 26px;
background-color: #eeeeee;
}
.header>div{
width: 1194px;
height: 100%;
/* background-color: #eeeeee; */
margin: auto;
}
.header ul{
float: right;
}
.header li{
float: left;
font-size: 12px;
color: #666666;
height: 26px;
line-height: 26px;
padding: 0 16px;
/* 相对定位 */
position: relative;
}
/* 伪元素 - 显示模式:行内元素 */
.header li::after{
/* 填充内容 */
content: '';
background-color: orange;
/* width: 100px;
display: inline-block; */
width: 1px;
height: 16px;
background-color: #d5d5d5;
/* background-color: red; */
/* 绝对定位 */
position: absolute;
right: -0.5px;
top: 50%;
transform: translateY(-50%);
}
/* n : 0123456789..... */
.header ul>:nth-child(-n + 2){
color: #ff6600;
}
.header ul>:nth-child(1)::after{
/* width: 0; */
display: none;
/* height: 0; */
}
.header span{
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: #666666;
position: absolute;
right: 10px;
top: 10px;
}
.header ul>:nth-child(3){
padding-right: 26px;
}
.header ul>:nth-child(4){
padding-right: 26px;
padding-left: 31px;
}
.header i{
width: 10px;
height: 14px;
background-color: pink;
position: absolute;
left: 15px;
top: 5px;
background-image: url(./images/default_icon_bg.png);
background-position: -510px -13px;
}
.header b{
width: 15px;
height: 15px;
background-color: pink;
position: absolute;
left: 13px;
top: 4px;
background-image: url(./images/default_icon_bg.png);
background-position: -504px -43px;
}
.header ul>:nth-child(6){
padding-left: 35px;
}
.header ul>:last-child{
width: 122px;
}
.header strong{
width: 122px;
height: 13px;
/* background-color: pink; */
position: absolute;
top: 50%;
transform: translateY(-50%);
background-image: url(./images/default_icon_bg.png);
background-position: -318px -66px;
}
.logo{
width: 1194px;
height: 78px;
/* background-color: pink; */
margin: auto;
overflow: hidden;
}
.logo>:nth-child(1){
width: 421px;
height: 64px;
/* background-color: aqua; */
background-image: url(./images/default_icon_bg.png);
margin-top: 7px;
float: left;
}
.logo>:nth-child(2){
width: 340px;
height: 100%;
/* background-color: plum; */
float: left;
margin-left: 120px;
padding-top: 16px;
box-sizing: border-box;
}
.logo>:nth-child(2)>:nth-child(1){
width: 274px;
height: 30px;
box-sizing: border-box;
border: 2px solid #d5d5d5;
border-right: 0;
vertical-align: top;
outline: none;
}
.logo>:nth-child(2)>:nth-child(2){
width: calc(100% - 274px);
height: 30px;
border: 0;
background-color: #444444;
font-size: 15px;
color: #fff;
}
.logo ul{
margin-top: 8px;
}
.logo li{
float: left;
font-size: 12px;
color: #898989;
line-height: 1;
padding: 0 4px;
}
.logo>a{
float: right;
width: 126px;
height: 34px;
background-image: url(./images/default_icon_bg.png);
background-position: 0 -64px;
margin-top: 20px;
text-indent: 45px;
line-height: 34px;
color: #676767;
font-size: 12px;
border-radius: 5px;
}
.logo span{
color: red;
margin: 0 4px;
}
.nav{
height: 34px;
background-color: #a21f25;
}
.nav>.container{
width: 1194px;
height: 100%;
/* background-color: #a21f25; */
margin: auto;
}
.nav>.container>:nth-child(1){
float: left;
}
.nav>.container>:nth-child(1)>li{
padding: 0 26px;
}
.nav>.container>:nth-child(2){
float: right;
}
.nav>.container>:nth-child(2)>li{
padding: 0 10px;
}
.nav>.container li{
float: left;
line-height: 34px;
font-size: 14px;
color: #fff;
/* 相对定位 */
position: relative;
}
.nav a{
color: #fff;
}
.nav>.container>:nth-child(1)>:nth-child(n + 3):hover{
background-color: #444444;
}
.nav>.container>:nth-child(1)>:nth-child(2){
background-color: #444444;
}
.nav>.container>:nth-child(1)>:nth-child(n + 3)::after{
content: '';
width: 2px;
height: 13px;
background-color: #fff;
/* 绝对定位 */
position: absolute;
right: -2px;
top: 50%;
transform: translateY(-50%);
}
.nav>.container>:nth-child(1)>:nth-child(n + 3):hover::after{
display: none;
}
.nav>.container>:nth-child(1)>:last-child::after{
display: none;
}
.nav>.container>:nth-child(1)>:nth-child(n + 3){
padding-left: 28px;
}
.nav>.container>:nth-child(1)>:last-child{
padding-left: 26px;
}
.nav>.container>:nth-child(2)>:last-child{
color: yellow;
}
.nav>.container>:nth-child(2)>li::after{
content: '';
width: 1px;
height: 14px;
background-color: #fff;
/* 绝对定位 */
position: absolute;
right: -0.5px;
top: 50%;
transform: translateY(-50%);
}
.nav>.container>:nth-child(2)>li>img{
position: absolute;
left: -39px;
top: -21px;
}
/* 二级导航 */
.nav .box{
width: 668px;
height: 281px;
background-color: #fff;
/* 绝对定位 */
position: absolute;
left: 0;
top: 34px;
display: none;
color: #000;
padding-top: 17px;
padding-left: 19px;
box-sizing: border-box;
line-height: 1;
}
.nav li:hover>.box{
display: block;
}
.nav .box>dl{
float: left;
}
.nav .box>:nth-child(-n + 2){
width: 166px;
}
.nav dt{
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.nav dd{
font-size: 12px;
color: #545653;
line-height: 24px;
}
.nav .box>:last-child{
width: 282px;
/* background-color: orange; */
}
.nav .box>:last-child>dd{
width: 33.3333%;
height: 40px;
/* background-color: aqua; */
float: left;
background-image: url(./images/201409101646002.png);
}
.nav .box>:last-child>:nth-child(3){
background-position: 0 -80px;
}
.nav .box>:last-child>:nth-child(4){
background-position: 0 -115px;
}
.nav .box>:last-child>:nth-child(5){
background-position: 0 -150px;
}
.nav .box>:last-child>:nth-child(6){
background-position: 0 -190px;
}
.nav .box>:last-child>:nth-child(7){
background-position: 0 -230px;
}
.nav .box>:last-child>:nth-child(8){
background-position: 0 -270px;
}
.nav .box>:last-child>:nth-child(9){
background-position: 0 -310px;
}
.nav .box>:last-child>:nth-child(10){
background-position: 0 -345px;
}
.nav .box>:last-child>:nth-child(11){
background-position: 0 -385px;
}
.nav .box>:last-child>:nth-child(12){
background-position: 0 -425px;
}
.nav .box>:last-child>:nth-child(13){
background-position: 0 -465px;
}
.nav .box>:last-child>:nth-child(14){
background-position: 0 -495px;
}
.nav .box>:last-child>:nth-child(15){
background-position: 0 -535px;
}
.banner{
/* width: 1194px; */
height: 386px;
background-color: #ccc;
/* margin: auto; */
/* position: relative; */
background-image: url(./images/banner.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.banner>.container{
/* 最小宽度 */
/* min-width: 1000px;*/
/* 最大宽度 */
/* max-width: 1000px; */
width: 1194px;
height: 100%;
/* background-color: #ccc; */
margin: auto;
}
.banner>.container>ul{
width: 136px;
height: 100%;
background-color: #1f1909;
}
/* .banner>img{
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
} */
.banner>.container>ul>li{
color: #fff;
font-size: 12px;
text-indent: 40px;
height: 42.8px;
line-height: 42.8px;
position: relative;
}
.banner>.container>ul>li::before{
content: '';
width: 17px;
height: 10px;
/* background-color: pink; */
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
background-image: url(./images/navcats_icon.png);
background-position: -4px -58px;
}
.banner>.container>ul>li:hover{
background-color: #aa0001;
text-decoration: underline;
}
.banner>.container>ul>li::after{
content: '';
/* background-color: pink; */
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #fff;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: none;
}
.banner>.container>ul>li:hover::after{
display: block;
}
结果展示:
2.过渡
<style>
div{
width: 300px;
height: 100px;
background-color: aqua;
/* margin-left: 0; */
/* 设置需要过渡的样式属性*/
/* transition-property: width; */
/* 设置过渡的时间 */
/* transition-duration: 2s; */
/* 设置延迟时间 */
/* transition-delay: 5s; */
/* 设置运动形式 */
/* 慢速开始,加速,慢速结束 */
/* transition-timing-function: ease; */
/* 加速 */
/* transition-timing-function: ease-in; */
/* 减速 */
/* transition-timing-function: ease-out; */
/* 先加速再减速 */
/* transition-timing-function: ease-in-out; */
/* 匀速 */
/* transition-timing-function: linear; */
/* 步长/帧率 */
/* transition-timing-function: steps(5); */
/* 贝塞尔曲线 */
/* transition-timing-function: cubic-bezier(0.18, 0.89, 1, 0.24); */
/* 连写 - 取值不分先后顺序 - 单独只设置一个时间默认代表过渡时间 - 当出现两个时间取值的时候,第一个代表过渡时间,第二个代表延迟时间 - all代表选中当前标签的所有css属性名*/
/* transition: width 2s 1s linear; */
/* transition: width 1s linear,height 2s linear; */
transition: all linear 2s;
}
div:hover{
width: 600px;
height: 400px;
background-color: pink;
margin-left: 200px;
opacity: .5;
}
</style>
3.旋转
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
text-align: center;
line-height: 300px;
margin: auto;
}
img{
width: 200px;
vertical-align: middle;
transition: all 2s linear;
}
div:hover>img{
transform: rotate(360deg);
transform: rotate(-360deg);
/* transition: all 2s linear; */
}
p{
width: 200px;
height: 200px;
background-color: orange;
margin: auto;
/* 裁剪 */
/* clip-path: polygon(100px 0,200px 200px,0 200px); */
clip-path: polygon(0 100px,50px 50px,100px 100px,100px 0, 150px 50px,100px 100px,200px 100px,150px 150px,100px 100px,100px 200px,50px 150px,100px 100px);
transition: all 2s linear;
}
p:hover{
transform: rotate(180deg);
}
</style>