Files
ClassContent/历届学生/fontendsix/项目练习/学生项目/王安民/10-22/css/task1.css
2024-09-27 02:06:13 +08:00

652 lines
8.7 KiB
CSS

.header {
height: 40px;
background-color: #222222;
}
.center {
margin: 0 auto;
}
.ct {
padding-top: 40px;
}
.nav {
width: 1164px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav li:nth-child(1n+2):hover {
background: #444;
}
.more {
position: relative;
}
.more:hover i{
transform: rotate(180deg);
}
.nav_more a {
color: #191919!important;
display:block;
float:left;
width: 67px;
font-size: 14px;
}
.more a:hover {
background: #f9f9f9 ;
color: #c9141d!important;
}
.more i {
display: inline-block;
transition: transform 0.2s;
}
.more:hover .nav_more {
display: block;
}
.nav_more {
width: 268px;
height: 120px;
padding: 7px 10px;
border: 1px solid #ddd;
position: absolute;
left: -120px;
color: #191919;
display: none;
background-color: #fff;
z-index: 9;
}
.logo {
background: url(../img/s_logo.png);
width: 44px;
height: 20px;
float: left;
margin-top: 9px;
margin-left: 7px;
}
.icon-shouye {
font-size: 18px;
color: #ccc;
float: left;
}
.nav li {
width: 74px;
float: left;
margin-right: 5px;
color: #fff;
}
.nav li a {
color: #fff;
}
.shu::before {
content: "";
width: 1px;
height: 16px;
background-color: #666666;
float:left;
margin-top: 12px;
}
.nav li:last-child {
width: 130px;
}
.reset_n {
height: 40px;
}
.content .ct {
width: 1182px;
/* background-color: #444; */
margin-top: 10px;
}
.c_left_user {
width: 138px;
height: 217px;
border: #ddd 1px solid;
text-align: center;
position: relative;
}
.c_left_user_portrait {
width: 72px;
height: 72px;
border-radius: 50%;
margin-top: -20px;
}
.c_left {
float: left;
}
.level {
margin-top: 5px;
margin-bottom: 10px;
}
.read_information {
margin-top: 0px;
height: 50px;
}
.read_information div {
width: 50%;
height: 50px;
float: left;
margin-left: -1px;
}
.read_information div a {
display: block;
}
.read_information div:first-child {
border-right: #6666663f solid 1px;
}
.read_information p {
font-size: 14px;
}
.read_information span {
font-size: 12px;
color: #666;
}
.see {
width: 100%;
height: 31px;
background-color: #f9f9f9;
position: absolute;
bottom: 0px;
color:#666;
line-height: 31px;
font-size: 12px;
}
.c_left_comment {
width: 140px;
height: 120px;
margin-top: 20px;
}
.c_line {
font-size: 14px;
color: #404040;
text-align: center;
}
.c_line::before,
.c_line::after {
content: "";
display: inline-block;
height: 1px;
width: 45px;
background-color: #efefef;
position: relative;
top:-5px;
}
.c_line::before{
right:10px;
}
.c_line::after{
left:10px;
}
.c_left_comment img {
margin-top: 10px;
}
.c_left_comment {
text-align: center;
}
.red {
font-family: Georgia,Arial;
color: #da2128;
font-size: 24px;
}
.c_left_share {
width: 140px;
height: 150px;
}
.c_left_share ul li {
width: 140px;
height: 20px;
font-size: 12px;
color: #606060;
padding: 0 20px;
margin-top: 10px;
}
.c_left_share ul li span {
float: left;
}
.c_left_share ul li img {
float: left;
margin-top: -3px;
margin-right: 10px;
}
.c_center {
width: 640px;
height: 10000px;
float: left;
margin-left: 20px;
}
.article h2 {
color: #191919;
font-size: 28px;
}
.article .article_time {
margin-top: 20px;
color: #999;
font-size: 14px;
}
.article img {
display: block;
margin: 20px auto;
}
.article {
overflow: hidden;
}
.article p {
font-size: 16px;
color: #191919;
line-height: 1.9;
}
.article_bottom div {
margin-top: 24px;
box-sizing: border-box;
float: left;
width: 80px;
height: 34px;
border: 1px solid #e5e5e5;
border-radius: 17px;
text-align: center;
line-height: 31px;
color: #606060;
font-size: 12px;
}
.article_bottom p {
padding-top: 25px;
float: right;
font-size: 12px;
counter-reset: #666666;
}
.allsee {
overflow: hidden;
margin-top: 20px;
}
.allsee img {
width: 195px;
height: 130px;
}
.allsee li {
float: left;
margin-right: 27px;
margin-bottom: 16px;
width: 195px;
height: 178px;
overflow: hidden;
}
.allsee_title {
height: 29px;
font-size: 18px;
}
.allsee_title span {
margin-left: 20px;
}
.allsee_title::before{
content: "";
display: inline-block;
height: 19px;
width: 3px;
background-color: yellow;
position: relative;
top: 4px;
}
.allsee li:nth-child(3n) {
margin:0;
}
.italk {
width: 100%;
}
.italk_title {
float: left;
height: 29px;
width: 100%;
font-size: 18px;
}
.italk_title span {
margin-left: 20px;
}
.italk_title::before{
content: "";
display: inline-block;
height: 19px;
width: 3px;
background-color: yellow;
position: relative;
top: 4px;
}
.sunshine {
float: right;
height: 20px;
position: relative;
}
.sunshine img {
position: absolute;
left: -50px;
top: -15px;
}
.italk_content{
clear: both;
width: 638px;
height: 119px;
border: 1px solid #666;
margin-top: 0px;
}
.italk_content textarea {
width: 592px;
height: 40px;
line-height: 22px;
font-size: 14px;
resize: none;
border: none;
padding: 20px;
}
.italk_bottom {
height: 35px;
background-color: rgba(51, 51, 51, 0.103);
line-height: 35px;
position: relative;
}
.italk_bottom span {
float: left;
margin-left: 20px;
}
.italk_bottom ul {
float: left;
}
.italk_bottom li {
margin-left: 10px;
float: left;
padding-top: 4px;
}
.italk_botton {
text-align: center;
position: absolute;
right: -1px;
bottom: -1px;
width: 90px;
height: 37px;
font-size: 15px;
line-height: 37px;
color: #fff;
background: #d81519;
}
.c_right{
width: 300px;
float: right;
}
.a_search {
width: 300px;
height: 36px;
border: solid 1px #666;
position: relative;
}
.hot_selected {
margin-top: 25px;
}
.search_t {
width: 255px;
height: 30px;
border:none;
}
.a_search .i_search {
position: absolute;
right: -1px;
top:-1px;
background-color: #ffba00;
width: 60px;
height: 38px;
text-align: center;
line-height: 36px;
color: rgb(0, 0, 0);
font-size: 24px;
}
.Carousel_figure {
position: relative;
width: 300px;
height: 200px;
}
.Carousel_figure i {
width: 25px;
height: 25px;
background-color: rgba(68, 47, 47, 0.342);
text-align: center;
line-height: 25px;
border-radius: 50%;
position: absolute;
color: #ccc;
top: 75px;
display: none;
}
.Carousel_figure:hover i {
display: block
;
}
.h2_title {
font-size: 22px;
color: #191919;
font-weight: 600;
margin-bottom: 20px;
}
.Carousel_figure .left {
left:12px;
}
.Carousel_figure .right {
right: 12px;
}
.Carousel_figure p {
position: absolute;
bottom: 20px;
left: 10px;
color:#fff;
font-size: 16px;
}
.Carousel_figure ul {
position: absolute;
bottom: 5px;
left: 10px;
}
.Carousel_figure li {
width: 8px;
height: 3px;
background-color: #ccc;
border-radius: 5px;
float: left;
margin-right: 6px;
}
.Carousel_figure li:last-child {
margin-right: 0px;
}
.Carousel_figure li:nth-child(2) {
width: 15px;
border-radius: 6px;
background-color: #fff;
}
.hot_selected_list {
overflow: hidden;
}
.hot_selected_list img {
width: 145px;
height: 87px;
}
.hot_selected_list li{
height: 132px;
width: 145px;
float: left;
margin-right: 10px;
margin-top: 10px;
overflow: hidden;
}
.hot_selected_list li:nth-child(2n) {
margin-right: 0px;
}
.hot24 {
margin-top: 30px;
}
.hot24 li {
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
.hot24 li img {
width: 90px;
height: 60px;
}
.hot24_left div{
position: absolute;
width: 80px;
height: 40px;
padding-top: 20px;
background-color: rgba(0,0,0,.3);
left: 0;
top: 0;
color: #fff;
font-size: 24px;
font-weight: 700;
padding-left: 10px;
}
.hot24_left {
float: left;
}
.hot24_right {
margin-left: 10px;
width: 196px;
height: 40px;
float: left;
}
.hot24_right p {
font-size: 14px;
color: #191919;
}
.hot24_right span {
font-size: 12px;
color: #999;
}
.hottalk {
margin-top: 50px;
}
.hottalk_title {
float: left;
height: 29px;
width: 100%;
font-size: 18px;
}
.italk_foot {
margin-left: -180px;
margin-top: 10px;
font-size: 12px;
color: #999;
float: left;
}
.hottalk_title span {
margin-left: 20px;
}
.hottalk_title::before{
content: "";
display: inline-block;
height: 19px;
width: 3px;
background-color: yellow;
position: relative;
top: 4px;
}
.hottalk_title {
border-bottom: 1px solid #40404046;
}
.hottalk li {
width: 640px;
height: 180px;
border-bottom: #999 dashed 1px;
}
.hottalk img {
border-radius: 50%;
width: 50px;
margin-top: 20px;
/* margin-right: 10px; */
}
.hottalk_right {
width: 576px;
float:right;
}
.hottalk_user {
color: #c9141d;
margin-top: 20px;
margin-bottom: 20px;
}
.hottalk_right div {
margin-top: 10px;
color: #999;
font-size: 12px;
}