WEB前端第三次作业——CSS样式案例
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>
