css样式的笔记.txt

编程入门行业动态更新时间:2024-10-09 16:27:32

css<a href=https://www.elefans.com/category/jswz/34/1771146.html style= 样式的笔记.txt"/>

css样式的笔记.txt

css

在css中可以通过兄弟元素的选择进行伪类的控制“~”
巴拉巴拉:hover~.巴拉巴拉
input
background-color:none;去掉背景色
outline:none;去掉轮廓
border:none;去掉边框线
< 小于号 >大于号
banner一般轮播图的命名

绝对位置拉回法（绝对居中）水平垂直
1.使用position：absolute；进行父级的绝对定位
2.使用top：50%; left：50%; 水平垂直方向进行50%的定位
3.使用margin-top：负的当前模块值的一半

下面是这几天的穿插还原:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习混合页面还原</title><link rel="stylesheet" href="huanyuan.css">
</head><body><div class="top-tag"><div class="top-move"><div class="top-move-left"><span style="margin: 0;">中国大陆</span><span>我的账号</span><span>手机逛淘宝</span><span>网页无障碍</span></div><div class="top-move-right"><span>我的淘宝</span><span>购物车</span><span>收藏夹</span><span>商品分类</span><span>免费开店</span><span>千牛卖家中心</span><span>联系客服</span></div></div></div><div class="search-box"><div class="logo-box"><img src="../img/tengxun.logo.webp" alt=""></div><div class="search"><div class="search-left"><div class="search-ipt"><span>网页</span><input type="text" name="" id=""></div><div class="select"><div>网页</div><div>图片</div><div>视频</div><div>音乐</div><div>地图</div></div></div><div class="sogou">搜狗搜索</div></div><div class="em-box"><span>无障碍浏览</span><span>qq空间</span><span>qq邮箱</span><span style="margin-right: 30px">登录</span></div></div><div class="ual"><div class="ual-box"><a href="http://">新闻</a><a href="http://">视频</a><a href="http://">公益</a><a href="http://">军事</a><a href="http://">体育</a><a href="http://">NBA</a><a href="http://">娱乐</a><a href="http://">财经</a><a href="http://">科技</a><a href="http://">时尚</a><a href="http://">汽车</a><a href="http://">房产</a><a href="http://">教育</a><a href="http://">文化</a><a href="http://">星座</a><a href="http://">游戏</a><a href="http://">更多</a></div><!-- </div> --><div class="ual-select"><div class="select-box"><span>文学</span><span>热剧</span><span>抗肺炎<span><span>历史</span><span>英超</span><span>CBA</span><span>明星</span><span>理财</span><span>科普</span><span>健康</span><span>车型</span><span>家具</span><span>育儿</span><span style="margin-right: 25px;">情感 </span></div></div></div><div class="body-tag"><span class="body-tag-1">主题市场</span><span class="body-tag-2">天猫</span><span class="body-tag-3">聚划算</span><span class="body-tag-4">天猫超市</span><span style="margin-left:20px;">|</span><a href="">司法拍卖</a><a href="">飞猪旅行</a><a href="">天天特卖</a><a href="">|</a><a href="">造点新货</a><a href="">苏宁易购</a><a href="">淘宝心选</a><a href="">智能生活</a><a href="">智能直播</a></div><div class="cont"><div class="cont-left"><div style="margin-top: 0;"><span>女装</span><span>/</span><span>内衣</span><span>/</span><span>家居</span></div><div><span>母婴</span><span>/</span><span>童装</span><span>/</span><span>玩具</span></div><div> <span>男装</span><span>/</span><span>运动户外</span></div><div><span>女装</span><span>/</span><span>内衣</span><span>/</span><span>家居</span></div><div> <span>美妆</span><span>/</span><span>彩妆</span><span>/</span><span>个护</span></div><div> <span>手机</span><span>/</span><span>数码</span><span>/</span><span>企业礼品</span></div><div><span>大家电</span><span>/</span><span>生活电器</span></div><div><span>零食</span><span>/</span><span>生鲜</span><span>/</span><span>清洁</span></div><div> <span>厨具</span><span>/</span><span>收纳</span><span>/</span><span>家居</span></div><div> <span>家纺</span><span>/</span><span>家具</span><span>/</span><span>鲜花</span></div><div> <span>图书音像</span><span>/</span><span>文具</span></div><div><span>医药保健</span><span>/</span><span>进口</span></div><div> <span>汽车</span><span>/</span><span>二手车</span></div></div><div class="cont-main"><div class="cont-main-top"><img src="../img/淘宝还原图片.jpg" alt=""><div class="banner-left">&lt;</div><div class="banner-right">&gt;</div><div class="banner-main"><div></div><div></div><div></div><div></div></div></div><div class="cont-main-left"><img src="../img/bottom-left图片.jpg" alt=""></div><div class="cont-main-right"><img src="../img/bottom-right图片.jpg" alt=""></div></div></div>
</body></html>

css外联文件：

* {margin: 0 auto;padding: 0;
}.top-tag {width: 100%;height: 30px;background-color: #7d7d7d;
}.top-move {width: 1440px;height: 30px;background-color: rgb(240, 215, 215);
}.top-move-left {float: left;line-height: 30px;width: 700px;height: 30px;font-size: 14px;padding-left: 10px;padding-right: 10px;
}.top-move-right {float: left;line-height: 30px;width: 700px;height: 30px;font-size: 14px;padding-left: 10px;padding-right: 10px;text-align: right;
}.top-move-left>span,
.top-move-right>span {margin-left: 16px;
}.search-box {width: 1440px;height: 90px;
}.logo-box {float: left;width: 390px;height: auto;}.logo-box>img {width: 265px;height: 85px;padding-left: 5px;
}.search {position: relative;float: left;width: 620px;height: auto;
}.search-left {float: left;font-size: 14px;padding-top: 26px;padding-left: 100px;
}.search-ipt {width: 375px;height: 31px;border: 1px #7d7d7d solid;border-radius: 20px;padding-left: 7px;padding-top: 7px;
}.search-left>div>input {background-color: none;border: none;outline: none;
}.select {position: absolute;width: 60px;height: 100px;background-color: white;margin-left: 10px;display: none;z-index: 999;
}.search-left :hover~.select {position: absolute;display: block;
}.sogou {float: left;position: absolute;top: 25px;left: 433px;width: 102px;height: 41px;background-color: #1479d6;border-radius: 20px;text-align: center;line-height: 40px;color: white;
}.em-box {float: left;width: 430px;height: 90px;line-height: 90px;text-align: right;color: #1479d6;
}.em-box>span {margin: 10px;
}.ual {position: relative;width: 1440px;height: 60px;background-color: #1479d6;border-radius: 5px;
}.ual-box {position: absolute;text-align: center;
}.ual-box>a {padding: 10px;margin: 10px;line-height: 60px;font-size: 20px;text-decoration: none;color: white;
}.ual-box>a:hover {background-color: white;color: #1479d6;
}.body-tag {text-align: center;padding-left: 50px;font-size: 20px;/* color: blueviolet; */
}
.body-tag-1{color: #ff6200;font-size: 16px;text-align: left;padding-left: 70px;height: 30px;line-height: 30px;
}
.body-tag-2{color: #ff0036;padding-left: 180px;font-size: 16px;line-height: 20px;
}
.body-tag-3{color: #ff0036;font-size: 16px;line-height: 20px; 
}
.body-tag-4{color: #33c900;padding-left: 25px;font-size: 16x;line-height: 20px;
}
.body-tag>a {padding-left: 20px;text-decoration: none;font-size: 16px;
}.ual-select {height: 20px;width: 1440px;margin-bottom: 0;text-align: right;line-height: 100px;display: none;}.ual-select>span {padding: 10px;margin: 10px;font-size: 20px;color: black;
}.ual :hover~.ual-select {position: absolute;display: block;
}
.cont{width: 1400px;height:520px;background-color: #14d6b6;
}
.cont-left{float: left;text-align: left;width: 20%;height: 520px;background-color: #d7d7d763;
}
.cont-left>div{font-size: 20px;margin: 10px 10px;
}
.cont-main{float: left;width: 50%;height: 520px;background-color:#df395d;
}
.cont-main-top{position: relative;overflow: hidden;float: left;width: 100%;height: 260px;background-color: rgb(82, 134, 33);
}
.cont-main-top>img{width: 100%;
}
.banner-left{position: absolute;font-size: 20px;width: 30px;height: 30px;border-top-right-radius: 15px;border-bottom-right-radius: 15px;background-color: black;color: aliceblue;top: 50%;left: 0%;margin-top: -15px;
}
.banner-right{position: absolute;font-size: 20px;width: 30px;height: 30px;border-top-left-radius: 15px;border-bottom-left-radius: 15px;background-color: black;color: aliceblue;top: 50%;right: 0%;margin-top: -18px;text-align: right;
}
.banner-main{line-height: 30px;text-align: center;position: absolute;width: 120px;height:30px;background-color: pink;color: #ff0036;bottom: 0%;left: 50%;margin-left: -50px;
}
.banner-main>div{float: left;width: 12px;height: 12px;border-radius: 12px;background-color: white;margin-top: 12px;margin-left: 15px;
}
.banner-main>div:hover{background-color: purple;
}
.cont-main-left{float: left;width: 50%;height: 260px;background-color: rgb(51, 53, 197);
}
.cont-main-left>img{width: 85%;height: 85%;margin-top: 20px;margin-left: 20px;
}
.cont-main-right{float: left;width: 50%;height: 260px;background-color: rgb(152, 46, 173);
}
.cont-main-right>img{width: 85%;height: 85%;margin-top: 20px;margin-left: 20px;
}