HTML练习一
效果图
动态图
html代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="static/content/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="static/content/index.css" />
</head> <body>
<!--背景-->
<div class="bg">
<img src="static/image/bg-timg2.jpg" width="100%" height="100%" />
</div>
<!--头部-->
<div class="container logo-search">
<div class="row">
<div class="logo">
<h1 style="margin-top: 10px;">HTML练习</h1>
</div>
<div class="search">
<input type="text" class="placeholder" id="s" name="s" placeholder="搜索……" autocomplete="off">
</div>
</div>
</div>
<!--导航栏-->
<div class="container navigation">
<div class="row">
<ul>
<li>
<a>首页</a>
</li>
<li>
<a>菜单1</a>
</li>
<li>
<a>菜单2</a>
</li>
<li>
<a>菜单3</a>
</li>
<li>
<a>菜单4</a>
</li>
<li>
<a>菜单5</a>
</li>
<li>
<a>菜单6</a>
</li>
<li>
<a>菜单7</a>
</li>
</ul>
</div>
</div>
<!--内容-->
<div class="container main">
<div class="row">
<!--左边-->
<div class="all-column left-column">
<div class="tab">
CSS教程
</div>
<div class="sidebar-box">
<a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table)</a> <a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table二)</a>
</div>
</div>
<!--中间-->
<div class="all-column main-column">
<!--轮播图片-->
<div class="tempWrap">
<ul>
<li>
<a href="">
<img src="static/image/banner1.jpg" />
</a>
</li>
<li>
<a href="">
<img src="static/image/banner2.jpg" />
</a>
</li>
<li>
<a href="">
<img src="static/image/banner3.jpg" />
</a>
</li>
</ul>
<ol class="tempWrap-ol">
<li style="background-color: #222222;">1</li>
<li>2</li>
<li>3</li>
</ol>
</div> <!--内容-->
<div class="main-content">
内容
</div>
</div>
<!--右边-->
<div class="all-column right-column">
<div class="tab right-box right-tab">
分类导航
</div>
<div class="sidebar-box right-box">
<ul>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">服务端</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
<li>
<a>菜单1</a>
</li>
<li>
<a>菜单2</a>
</li>
<li>
<a>菜单3</a>
</li>
<li>
<a>菜单4</a>
</li>
<li>
<a>菜单5</a>
</li>
<li>
<a>菜单6</a>
</li>
<li>
<a>菜单7</a>
</li>
<li>
<a>菜单87</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">客户端</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">数据库</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">测试</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="row footer-data">
Copyright © 2013-2019
<strong>
<a href="//www.runoob.com/" target="_blank">菜鸟教程</a>
</strong>
<strong>
<a href="//www.runoob.com/" target="_blank">runoob.com</a>
</strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<!--返回顶部标签-->
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部" style="display: inline-block;"><i class="glyphicon glyphicon-chevron-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="glyphicon glyphicon-qrcode"></i></a>
<a class="writer" style="" href="javascript:void(0)" title="标记/收藏"><i class="glyphicon glyphicon-star-empty" aria-hidden="true"></i></a>
<!-- qrcode modal -->
<div id="bottom-qrcode" class="modal-fade" style="display: none;">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" src="static/image/1.png"></div>
</div>
</div> <script src="static/scripts/jQuery-2.2.0.min.js"></script>
<script src="static/scripts/bootstrap.min.js"></script>
<script src="static/scripts/index.js"></script>
</body> </html>
css代码：
.::after,.::before{
content: "";
display: table;
}
.::after,.::before{
clear: both;
}
body,ul,li{
margin:;
padding:;
color: #000000;
list-style: none;
}
div,li{
display: block;
}
.bg {
width: 100%;
min-width: 1000px;
height: 100%;
min-height: 1000px;
position: fixed;
z-index: -1;
}
.container {
margin: 0 auto;
padding: 0 10px;
}
/*头部*/
.logo-search{
width: 100%;
height: 80px;
padding: 10px 0 10px 20px;
overflow: hidden;
/*border: solid 1px yellow;*/
}
.logo{
width: 60%;
margin-right: 1%;
float: left;
}
.search{
width: 30%;
float: left;
}
.placeholder{
line-height: 34px;
left: 9px;
margin-top: 10px;
text-align: initial;
white-space: nowrap;
right: 9px;
height: 35px;
width: 94%;
padding: 0 3% 0 3%;
background-color: #fff;
border: 1px solid #c8c8c8;
border-radius: 3px;
color: #ccc;
font-weight:;
font-size: 1.2em;
}
/*导航栏*/
.navigation {
width: 100%;
height: 40px;
background-color: yellowgreen;
font-size: 1.1em;
font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
overflow: hidden;
}
.row{
max-width: 1260px;
min-width: 755px;
margin: 0 auto;
padding:0 10px;
}
.navigation .row ul{
height: 40px;
padding: 10px 0 10px 10px;
list-style: nnone;
white-space: nowrap;
}
.navigation .row ul li{
float: left;
margin: 0 20px 0 0;
display: inline;
line-height: 20px;
text-align: center;
white-space: nowrap;
}
.navigation .row ul li a{
color: #FFFFFF;
padding: 10px 0 10px 0;
margin: 10px 0 0 0;
text-decoration: none;
}
.navigation .row ul li a:hover{
color: #CFCFCF;
}
/*内容*/
.main {
margin-top: 20px;
width: 100%;
}
.all-column{
margin-right: 1%;
float: left;
}
.left-column{
width: 14%;
/*height: 1000px;*/
/*border: solid 1px red;*/
}
.tab{
opacity: .7;
padding-left: 4px;
font-size: 1.2em;
line-height: 1.9em;
font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
color: grey;
text-shadow: 0 1px 0 rgba(255,255,255,.15);
border: solid 1px rgba(0,0,0,.1);
border-bottom:;
background-clip: padding-box;
background-color: #f2f2f2;
}
.sidebar-box{
background: #fff;
margin: 5px 0 20px 0;
}
.sidebar-box a{
line-height: 20px;
text-decoration: none;
color: #000000;
background-color: #f6f4f0;
padding: 4px;
border-bottom: 1px solid #efefef;
display: block;
}
.sidebar-box a:hover{
font-weight: bold;
color: #2AABD2;
background-color: #CFCFCF;
}
.main-column{
width: 68%;
/*height: 1500px;*/
/*border: solid 1px #007BFF;*/
}
.tempWrap{
width: 100%;
height: 400px;
/*border: solid 1px #007BFF;*/
position: relative;
overflow: hidden;
}
.tempWrap ul li a img{
width: 100%;
height: 100%;
}
.tempWrap ul{
width: 300%;
position: relative;
overflow: hidden;
padding: 0px;
margin: 0px;
left: 0%;
}
.tempWrap ul li{
width: 33.33%;
height: 400px;
float: left;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
}
.tempWrap-ol {
position: absolute;
z-index:;
left:;
right:;
bottom: 10px;
padding: 0 10px;
text-align: center;
display: inline-block;
}
.tempWrap-ol li{
width: 10px;
height: 10px;
font-size:;
line-height:;
border-radius: 50%;
display: inline-block;
text-align: center;
margin-right: 10px;
background-color: #c2c2c2;
cursor: pointer;
}
.main-content {
width: 100%;
height: 1000px;
border: solid 1px #007BFF;
font-size: 50px;
line-height: 500px;
text-align: center;
}
.right-column{
width: 14%;
/*height: 1000px;
border: solid 1px #101010;*/
}
.right-tab{
font-size: 30px;
font-weight: bold;
line-height: 50px;
}
.right-box{
margin:;
padding:;
text-align: center;
}
.right-box > ul > li{
margin: 5px 0 0 0;
position: relative;
vertical-align: middle;
cursor: pointer;
}
.right-box ul li a{
line-height: 30px;
}
.right-box > ul > li:hover > a{
font-weight: bold;
text-decoration: underline;
color: #3E8F3E;
background-color: #CFCFCF;
}
.right-box ul li:hover > ul{
display: block;
}
.right-tree {
position: absolute;
width: 300px;
/*height: 200px;*/
background: #f6f4f0;
right: 100%;
top:;
display: none;
float: left;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.right-tree li{
width: 140px;
margin: 5px;
float: left;
display: inline;
line-height: 20px;
text-align: center;
white-space: nowrap;
}
.right-tree li a{
color: #000000;
text-decoration: none;
}
.right-tree li a:hover{
color: #007BFF;
text-decoration: underline;
}
/*底部*/
.footer{
width: 100%;
height: 60px;
margin-top: 20px;
/*background-color: #fff;*/
}
.footer-data{
line-height: 60px;
text-align: center;
color: #000000;
font-size: 14px;
}
/*返回顶部标签*/
.fixed-btn{
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
border: 1px solid #eee;
background-color: white;
font-size: 24px;
z-index:;
}
.fixed-btn .go-top {
border-bottom: 1px solid #eee;
}
.fixed-btn a {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
color: #64854c;
text-decoration: none;
}
.fixed-btn a:hover {
background-color: #CFCFCF;
}
.fixed-btn a:after {
content: ".";
font-size:;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.fixed-btn a i {
vertical-align: middle;
}
.fa {
display: inline-block;
font-family: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
}
.fixed-btn .modal-fade {
top: auto;
bottom:;
height: 188px;
width: 128px;
padding: 10px;
margin:;
right: 65px;
left: auto;
text-align: center;
position: absolute;
}
.fixed-btn .modal-fade:after,
.fixed-btn .modal-fade:before{
position: absolute;
top: 109px;
right: -100px;
content: '';
display: inline-block;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid white;
}
.panel-modal .panel-body {
overflow-y: auto;
}
.panel-body .panel-body img{
width: 128px;
height: 128px;
}
js代码：
$(function() {
//返回顶部标签
$(window).scroll(function() {
if($(window).scrollTop() > 100) {
$(".go-top").fadeIn(150);
} else {
$(".go-top").fadeOut(150);
}
});
$(".go-top").click(function() {
if($('html').scrollTop()) {
$('html').animate({
scrollTop: 0
}, 100);
return false;
}
$('body').animate({
scrollTop: 0
}, 100);
return false;
});
//微信二维码显示
$('.qrcode').hover(function() {
$('#bottom-qrcode').css({"display": "block"})
},function() {
$('#bottom-qrcode').css({"display": "none"})
}
);
//右侧菜单显示
// $('.right-box ul li a').hover(function() {
// $(".right-box ul li a + ul").addClass("blue");
// $('.blue').css({"display": "block"})
// },function() {
// $('.blue').css({"display": "none"})
// $(".right-box ul li a + ul").removeClass("blue");
// }
// );
//轮播图片
var index = 0;
function selectImage(liindex){
index = liindex;
var perleft = -index * 100;
$(".tempWrap ul").animate({"left": perleft + "%"});
// $('.tempWrap ul').css({"left": perleft + "%"});
$('.tempWrap-ol li').css({"background-color": "#c2c2c2"});
$('.tempWrap-ol li').eq(liindex).css({"background-color": "#222222"});
};
$('.tempWrap-ol li').click(function(e){
var i = parseInt(e.target.textContent);
selectImage(i-1);
});
function startImage(){
if(index == 2){
index = 0;
}else{
index++;
}
selectImage(index);
setTimeout(function(){ startImage(); } , 3000);
};
$('.tempWrap').onLoad(startImage());
})
图片的话自己找吧
随机推荐
- Truffle测试框架
Truffle测试框架 2018年06月08日 19:01:19 tianlongtc 阅读数 1000 Truffle 有一个标准的自动化测试框架,让你可以非常方便地测试您的合约.这个框架允许您 ...
- Flume-自定义 Interceptor（拦截器）
使用 Flume 采集服务器本地日志,需要按照日志类型的不同,将不同种类的日志发往不同的分析系统. 在实际的开发中,一台服务器产生的日志类型可能有很多种,不同类型的日志可能需要发送到不同的分析系统. ...
- 解决阿里云轻量级服务器mysql无法用数据库操作软件连接
第一步:去阿里云购买一台轻量应用服务器Lamp然后登录到控制台点击应用详情 点击后你可以看到一些服务器的数据 首先是访问服务器的首页地址,默认会放一个html文件在网站根目录下(即/home/www/ ...
- Ubuntu 18.04系统下arm-linux-gcc交叉编译器安装
Ubuntu 18.04系统: arm-linux-gcc 4.4.3版本. 安装arm-linux-gcc将压缩包arm-linux-gcc.tar.gz解压到arm-linux-gcc文件夹tar ...
- kotlin之lambda表达式和匿名函数
lambda表达式,称为匿名函数,是一种函数字面值,也就是没有声明的函数,但可以作为表达式传递出去. 函数类型: 对于接受另一个函数的作为自己的参数,必须针对这个参数指定一个函数的类型如 fun &l ...
- Activiti核心API
ProcessEngine 说明: 1) 在Activiti中最核心的类,其他的类都是由他而来. 2) 产生方式: 在前面看到了两种创建ProcessEngine(流程引擎)的方式 ...
- Anaconda3详细安装使用教程及问题总结
1.Anaconda是什么? 简单来说,Anaconda是Python的包管理器和环境管理器. 先来解决一个初学者都会问的问题:我已经安装了Python,那么为什么还需要Anaconda呢?原因有以下 ...
- Python中elasticsearch插入和更新数据的实现方法
Python中elasticsearch插入和更新数据的实现方法 这篇文章主要介绍了Python中elasticsearch插入和更新数据的实现方法,需要的朋友可以参考下 首先,我的索引结构是酱紫的. ...
- 独立的js文件中不能使用EL表达式取值
在独立的js文件中写了一个EL表达式取值,发现没有取到值,原因在于不能在独立的js文件中使用EL表达式,可以在jsp页面定义全局变量,然后在js文件中引用
- 上证50ETF申赎清单
[ETF50] Fundid1=510051 CreationRedemptionUnit=900000 MaxCashRatio=0.50000 Publish=1 CreationRedempti ...