radius: 5px;}.content .button ul li:nth-child(2){ background:none;
color:#FF9900; border:1px solid grey; border:none; width:100px;}
【文字】
.wrapper{background: white;}.box{ display:flex; margin:0 5%; flex-
direction: rows;}.box div{ margin:0 20px;}.box .list{ flex:2;
background:black; padding: 4% 4%; box-shadow: 0px 0px 40px
rgba(0,0,0,.1);}.box .list h1{ font-size:30px; color:#FF9900;}.box
.list h2{ font-size:14px; color:#444;}.box .list hr{ margin:20px
0;}.box .list .item ul li{ font-size:15px; background: #444; line-
height:48px; margin: 0 -10%; padding:0 10px; font-weight: 700;
opacity: 0.5; border-bottom: 1px solid #808080;}.box .list .item ul
li:hover{ transition: all 2s ease; opacity: 1;}.box .list .item ul
li:nth-child(){ transition: all 2s ease; opacity: 1;}.box .content{
flex:5; margin-bottom: 40px;}.box .content ul li{ background: #f9f9f9;
padding:40px; box-shadow: 0px 0px 40px rgba(0,0,0,.1);}/* .box .content ul
li:hover img{ transform: scale(1.03); transition: all 1s ease;}.box
.content ul li:hover h1{ color:#FF9900;} */.box .content ul li:hover{
transition: all 2s ease; border-radius: 50px; transform:
scale(1.03);}.box .content ul li img{ width:150px; height: 225px;
overflow: hidden; object-fit: cover;}.box .content ul li .neirong{
display:flex; margin:5% 0;}.box .content h1{ font-size:20px; font-
weight:bold;}.box .content p{ font-size: 14px; color:#444; margin:0
10px; font-weight: 500; text-indent: 2em;}.box .content ul li .other{
background:#808080; height:2px; width:100px; position:relative;
left:45%;}
【关于】
.wrapper .head{ display: flex; justify-content: center;}.wrapper .head
li{ background: #f9f9f9; margin:0 20px; height:450px;
width:450px; display: flex; flex-direction: column; justify-content:
center; align-items: center; box-shadow: 0px 0px 40px
rgba(0,0,0,.1);}.wrapper .head li:hover{ transition:all 1s ease;
height: 500px; transform: translate(0,-5px);}.wrapper .head li img{
height: 200px; width:200px; border-radius: 50%;}.wrapper .head li h5{
color:#444; margin: 20px; font-size:20px;}.wrapper .head li p{
margin: 10px; font-size: 18px; font-weight: 500;}.wrapper h1,.wrapper
p{ text-align: center;}.wrapper .box{ margin: 50px 0;}
二、html文件+导航+foot区的css源代码
【首页】
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-
ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8">
<![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--
><!--[if gt IE 8]> <html class="no-js"> <!--<![endif]--><html> <head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
content="IE=edge"> <title>首页</title> <meta name="description"
剩余16页未读，继续阅读
CodingLife99
- 粉丝: 1172
- 资源: 455
我的内容管理
展开
最新资源
- Vue实现iOS原生Picker组件：详细解析与实现思路
- Arduino蓝牙小车：参数调试与功能控制
- 百度Java面试精华：200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南：CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略：44步详解流程
- RecyclerView全面解析：替代ListView的新选择
- Android开发：自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发：BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0：Android事件总线详解与实战应用
- Android FileUtil：全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
