学做网站如何创业,微商货源网下载,海兴网站建设价格,进入百度搜索首页目录
前言
作品效果
html代码
CSS代码
图片资源 前言 在学习html过程中我们要试着去写写一些案例#xff0c;通过这些案例让我们更加熟悉代码以及丰富我们的经验#xff0c;下面是我个人写的一个案例#xff0c;代码和图片也给出了大家#xff0c;你们可以参考参考。…目录
前言
作品效果
html代码
CSS代码
图片资源 前言 在学习html过程中我们要试着去写写一些案例通过这些案例让我们更加熟悉代码以及丰富我们的经验下面是我个人写的一个案例代码和图片也给出了大家你们可以参考参考。
作品效果 1691670295000 html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./work.css
/head
bodydiv classbox!-- 1部分 中心部分图案--div classbox_contentdiv classfirstdiv classsecondimg src../image/OIP-C.jpg alt width820px height340px/divdiv classboyulli波奇酱/lili虹夏/lili凉/lili喜多/li/ul/div/divdiv classthirddiv classnew_boulli波奇酱/lili喜多/lili虹夏/lili凉/li/ul/divdiv classnew_titelh2new!波奇酱加入了纽带乐队并且进行了首场演出/h2/divdiv classnew_contentullispan第一天/spanspan波奇酱在家里练习吉他/spanspan8.12/span/lilispan第二天/spanspan虹夏介绍波奇酱加入纽带乐队波奇酱成为了吉他手/spanspan8.13/span/lilispan第三天/spanspan喜多同学回归纽带乐队/spanspan8.14/span/lilispan第四天/spanspan凉学姐吃饭没钱向波奇酱借钱/spanspan8.15/span/lilispan第五天/spanspan波奇酱报名参加学校的文艺表演((⁄ ⁄•⁄ω⁄•⁄ ⁄))/spanspan8.16/span/lilispan第六天/spanspan纽带乐队成员为演出做准备/spanspan8.17/span/li/ul/diva hrefhttps://www.bilibili.com/bangumi/play/ss43164?spm_id_from333.337.0.0 stylefont-size: 12px;text-decoration: none; target_blankdiv classnew_morespan查看更多/span/div/a/div/div!-- 2部分 侧边图案--div classpageullii/idiv虹夏/div/lilii/idiv凉/div/lilii/idiv喜多/div/lilii/idiv波奇酱/div/li/ul/div/div
/body
/html
CSS代码
*{margin: 0px;padding: 0px;list-style: none;
}.box_content{width: 1358px;margin: 0 auto;margin-top: 100px;background-color: white;
}
.first{width: 820px;height: 380px;float: left;
}
.box_content::after{clear: both;display: block;content: ;
}
.second{width: 820px;height: 340px;background-color: burlywood;}
.boy{width: 820px;height: 40px;background-color: rgb(233, 12, 145);
}
.third{width: 520px;height: 380px;/* background-color: red; */float: right;/* background-image: url(../image/20230714234449.gif); */background-size: 520px 380px;
}
ul::after{content: ;display: block;clear: both;
}
.boy ul{background-color: #eee;
}
.boy ul li{text-align: center;list-style: none;width:25%;height: 40px;color:palevioletred;float: left;box-sizing: border-box;line-height: 40px;
}
.boy ulli:hover{color:blue;background-color: #fff;border-bottom:2px solid #AB8E66;font-weight: 600;
}.new_bo{width: 100%;height: 35px;border-bottom: 2px solid #dbdada;
}
.new_bo ul li{list-style: none;float: left;height: 35px;font-size: 18px;margin-right: 125px;font-weight: 300;
}.new_bo li:nth-of-type(4){margin: 0;
}.new_bo ul li:hover{color: #1da6ba;font-weight: 700;border-bottom: 2px solid red;
}
.new_titel{width: 100%;height: 60px;
}
.new_titel h2{color: #1da6ba;height: 60px;box-sizing: border-box;line-height: 60px;border-bottom: 2px solid #dbdada;text-align: center;padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.new_content{height: 245px;width: 100%;box-sizing: border-box;
}
.new_content ul li{height: 40px;border-bottom: 1px solid #dbdada;line-height: 40px;list-style: none;font-size: 14px;font-weight: 300;
}
.new_content ul li span:nth-of-type(1){border: 1px solid red;padding: 1px 2px;margin-right: 10px;
}
.new_content ul li span:nth-of-type(2){padding: 1px 2px;margin-right: 10px;width: 80%;/* 文字超出处理 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.new_content ul li span:nth-of-type(2):hover{color: #e9852d;font-weight: 600;
}
.new_content ul li span:nth-of-type(3){float: right;}
.new_more{height: 40px;line-height: 40px;font-size: 12px;background-color: #e3e2e2;text-align: center;
}
.new_more:hover{color: blueviolet;font-weight: 600;background-color: gainsboro;font-size: 16px;
}
.page ul{list-style: none;width: 66px;height: px;background-color:#e3e2e2;/* 描述圆角边框 */border-top-left-radius:5px;border-bottom-left-radius: 5px;position: absolute;right: 0;top: 50%;/* border: 2px solid red; */box-sizing: border-box;
}
.page ul li{height: 57px;padding-top: 10px;width: 66px;/* border: 2px solid red; */
}
.page ul li:nth-of-type(1) i{display: block;width: 23px;height: 30px;background-image: url(../image/虹夏.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;/* 过渡准备 */position: relative;top: 0;transition: all 0.2s;
}
.page ul li div{text-align: center;margin: 0 auto;font-size: 12px;width: 66px;font-weight: 400;color: #1da6ba;/* border: 2px solid red; */
}
.page ul li:nth-of-type(2) i{display: block;width: 23px;height: 30px;background-image: url(../image/凉.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;position: relative;top: 0;transition: all 0.2s;
}
.page ul li:nth-of-type(3) i{display: block;width: 23px;height: 30px;background-image: url(../image/c9fcc3cec3fdfc03924559cff0699094a4c27d1e8834.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;position: relative;top: 0;transition: all 0.2s;
}
.page ul li:nth-of-type(4) i{display: block;width: 23px;height: 23px;background-image: url(../image/波奇.webp);background-repeat: no-repeat;background-size: 23px 30px;margin: 0 auto;position: relative;top: 0;transition: all 0.2s;
}
.page ul li:hover div{font-weight: 500;font-size: 16px;
}
.page ul li:hover i{top: -6px;
}
图片资源 好了以上就是本期的全部内容了我们下一期再见再分享一张壁纸给大家~
