first commit

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/在包河/css/clear.css

@@ -0,0 +1,33 @@
+/* 清除浏览器默认的css样式 */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li,
+p {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+input,
+button,
+textarea {
+    outline: none;
+    border: none;
+}
+
+body {
+    font-size: 0px;
+}

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/在包河/css/index.css

@@ -0,0 +1,165 @@
+.pa {
+    padding-left: 0.25rem;
+    padding-right: 0.24rem;
+}
+ .header{
+	height: 1rem;
+	background-color: rgb(0 0 0 / 70%);
+	display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    width: 100%;
+    padding-left: 0.24rem;
+    padding-right: 0.4rem;
+    box-sizing: border-box;
+    top: 0;
+    left: 0;
+    z-index: 999;
+}
+.header .zai{
+	height: 0.65rem;
+}
+.header .open{
+    width: 1.44rem;
+	height: 0.52rem;
+	background-color: #d0302c;
+	border-radius: 0.08rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	font-size: 0.24rem;
+	color: #ffffff;
+}
+.content {
+    margin-top: 1rem;
+}
+.content .qw{
+    height: 4.22rem;
+}
+.content .news{
+    padding-top: 0.59rem;
+    padding-bottom: 0.53rem;
+    position: relative;
+}
+.content .news ::after{
+    content: "";
+    width: 100%;
+    height: 0.5rem;
+    background:#e5e5e5 ;
+    transform: scaleY(0.5);
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+
+}
+
+.content .news .summary{ 
+    font-size: 0.36rem;
+    color: #333333;
+    margin-bottom: 0.3rem;}
+.content .news .time{
+    font-size: 0.23rem;
+            color: #999999;
+            margin-bottom: 0.3rem;
+}
+.content .news .btn{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+.content .btn .main_left{
+    display: flex;
+    align-items: center;
+
+}
+.content .main_left .shoucang{
+    display: flex;
+    align-items: center;
+    margin-right: 0.6rem;
+   
+    
+}
+.content .main_left .shoucang .collect{
+    width: 0.28rem;
+    height: 0.28rem;
+}
+.content .main_left .shoucang span{
+    font-size: 0.24rem;
+    color: #999999;
+    margin-left: 0.08rem;
+}
+.content .main_left .zan{}
+.content .main_left .zan .good{
+    width: 0.26rem;
+    height: 0.27rem;
+}
+.content .main_left .zan span{
+    font-size: 0.24rem;
+    color: #999999;
+    margin-left: 0.08rem;
+}
+.content .main_right {}
+.content .main_right .zk{}
+.content .main_right .zk span{
+    font-size: 0.24rem;
+    color: #999999;
+    margin-left: 0.08rem;
+}
+.content .main_right .zk .down{
+    width: 0.17rem;
+    height: 0.1rem;
+    margin-left: 0.11rem;
+}
+.recommend{}
+.recommend .recommend_tab{
+    height: 1rem;
+    background-color: #ffffff;
+    font-size: 0.32rem;
+    color: #333333;
+    display: flex;
+    align-items: center;
+
+}
+.recommend ul{
+    display: flex;
+            overflow-x: scroll;
+
+}
+.recommend ul li{
+    margin-right: 0.1rem;
+    flex-shrink: 0;
+    width: 2.74rem;
+
+}
+.recommend ul li .top{
+    width: 2.74rem;
+    height: 1.56rem;
+    position: relative;
+    margin-bottom: 0.24rem;
+}
+.recommend ul li .top img{
+    width: 100%;
+    height: 100%;
+}
+.recommend ul li .top span{
+    font-size: 0.22rem;
+    color: #ffffff;
+    position: absolute;
+    right: 0.14rem;
+    bottom: 0.13rem;
+}
+.recommend ul li .text{
+    font-size: 0.28rem;
+    color: #333333;
+    margin-bottom: 0.39rem;
+}
+.active .text {
+    color: #d0302c;
+}
+
+