WEB前端第三次作业——CSS样式案例
做出如下图中的效果
用到的图片素材均来源于对应网站源代码
1，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.goods{
width: 220px;
height: 360px;
border: 1px solid lightgray;
}
.goods:hover{
border: 1px solid #f40;
}
.image{
width: 220px;
height: 220px;
margin-bottom: 2px;
position: relative;
}
.image>a>img{
width: 220px;
height: 220px;
}
.price{
margin: 5px;
}
.price>span{
line-height: 20px;
vertical-align: middle;
}
.price>span:first-child{
color: #f40;
font-size: 20px;
font-weight: bold;
}
.price>span:nth-child(2){
font-size: 12px;
background-color: #f40;
color: white;
padding-left: 1px;
padding-right: 1px;
}
.price>span:last-child{
float: right;
font-size: 12px;
color: #888;
}
#des{
margin-left: 5px;
margin-right: 5px;
}
#des>a{
color: #444;
font-size: 12px;
text-decoration: none;
}
#des>a:hover{
text-decoration: underline;
color: #f40;
}
.dianpu{
margin-top: 8px;
margin-left: 5px;
margin-right: 5px;
}
.dianpu>img{
width: 10px;
height: 10px;
}
.dianpu>a{
color: #888;
font-size: 12px;
}
.dianpu>a:last-child{
float: right;
text-decoration: none;
color: #888;
font-size: 15px;
}
.icon{
margin-top: 13px;
margin-left: 5px;
margin-right: 5px;
}
.icon>a:first-child{
width: 18px;
height: 18px;
}
.icon>a:nth-child(2){
width: 18px;
height: 18px;
}
.icon>a:last-child{
float: right;
width: 18px;
height: 18px;
}
.iconmini>img{
width: 18px;
width: 18px;
}
.find{
position: absolute;
width: 220px;
height: 32px;
background-color: #f40;
top: 188px;
display: none;
}
.find>div{
float: left;
width: 109px;
height: 32px;
text-align: center;
line-height: 32px;
}
.find>div>a{
text-decoration: none;
color: white;
font-size: 12px;
}
.find>div:last-child{
border-left: 1px solid white;
}
.image:hover > .find{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="goods">
<div class="image">
<a href="#"><img src="goods.jpg"></a>
<div class="find">
<div><a href="#">找同款</a></div>
<div><a href="#">找相似</a></div>
</div>
</div>
<div class="price">
<span>￥345</span>
<span>包邮</span>
<span>1亿+人付款</span>
</div>
<div id="des"><a href="#">测试用商品 此处应为商品简介 用于搜索时提取关键字</a></div>
<div class="dianpu">
<img src="dianpu.jpg">
<a href="#">商品测试旗舰店</a>
<a href="#">广州</a>
</div>
<div class="icon">
<a class="iconmini" href="#"><img src="icon1.jpg"></a>
<a class="iconmini" href="#"><img src="icon2.jpg"></a>
<a class="iconmini" href="#"><img src="icon3.png"></a>
</div>
</div>
</div>
</body>
</html>
2，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 660px;
height: 475px;
}
.title{
height: 60px;
line-height: 60px;
width: 660px;
border-bottom:1px solid #F2F2F2;
font-size: 20px;
padding-left: 18px;
}
.container2{
width: 570px;
height: 260px;
margin-left: 60px;
margin-top: 45px;
}
.container2>div{
float: left;
}
.login{
width: 359px;
height: 260px;
border-right: 1px solid #F2F2F2;
padding-right: 28px;
}
.scan{
width: 150px;
height: 260px;
padding-left: 30px;
}
.mathod{
width: 360px;
height: 45px;
margin-left: 60px;
}
.tail{
width: 660px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 15px;
color: #606266;
}
.text1{
font-size: 16px;
margin-bottom: 22px;
height: 16px;
}
.username{
background-color: #F3F3F3;
height: 50px;
width: 360px;
margin-bottom: 15px;
}
.username>div{
float: left;
}
.password{
background-color: #F3F3F3;
height: 50px;
width: 360px;
margin-bottom: 15px;
}
.password>div{
float: left;
}
.jia{
height: 50px;
width: 70px;
}
#jia{
border: none;
width: 70px;
height: 50px;
background-color: #F3F3F3;
font-size: 16px;
}
.nameinput{
height: 48px;
width: 285px;
}
#nameinput{
height: 48px;
width: 285px;
border: none;
background-color: #F3F3F3;
font-size: 16px;
}
.inputpass{
height: 48px;
width: 290px;
}
#inputpass{
border: none;
background-color: #F3F3F3;
font-size: 16px;
height: 48px;
width: 285px;
}
.forget{
height: 50px;
line-height: 50px;
width: 70px;
text-align: center;
}
.forget>a{
font-size: 14px;
text-decoration: none;
color: #757575;
}
.remember{
width: 100px;
font-size: 12px;
line-height: 20px;
margin-top: 36px;
}
.remember>input{
height: 12px;
width: 12px;
}
.presslogin{
width: 360px;
height: 50px;
}
.presslogin>form>input{
border: none;
background-color: #FE3355;
text-align: center;
width: 360px;
height: 50px;
color: white;
font-size: 16px;
}
.text1{
font-size: 16px;
height: 16px;
}
.orborder{
margin-top: 20px;
width: 150px;
height: 150px;
background-color: #F3F3F3;
}
.orborder>img{
width: 136px;
height: 136px;
margin-left: 7px;
margin-top: 7px;
}
.text3{
width: 150px;
height: 50px;
margin-top: 16px;
}
.text3>div{
font-size: 14px;
color: #606266;
}
.text3>div>a{
text-decoration: none;
color: #FE3355;
}
.another{
float: left;
width: 180px;
height: 45px;
font-size: 14px;
line-height: 45px;
color: #606266;
}
.another>a>img{
width: 20px;
height: 20px;
}
.phonecode{
float: right;
width: 100px;
font-size: 14px;
height: 45px;
line-height: 45px;
}
.phonecode>a{
text-decoration: none;
color: #606266;
}
</style>
</head>
<body>
<div class="container">
<div class="title">登录</div>
<div class="container2">
<div class="login">
<div class="text1">密码登录</div>
<div class="username">
<div class="jia">
<select name="jia" id="jia">
<option value="+86">+86</option>
<option value="+852">+852</option>
<option value="+853">+853</option>
<option value="+886">+886</option>
</select>
</div>
<div class="nameinput">
<input type="text" name="username" placeholder="请输入用户名" id="nameinput">
</div>
</div>
<div class="password">
<div class="inputpass">
<input type="password" name="password" placeholder="请输入密码" id="inputpass">
</div>
<div class="forget">
<a href="#">忘记密码</a>
</div>
</div>
<div class="remember">
<input type="checkbox" name="remember?">记住密码
</div>
<div class="presslogin">
<form method="get">
<input type="submit" value="登录">
</form>
</div>
</div>
<div class="scan">
<div class="text2">扫码登陆</div>
<div class="orborder">
<img src="二维码.jpg">
</div>
<div class="text3">
<div>打开<a href="#">西瓜视频手机app</a></div>
<div>我的-扫一扫登录</div>
</div>
</div>
</div>
<div class="mathod">
<div class="another">
其他方式：
<a href="#"><img src="douyin.png"></a>
<a href="#"><img src="qq.png"></a>
<a href="#"><img src="weixin.png"></a>
</div>
<div class="phonecode">
<a href="#">手机验证码登录</a>
</div>
</div>
<div class="tail">
<input type="checkbox" name="ok">登录即代表你同意<a href="#">用户协议</a>和<a href="#">隐私政策</a>
</div>
</div>
</body>
</html>
3，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
margin-left: 340px;
width: 1230px;
height: 350px;
background-color: #F5F5F5;
}
.up{
width: 1230px;
height: 190px;
background-color: white;
}
.six{
width: 237px;
height: 170px;
background-color: #5F5750;
float: left;
}
.six_ul{
display: block;
margin: 0px;
margin-top: 1px;
padding: 0 3px;
list-style-type: none;
font-size: 12px;
text-align: center;
background: #5F5750;
}
.six_ul>li{
position: relative;
float: left;
width: 70px;
height: 82px;
padding: 0 3px;
}
.six_ul>li:before{
top: -1px;
left: 6px;
width: 64px;
height: 1px;
}
.six_ul>li:after{
top: 6px;
left: 0;
width: 1px;
height: 70px;
}
.six_ul>li:after, .six_ul>li:before{
position: absolute;
content: "";
background: #665e57;
}
.six_a{
display: block;
padding-top: 18px;
text-overflow: ellipsis;
color: #fff;
opacity: 0.7;
transition: 0.2s;
text-decoration: none;
}
.six_a:hover{
opacity: 1;
}
.six_a>img{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
}
.img{
float: left;
margin-left: 14px;
}
.img:hover{
box-shadow: 6px 6px 10px rgba(0,0,0,0.3);
transition: 0.4s;
}
.img>a{
text-decoration: none;
display: block;
height: 170px;
}
.img>a>img{
width: 316px;
height: 170px;
}
.down{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="up">
<div class="six">
<ul class="six_ul">
<li>
<a href="#" class="six_a"><img src="3-0-1.png" alt="保障服务">保障服务</a>
</li>
</ul>
<ul class="six_ul">
<li>
<a href="#" class="six_a"><img src="3-0-2.png" alt="企业团购">企业团购</a>
</li>
</ul>
<ul class="six_ul">
<li>
<a href="#" class="six_a"><img src="3-0-3.png" alt="F码通道">F码通道</a>
</li>
</ul>
<ul class="six_ul">
<li>
<a href="#" class="six_a"><img src="3-0-4.png" alt="米粉卡">米粉卡</a>
</li>
</ul>
<ul class="six_ul">
<li>
<a href="#" class="six_a"><img src="3-0-5.png" alt="以旧换新">以旧换新</a>
</li>
</ul>
<ul class="six_ul">
<li>
<a href="#" class="six_a"><img src="3-0-6.png" alt="话费充值">话费充值</a>
</li>
</ul>
</div>
<div class="img">
<a href="#"><img src="3-1.jpg"></a>
</div>
<div class="img">
<a href="#"><img src="3-2.jpg"></a>
</div>
<div class="img">
<a href="#"><img src="3-3.jpg"></a>
</div>
</div>
<div class="down">
<a href="#"><img src="3-4.webp"></a>
</div>
</div>
</body>
</html>
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
