学了三个小时html 和 css 编了个网页（几乎通用所有类型网址，简称万能型网页）
代码html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一点红旅</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 全局样式 */
*{
margin:0;
padding:0;
}
/* 头部样式 */
.header {
background-color: #2D99EF;
margin:0 auto;
width:80%;
height:80px;
}
/* 头部图片样式 */
.header img{
width:200px;
height:80px;
float:right;
line-height:80px;
}
.header strong{
height:80px;
font-size:18px;
float:left;
margin-left:10px;
line-height:80px;
color:#f2f2f2;
}
/* 轮播图样式 */
#screen {
width: 1000000px;
height: 1000000px;
animation: 10s dfdfd infinite;
}
#screen img {
float: left;
}
#tv {
width: 80%;
height: 300px;
overflow: hidden;
margin:0 auto;
}
@keyframes dfdfd {
/* 0%{} */
25% {
transform: translateX(0px)
}
25.1015% {
transform: translateX(-500px)
}
50% {
transform: translateX(-500px)
}
50.1015% {
transform: translateX(-1000px)
}
75% {
transform: translateX(-1000px)
}
75.1015% {
transform: translateX(-1500px)
}
/* 100% {
transform: translateX(-1500px)
} */
}
/* 导航条 */
.topnav {
width:80%;
margin: auto;
overflow: hidden;
background-color: #333;
}
/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 主界面 */
div.main
{
width:80%;
margin: auto;
}
/* 学科小学初中高中 */
.box{
width:20%;
height:400px;
}
/* 清除li样式 */
ul,li{
list-style: none;
}
/* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 */
/* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */
ul.biglist{
position:relative;
display:flex;
}
/* 将三个li宽度平分，高度60px */
li{
flex:1;
height:40px;
}
/* input隐藏 */
input{
display:none;
}
/* 设置input的下一个节点label的样式 */
input+label{
display:block;
width:100%;
height:100%;
background:#ccc;
font-size:15px;
text-align: center;
line-height: 40px;
color:#333;
}
/* 设置div内容的基础样式 隐藏内容div*/
input+label+div{
display:none;
position: absolute;
left:0;
top:40px;
}
/* input选中状态时候对应的label的样式 */
input:checked+label{
background: #333333;
color:#fff;
}
/* input选中时候显示对应的div */
input:checked+label+div{
display:block;
margin:0;
}
div.subject
{
width:100%;
font-size:15px;
text-align:center;
}
ul.smalllist
{
text-align:center;
overflow: auto;
}
div.box
{
float:left;
}
/*分栏 */
div.fenlan1xueshu
{
width:30%;
margin-right:50px;
float:right;
}
div.fenlan2kandian
{
width:30%;
float:right;
}
div.xueshukanban
{
width:200px;
text-align:center;
font-size:20px;
background-color: #10EDFE;
}
div.kandianxinwen
{
width:200px;
text-align:center;
font-size:20px;
background-color: #10EDFE;
}
/*底部脚印图片 */
div.footer
{
width:80%;
margin: auto;
margin-top:300px;
}
img.footimg
{
width:100%;
height:250px;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<h1>
<img src = "http://www.anyuer.club/zb_users/upload/2019/05/201905311559314412410009.jpg"> </img>
<strong>一点红旅</strong>
</h1>
</div>
<!--轮播图-->
<div id="tv">
<div id="screen">
<img src="http://www.anyuer.club/zb_users/theme/qk_zhuan/include/random/10.jpg" height="300px" width="500px"/>
<img src="http://www.anyuer.club/zb_users/theme/qk_zhuan/include/random/7.jpg" height="300px" width="500px"/>
<img src="http://www.anyuer.club/zb_users/theme/qk_zhuan/include/random/5.jpg" height="300px" width="500px"/>
<img src="http://www.anyuer.club/zb_users/theme/qk_zhuan/include/random/6.jpg" height="300px" width="500px"/>
</div>
</div>
<!--导航栏-->
<div class="topnav">
<a href="http://www.anyuer.club">团队介绍</a>
<a href="http://www.anyuer.club">科研成果</a>
<a href="http://www.anyuer.club">出版论文</a>
</div>
<div class="main">
<!--学科小学初中高中-->
<div class="box">
<ul class = "biglist">
<li>
<input type="radio" name="check" id="active1" checked><label for="active1">小学</label>
<div class = "subject">
<ul class = "smalllist">
<li>
<div class="content"> <a href ="http://www.anyuer.club"> 体育 </a></div>
</li>
<li>
<div class="content"> <a href ="http://www.anyuer.club"> 生化 </a></div>
</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="check" id="active2"><label for="active2">初中</label>
<div class = "subject">
<ul class = "smalllist">
<li>
<div class="content"> <a href ="http://www.anyuer.club"> 美术 </a></div>
</li>
<li>
<div class="content"> <a href ="http://www.anyuer.club"> 英语 </a></div>
</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="check" id="active3"><label for="active3">高中</label>
<div class = "subject">
<ul class = "smalllist">
<li>
<div class="content"> <a href ="http://www.anyuer.club"> 思修 </a></div>
</li>
<li>
<div class="content"> <a href ="http://www.anyuer.club"> 近代史 </a></div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!--分栏-->
<div class = "fenlan1xueshu">
<div class = "xueshukanban">
<a href="http:www.anyuer.club" hidefocus="true" class="current" target="_blank">学术看板</a>
</div>
<ul class="index-ul-1">
<li><span class="rt">[04-26]</span><a onclick="openWin('/seeyon/xndxNewsData.do?method=userView&id=aFcraERkZGkySmd2WHNrZ1BnZTNkNGRsNmNwMDg3a04=')" href="#" title="【含弘讲坛】“提升植物学研究领域研究生学术论文英文写作水平”系列讲座">【含弘讲坛】“提升植物学研究领域研究生学...</a><div class="bk"></div></li>
<li><span class="rt">[04-24]</span><a onclick="openWin('/seeyon/xndxNewsData.do?method=userView&id=MlM4RTV1VzdBUmpTTlE2dHZEcEJiZmRKdFJ5Q1ZFaHY=')" href="#" title="【光大讲坛】近代西藏地方各民族交流交往交融史研究—以昌都地区为例">【光大讲坛】近代西藏地方各民族交流交往交...</a><div class="bk"></div></li>
</ul>
</div>
<div class = "fenlan2kandian">
<div class = "kandianxinwen">
<a href="http:www.anyuer.club" hidefocus="true" class="current" target="_blank">看点新闻</a>
</div>
<ul class="index-ul-1">
<li><span class="rt">[04-26]</span><a onclick="openWin('/seeyon/xndxNewsData.do?method=userView&id=aFcraERkZGkySmd2WHNrZ1BnZTNkNGRsNmNwMDg3a04=')" href="#" title="【含弘讲坛】“提升植物学研究领域研究生学术论文英文写作水平”系列讲座">【含弘讲坛】“提升植物学研究领域研究生学...</a><div class="bk"></div></li>
<li><span class="rt">[04-24]</span><a onclick="openWin('/seeyon/xndxNewsData.do?method=userView&id=MlM4RTV1VzdBUmpTTlE2dHZEcEJiZmRKdFJ5Q1ZFaHY=')" href="#" title="【光大讲坛】近代西藏地方各民族交流交往交融史研究—以昌都地区为例">【光大讲坛】近代西藏地方各民族交流交往交...</a><div class="bk"></div></li>
</ul>
</div>
</div>
</div>
</div>
<!--底部脚印图片-->
<div class="footer">
<img class="footimg" src="http://www.anyuer.club/zb_users/theme/qk_zhuan/include/random/4.jpg">
</div>
</body>
</html>看一下效果预览
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论